上一個章節(jié)《這不是Axure教程?。﹦討B(tài)面板之一：屬性和動效》總結了動態(tài)面板的內功心法
本章節(jié)總結動態(tài)面板的拳腳招式，也即根據用途并結合常見交互效果，分析實現(xiàn)思路
1、容器
2、滑動/翻轉效果（包含于顯示-隱藏）
3、拖動效果
4、固定位置
5、多狀態(tài)切換
首先申明一點，堅決不采用！其他教程中開篇直接講解步驟的方式。
我的經驗總結會分三步：
第一先說明效果
第二依次分析效果可能涉及哪些用例交互
第三說明在軟件中如何設置
根據效果分析思路，這個做法有兩方面好處。
第一有利于讀者，希望大家養(yǎng)成這樣的分析思路，以后見到任何效果自己想要實現(xiàn)時，就可以一步步推理其實現(xiàn)方法。
第二是自己復盤，有時候我們也許知道做法，但并不清楚原因，為什么要這樣實現(xiàn)，其他方式是否可行，寫思路就是為了讓自己從源頭上更清晰，做到心中有數(shù)。
一、容器
● 效果名稱
導航欄多級菜單的顯示與隱藏
● 效果描述
頂部導航欄為一級菜單，鼠標移上一級菜單時看見三個二級菜單，同時一級菜單改變背景色和字體色，鼠標移出時隱藏二級菜單，一級菜單恢復原樣
● 效果分析過程
1、鼠標移上移出一級菜單，一級菜單改變背景色，改變字體顏色————已知矩形自帶交互效果，包含背景色和字體色的改變，所以一級菜單可直接使用矩形
2、二級菜單同時顯示或隱藏————說明三個菜單的交互效果相同。如果二級菜單做成矩形，那么三個矩形的顯示隱藏效果保持一致即可。如果把三個二級菜單放入動態(tài)面板，那么只需設置動態(tài)面板的效果即可。所以，給一級菜單添加效果，鼠標移入時，隱藏或顯示動態(tài)面板。
必須要設置的效果是
重點1：動畫，設置為向下滑動，可以制造逐漸滑動顯示二級菜單的效果，而不是一閃而過
重點2：更多選項，設置為彈出效果。彈出是指像彈簧一樣可以彈出也可以收回。
不能設置其他效果的原因是
顯示隱藏效果中，更多選項都有4個選擇：無、燈箱效果、彈出效果、推出元件，分別效果如下
右側三個一級菜單都添加了鼠標移入時顯示二級菜單的動作，但是更多選項中的設置不同
【彈出效果】
彈出后，鼠標移出彈出區(qū)域，則二級菜單自動收回
【燈箱效果】
彈出后，自動給窗口添加背景區(qū)域，如圖頁面上的灰色，彈出將會遮蓋所有其他區(qū)域
【推動效果】
二級菜單將會從一級菜單的位置被推動至下方，如圖，文本【推動效果】原位置在燈箱效果同一行，由于二級菜單推動，導致文本區(qū)也被推動
另外，僅設置向下滑動，不設置更多選項，也會存在問題。只有彈出效果才會自動收回，若是不設置，則菜單展開后無法自動收回。
二、滑動/翻轉效果
● 效果名稱
多圖-自動輪流播放
● 效果描述
4張圖片，每一張間隔500ms自動向左滑動，最后一張后再輪回播放第一張。參考各類電商網站首頁
● 效果分析過程
1、當前頁面加載后，圖片就自動開始輪播————也即說明這個效果應該添加在當前頁面，頁面載入時設置面板狀態(tài)
2、4張圖片————也即對應4種狀態(tài)，每個狀態(tài)一張圖
3、自動播放下一張————也即觸發(fā)后要變更至面板的下一個狀態(tài)，而動態(tài)面板有個NEXT狀態(tài)，可實現(xiàn)不斷向下一個狀態(tài)循環(huán)
4、圖片切換時，上一張圖片向左滑動退出，下一張圖片向左滑動進入————也即需設置進入和退出動畫，設置向左滑動即可，建議進入和退出動畫設置相同
三、推動效果
● 效果名稱
鼠標移上圖片時放大局部，參考電商網站商品詳情頁的放大效果
如下，右側圖片為左圖的局部細節(jié)放大，鼠標當前位置在左圖的藍色區(qū)域
● 效果描述
一張圖片，鼠標在圖片上移動，每次移動時都在右側區(qū)域顯示鼠標位置的圖片放大效果
● 效果分析過程
1、鼠標僅在圖片區(qū)域移動時，才會放大圖片————也即圖片將作為一個邊界，只在這個區(qū)域內移動鼠標才會放大
2、鼠標移入原圖時，右側區(qū)域就會展示————也即鼠標移入原圖，應顯示右側區(qū)域，反之移出則隱藏
3、鼠標移入藍色區(qū)域時，右側區(qū)域就會展示————也即鼠標移入藍區(qū)，應顯示右側區(qū)域，反之移出則隱藏
4、鼠標在藍區(qū)移動時，右側區(qū)域會展示同區(qū)域的放大效果————因為軟件并沒有放大圖片的交互，但是我們可以換一個實現(xiàn)思路，如下圖示意
左側原圖，右側大圖是提前放大并隱藏。放大圖片效果相當于把大圖平移到相應位置，我們只需計算平移的距離即可
平移位置的設置如下，其中 l 是指原圖，l.x 也即原圖的橫坐標，this.x 也即鼠標所在的動態(tài)面板橫坐標
將大圖的位置平移至絕對位置的坐標是
[[(l.x - This.x)*2]] , [[(l.y - This.y)*2]]
鼠標所在動態(tài)面板的移動邊界設置如下
頂部：大于等于原圖的頂部，li.top
底部：小于等于原圖的底部，li.bottom
右側：小于等于原圖的右側，li.right
左側：大于等于原圖的左側，li.left
注：li的值需要設置局部變量，取值為原圖對應元件
四、固定位置
● 效果名稱
頁面右側吸附與滾動定位
● 效果描述
首先，頁面右側有功能按鈕，屏幕上下滾動時，這些功能按鈕始終固定在同一位置
其次，右側有目錄或序號，點擊目錄時頁面可滾動到相應位置
● 效果分析過程
1、右側按鈕均固定在頁面————也即需要將這些按鈕全部放入動態(tài)面板，因只有動態(tài)面板才有固定到瀏覽器功能
2、點擊回到頂部按鈕，頁面滾動到頂部————也即該元件需在單擊時滾動到頂部
3、點擊序號或目錄，頁面滾動到相應位置————與上同理
分析之后，設置如下圖
頂部按鈕：設置單擊時滾動到頂部元件
123等序號按鈕：設置滾動到相應位置的元件
所有按鈕放入動態(tài)面板：設置動態(tài)面板固定到瀏覽器
五、多狀態(tài)切換
● 效果名稱
點擊按鈕時切換到某指定狀態(tài)
● 效果描述
某一位置有3張圖片，另一位置顯示3個序號，點擊序號1則切換至圖片1，以此類推
● 效果分析過程
1、一個位置能放置3張圖片————也即一個動態(tài)面板有3個狀態(tài)，每個狀態(tài)包含1張圖片
2、點擊序號1，動態(tài)面板顯示了第一張圖————也即序號1有單擊事件，點擊時設置動態(tài)面板為狀態(tài)1
按照以上思路，以常理我們依次設置
序號1單擊時，設置動態(tài)面板為 state1
序號2單擊時，設置動態(tài)面板為 state2
序號3單擊時，設置動態(tài)面板為 state3
但是?。?！這個方式效率很低，需要每個按鈕單獨設置，我們有更高效的方法
如下，動態(tài)面板不僅可選擇狀態(tài)，還可以選擇為 Value，那么我們把Value 設置為 序號文字，就不需要每個序號單獨設置
此處需將序號元件的文字，取出來作為局部變量
以上，就是動態(tài)面板5大功能對應的案例實踐。
總之，對于動態(tài)面板的的應用，建議第一步是把5種效果分別應用熟練，接下來就可以多種效果結合使用，制作任何你看到、想到的交互。
— — — — 系 列 目 錄 — — — —
這不是Axure教程?。ㄋ模┰嘏c用例
這不是Axure教程?。ㄎ澹┳兞颗c函數(shù)
這不是Axure教程！（六）動態(tài)面板之一:屬性和動效
這不是Axure教程?。﹦討B(tài)面板之二:經典實踐
— — — — 目? 錄? 完 — — — —
