開發(fā)工具與關鍵技術：Axure RP and 快速原型設計 作者：天狼 撰寫時間：2021.1.13

1.關于動態(tài)面板作用：
a. 是容器。
b. 有動效。
c. 限制顯示區(qū)域。
d. 可拖動。
e. 可固定到瀏覽器。
f. 根據(jù)瀏覽器100%寬度。
2.動態(tài)面板的各種經(jīng)典應用：
(一) 輪播：在web網(wǎng)頁中，可以說有網(wǎng)頁就必須有輪播。輪播簡單來說就是幾個圖片自動的切換，也可以人工干預圖片切換操作，
簡單操作：
拖動一個動態(tài)面板至畫布，自己調節(jié)好尺寸和位置，雙擊動態(tài)面板，進入面板狀態(tài)管理，進入狀態(tài)一，拖動一個圖片，載入自己想要的圖片設置好尺寸，位置，在主頁雙擊動態(tài)面板復制一個動態(tài)二，接下來就是載入第二張需要顯示的照片。以此類推，需要多少就載入多少。
在主頁選擇到動態(tài)面板>>載入時>>設置面板狀態(tài)>>選擇狀態(tài)next，向后循環(huán)，循環(huán)間隔2000毫秒，進入動畫與退出動畫可以為逐漸。
關于輪播的其他功能在這里不一一描述。

(二) 選項卡案例：
大概邏輯：
運用判斷+動態(tài)面板+選中效果+手機元件實現(xiàn)的
給1,2,3設置點擊切換動態(tài)面板，
實現(xiàn)效果：
如果選中的是1，那么點擊2 和點擊三就向左滑動。
如果選中的是2，那么點擊1向右滑動，點擊3向左滑動，
如果選中3，點擊1和2均向右滑動

具體操作：

如圖：拖一個手機的模型，還有狀態(tài)欄，適應調整位置，尺寸。
拖動一個一級標題，編輯為選項卡，加一個類似蒙版的背景
拖3個一模一樣的矩形讓他們居中，分別編輯1,2,3，注意給設置選中狀態(tài)，三個矩形設置為一組，組名可以自定義
拖動一個動態(tài)面板設置位置，尺寸，復制三個，分別設置不同顏色
接下來就是動作的設置，因為步驟太多，直接截圖操作，自行參考即可
第一張圖片對應矩形1的動作，以此類推

(三) 手風琴案例：
1.手風琴：一般用于菜單欄的展開，當然也可以通過類似推動效果來實現(xiàn)。

2.一個簡單的例子：

First：拖動一個動態(tài)面板，在狀態(tài)一的時候，將自動調整為內容尺寸打√，之后拖動一個矩形，編輯為編輯。

Second：復制一個狀態(tài)二，復制3個和前面矩形大小一樣的矩形分別編輯為：剪切，復制，粘貼

Third：動作編輯：進入主頁>>選中編輯矩形>>鼠標單擊時>>設置面板狀態(tài)>>選中當前元件>>選擇狀態(tài)為狀態(tài)二>>推動/拉動元件，方向下方，動畫線性，時間500毫秒

Fourth：進入狀態(tài)二頁面>>選中編輯矩形>>鼠標單擊時>>設置面板狀態(tài)>>選中當前元件>>選擇狀態(tài)為狀態(tài)一>>推動/拉動元件，方向下方，動畫線性，時間500毫秒
如圖：主頁編輯，狀態(tài)二

(四) 人物介紹卡案例：
1.很多時候我們看一張圖片時，可能短時間不明白別人需要表達什么意思，而有文字出現(xiàn)的話可以大概率避免這個問題，但是在圖片上直接寫文字又會影像圖片美觀，所以我們來看看前輩們是如何解決這個問題的。

2.一個簡單的案例：

First：拖動動態(tài)面板至畫布，調節(jié)大小，雙擊進入狀態(tài)一，拖一個圖片，然后載入圖片，調節(jié)好大小。

Second：制作一個蒙版，拖動一個無邊框矩形大小位置和圖片一樣，設置不透明度為30%，編輯文字：這是我女神！將他隱藏起來。

Third：給狀態(tài)一設置動作：鼠標移入時>>顯示>>顯示蒙版，動畫逐漸，時間300毫秒>>置于頂層
設置尺寸>>狀態(tài)一的圖片>>寬度大于你設置圖片寬度20px,高度大于你設置圖片高度20px>>錨點：中心，動畫：線性，時間：500毫秒。

給蒙版設置動作：鼠標移出時>>隱藏蒙版
設置狀態(tài)一的圖片設置尺寸，就是還原原來的大小
如圖：

總結

以上是生活随笔為你收集整理的Axure RP 动态面板介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。