動態(tài)面板是在Axure中唯一一個能夠調(diào)整尺寸的元件。結(jié)合動態(tài)面板的狀態(tài)樣式，我們可以實現(xiàn)圖片縮放以及簡單的進度條加載效果。
案例一：圖片縮放效果
這個案例效果為鼠標移入圖片時，圖片按中心點放大；鼠標移出時，圖片縮小為原尺寸。放大縮小有動態(tài)的效果。
首先，要完成這個效果我們需要先放入動態(tài)面板，命名為“zoomimage”，然后設置其背景圖片，然后設置【重復】為“填充”或“適應”。這樣能夠保證動態(tài)面板改變尺寸大小時，背景圖片能夠跟隨改變尺寸大小。（圖161）
（圖161）
然后，我們來分析一下在圖片縮放的原理。圖片（動態(tài)面板背景）放大前尺寸為200*200，放大后尺寸為300*300，因為是中心點縮放，放大前與放大后位置相對移動了x50、y50。（圖162）
（圖162）
根據(jù)分析，我們得出，除了要對動態(tài)面板進行放大縮小，還需要在放大縮小的同時移動動態(tài)面板到指定的位置上。但是，動態(tài)面板同時縮放與移動的時候，動畫效果會互相影響，所以，如果需要有動態(tài)效果，就要把移動和縮放分開進行。解決這個問題的辦法，就是在動態(tài)面板的外面再添加一個動態(tài)面板。外層動態(tài)面板負責移動，內(nèi)層動態(tài)面板負責改變圖片背景的尺寸。
具體實現(xiàn)步驟如下：（圖163）
1、在之前做好的動態(tài)面板“zoomimage”上點擊鼠標右鍵，選擇“轉(zhuǎn)為動態(tài)面板”完成嵌套，為新的外層面板命名為“moveimage”，然后再次點擊鼠標右鍵設置外層動態(tài)面板“自動調(diào)整為內(nèi)容尺寸”；
2、為外層動態(tài)面板“moveimage”添加【鼠標移入時】事件的用例動作為【移動】動態(tài)面板“moveimage”【到絕對位置】【x】“50”【y】“50”，并為其設置【動畫】【線性】“500”毫秒。（圖163）
（圖163）
3、繼續(xù)為上一步中的用例添加動作為【設置面板尺寸】動態(tài)面板“zoomimage”【寬】“300”【高】“300”，【動畫】同樣設置為【線性】“500”毫秒（圖164）
（圖164）
通過以上步驟，就完成了鼠標移入圖片時中心點放大的效果。
參照圖片放大這個原理，我們繼續(xù)完成鼠標移出圖片時按中心點縮小為原來尺寸的效果。我們設置【鼠標移出時】【移動】動態(tài)面板“moveimage”【到絕對位置】【x】“100”【y】“100”，同時【設置面板尺寸】動態(tài)面板“zoomimage”【寬】“200”，【高】“200”。不要忘記，以上兩個動作都要添加【動畫】【線性】“500”毫秒。圖（165）
圖（165）
備注：動態(tài)面板的【鼠標移入時】和【鼠標移出時】事件，一般都沒有直接顯示在列表中，而是要在【更多事件】中選擇。
案例二：進度自動加載
相對于上個案例，這個案例更加簡單。實現(xiàn)過程為：
1、放入一個矩形作為進度條外框，尺寸為500*5；然后，放入一個動態(tài)面板，為其設置狀態(tài)樣式的背景顏色為紅色，并調(diào)整這個動態(tài)面板的高度為5，左側(cè)與矩形邊框?qū)R。（圖166）
（圖166）
2、點中動態(tài)面板，為其添加觸發(fā)事件【載入時】的用例動作。先設置動作【設置面板尺寸】“當前元件”為【寬】“1“【高】“5”，讓動態(tài)面板載入時進度條變?yōu)樽钚〉臓顟B(tài)。然后，設置動作【設置面板尺寸】“當前元件”為【寬】“500“【高】“5”，并設置【動畫】為【線性】“3000“毫秒，這樣就會有一個3秒鐘從最小寬度到最大寬度的一個勻速增長的進度條效果。（圖167）
承擔因您的行為而導致的法律責任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。