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

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

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

具體操作：

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

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

2.一個(gè)簡單的例子：

First：拖動(dòng)一個(gè)動(dòng)態(tài)面板，在狀態(tài)一的時(shí)候，將自動(dòng)調(diào)整為內(nèi)容尺寸打√，之后拖動(dòng)一個(gè)矩形，編輯為編輯。

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

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

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

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

2.一個(gè)簡單的案例：

First：拖動(dòng)動(dòng)態(tài)面板至畫布，調(diào)節(jié)大小，雙擊進(jìn)入狀態(tài)一，拖一個(gè)圖片，然后載入圖片，調(diào)節(jié)好大小。

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

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

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

總結(jié)

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

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