axure商城

Axure動態面板:實現圖片縮放和進度條加載效果

本文轉載自小樓老師個人博客,原文地址:http://www.iaxure.com/3142.html?文中略有刪減,想要學習的同學請跟著一起做!本文通過動態面板實現圖片縮放和進度條加載效果。鼠標放到圖片上時,圖片自動放大。鼠標移出圖片時,圖片又恢復成原來的大小。

動態面板是在Axure中唯一一個能夠調整尺寸的元件。結合動態面板的狀態樣式,我們可以實現圖片縮放以及簡單的進度條加載效果。

案例一:圖片縮放效果

這個案例效果為鼠標移入圖片時,圖片按中心點放大;鼠標移出時,圖片縮小為原尺寸。放大縮小有動態的效果。

首先,要完成這個效果我們需要先放入動態面板,命名為“zoomimage”,然后設置其背景圖片,然后設置【重復】為“填充”或“適應”。這樣能夠保證動態面板改變尺寸大小時,背景圖片能夠跟隨改變尺寸大小。(圖161)

161

(圖161)

然后,我們來分析一下在圖片縮放的原理。圖片(動態面板背景)放大前尺寸為200*200,放大后尺寸為300*300,因為是中心點縮放,放大前與放大后位置相對移動了x50、y50。(圖162)

162

(圖162)

根據分析,我們得出,除了要對動態面板進行放大縮小,還需要在放大縮小的同時移動動態面板到指定的位置上。但是,動態面板同時縮放與移動的時候,動畫效果會互相影響,所以,如果需要有動態效果,就要把移動和縮放分開進行。解決這個問題的辦法,就是在動態面板的外面再添加一個動態面板。外層動態面板負責移動,內層動態面板負責改變圖片背景的尺寸。

具體實現步驟如下:(圖163)

1、在之前做好的動態面板“zoomimage”上點擊鼠標右鍵,選擇“轉為動態面板”完成嵌套,為新的外層面板命名為“moveimage”,然后再次點擊鼠標右鍵設置外層動態面板“自動調整為內容尺寸”;

2、為外層動態面板“moveimage”添加【鼠標移入時】事件的用例動作為【移動】動態面板“moveimage”【到絕對位置】【x】“50”【y】“50”,并為其設置【動畫】【線性】“500”毫秒。(圖163)

163

(圖163)

3、繼續為上一步中的用例添加動作為【設置面板尺寸】動態面板“zoomimage”【寬】“300”【高】“300”,【動畫】同樣設置為【線性】“500”毫秒(圖164)

164

(圖164)

通過以上步驟,就完成了鼠標移入圖片時中心點放大的效果。

參照圖片放大這個原理,我們繼續完成鼠標移出圖片時按中心點縮小為原來尺寸的效果。我們設置【鼠標移出時】【移動】動態面板“moveimage”【到絕對位置】【x】“100”【y】“100”,同時【設置面板尺寸】動態面板“zoomimage”【寬】“200”,【高】“200”。不要忘記,以上兩個動作都要添加【動畫】【線性】“500”毫秒。圖(165)

165

圖(165)

備注:動態面板的【鼠標移入時】和【鼠標移出時】事件,一般都沒有直接顯示在列表中,而是要在【更多事件】中選擇。

案例二:進度自動加載

相對于上個案例,這個案例更加簡單。實現過程為:

1、放入一個矩形作為進度條外框,尺寸為500*5;然后,放入一個動態面板,為其設置狀態樣式的背景顏色為紅色,并調整這個動態面板的高度為5,左側與矩形邊框對齊。(圖166)

166

(圖166)

2、點中動態面板,為其添加觸發事件【載入時】的用例動作。先設置動作【設置面板尺寸】“當前元件”為【寬】“1“【高】“5”,讓動態面板載入時進度條變為最小的狀態。然后,設置動作【設置面板尺寸】“當前元件”為【寬】“500“【高】“5”,并設置【動畫】為【線性】“3000“毫秒,這樣就會有一個3秒鐘從最小寬度到最大寬度的一個勻速增長的進度條效果。(圖167)

167

(圖167)

給TA買糖
共{{data.count}}人
人已贊賞
高級教程

教程:用axure動態面板制作返回頂部按鈕

2015-11-5 12:50:28

高級教程

用Axure制作產品需求文檔PRD的一個實例

2015-12-7 14:14:04

axure商城
0 條回復 A文章作者 M管理員
    暫無討論,說說你的看法吧
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo