上一個(gè)章節(jié)《這不是Axure教程！（六）動(dòng)態(tài)面板之一：屬性和動(dòng)效》總結(jié)了動(dòng)態(tài)面板的內(nèi)功心法
本章節(jié)總結(jié)動(dòng)態(tài)面板的拳腳招式简烤，也即根據(jù)用途并結(jié)合常見交互效果朝卒，分析實(shí)現(xiàn)思路
1、容器
2乐埠、滑動(dòng)/翻轉(zhuǎn)效果（包含于顯示-隱藏）
3、拖動(dòng)效果
4囚企、固定位置
5丈咐、多狀態(tài)切換
首先申明一點(diǎn)，堅(jiān)決不采用龙宏！其他教程中開篇直接講解步驟的方式棵逊。
我的經(jīng)驗(yàn)總結(jié)會(huì)分三步：
第一先說(shuō)明效果
第二依次分析效果可能涉及哪些用例交互
第三說(shuō)明在軟件中如何設(shè)置
根據(jù)效果分析思路，這個(gè)做法有兩方面好處银酗。
第一有利于讀者辆影，希望大家養(yǎng)成這樣的分析思路，以后見到任何效果自己想要實(shí)現(xiàn)時(shí)黍特，就可以一步步推理其實(shí)現(xiàn)方法蛙讥。
第二是自己復(fù)盤，有時(shí)候我們也許知道做法灭衷，但并不清楚原因次慢，為什么要這樣實(shí)現(xiàn)，其他方式是否可行翔曲，寫思路就是為了讓自己從源頭上更清晰迫像，做到心中有數(shù)。
一瞳遍、容器
● 效果名稱
導(dǎo)航欄多級(jí)菜單的顯示與隱藏
● 效果描述
頂部導(dǎo)航欄為一級(jí)菜單闻妓，鼠標(biāo)移上一級(jí)菜單時(shí)看見三個(gè)二級(jí)菜單，同時(shí)一級(jí)菜單改變背景色和字體色掠械，鼠標(biāo)移出時(shí)隱藏二級(jí)菜單由缆，一級(jí)菜單恢復(fù)原樣
● 效果分析過(guò)程
1、鼠標(biāo)移上移出一級(jí)菜單猾蒂，一級(jí)菜單改變背景色犁功，改變字體顏色————已知矩形自帶交互效果，包含背景色和字體色的改變婚夫，所以一級(jí)菜單可直接使用矩形
2浸卦、二級(jí)菜單同時(shí)顯示或隱藏————說(shuō)明三個(gè)菜單的交互效果相同。如果二級(jí)菜單做成矩形案糙，那么三個(gè)矩形的顯示隱藏效果保持一致即可限嫌。如果把三個(gè)二級(jí)菜單放入動(dòng)態(tài)面板靴庆，那么只需設(shè)置動(dòng)態(tài)面板的效果即可。所以怒医，給一級(jí)菜單添加效果炉抒，鼠標(biāo)移入時(shí)，隱藏或顯示動(dòng)態(tài)面板稚叹。
必須要設(shè)置的效果是
重點(diǎn)1：動(dòng)畫焰薄，設(shè)置為向下滑動(dòng)，可以制造逐漸滑動(dòng)顯示二級(jí)菜單的效果扒袖，而不是一閃而過(guò)
重點(diǎn)2：更多選項(xiàng)塞茅，設(shè)置為彈出效果。彈出是指像彈簧一樣可以彈出也可以收回季率。
不能設(shè)置其他效果的原因是
顯示隱藏效果中野瘦，更多選項(xiàng)都有4個(gè)選擇：無(wú)、燈箱效果飒泻、彈出效果鞭光、推出元件，分別效果如下
右側(cè)三個(gè)一級(jí)菜單都添加了鼠標(biāo)移入時(shí)顯示二級(jí)菜單的動(dòng)作泞遗，但是更多選項(xiàng)中的設(shè)置不同
【彈出效果】
彈出后惰许，鼠標(biāo)移出彈出區(qū)域，則二級(jí)菜單自動(dòng)收回
【燈箱效果】
彈出后史辙，自動(dòng)給窗口添加背景區(qū)域啡省，如圖頁(yè)面上的灰色，彈出將會(huì)遮蓋所有其他區(qū)域
【推動(dòng)效果】
二級(jí)菜單將會(huì)從一級(jí)菜單的位置被推動(dòng)至下方髓霞，如圖卦睹，文本【推動(dòng)效果】原位置在燈箱效果同一行，由于二級(jí)菜單推動(dòng)方库，導(dǎo)致文本區(qū)也被推動(dòng)
另外结序，僅設(shè)置向下滑動(dòng)，不設(shè)置更多選項(xiàng)纵潦，也會(huì)存在問(wèn)題徐鹤。只有彈出效果才會(huì)自動(dòng)收回，若是不設(shè)置邀层，則菜單展開后無(wú)法自動(dòng)收回返敬。
二、滑動(dòng)/翻轉(zhuǎn)效果
● 效果名稱
多圖-自動(dòng)輪流播放
● 效果描述
4張圖片寥院，每一張間隔500ms自動(dòng)向左滑動(dòng)劲赠，最后一張后再輪回播放第一張。參考各類電商網(wǎng)站首頁(yè)
● 效果分析過(guò)程
1、當(dāng)前頁(yè)面加載后凛澎，圖片就自動(dòng)開始輪播————也即說(shuō)明這個(gè)效果應(yīng)該添加在當(dāng)前頁(yè)面霹肝，頁(yè)面載入時(shí)設(shè)置面板狀態(tài)
2、4張圖片————也即對(duì)應(yīng)4種狀態(tài)塑煎，每個(gè)狀態(tài)一張圖
3沫换、自動(dòng)播放下一張————也即觸發(fā)后要變更至面板的下一個(gè)狀態(tài)，而動(dòng)態(tài)面板有個(gè)NEXT狀態(tài)最铁，可實(shí)現(xiàn)不斷向下一個(gè)狀態(tài)循環(huán)
4讯赏、圖片切換時(shí)，上一張圖片向左滑動(dòng)退出冷尉，下一張圖片向左滑動(dòng)進(jìn)入————也即需設(shè)置進(jìn)入和退出動(dòng)畫漱挎，設(shè)置向左滑動(dòng)即可，建議進(jìn)入和退出動(dòng)畫設(shè)置相同
三网严、推動(dòng)效果
● 效果名稱
鼠標(biāo)移上圖片時(shí)放大局部，參考電商網(wǎng)站商品詳情頁(yè)的放大效果
如下嗤无，右側(cè)圖片為左圖的局部細(xì)節(jié)放大震束，鼠標(biāo)當(dāng)前位置在左圖的藍(lán)色區(qū)域
● 效果描述
一張圖片，鼠標(biāo)在圖片上移動(dòng)当犯，每次移動(dòng)時(shí)都在右側(cè)區(qū)域顯示鼠標(biāo)位置的圖片放大效果
● 效果分析過(guò)程
1垢村、鼠標(biāo)僅在圖片區(qū)域移動(dòng)時(shí)，才會(huì)放大圖片————也即圖片將作為一個(gè)邊界嚎卫，只在這個(gè)區(qū)域內(nèi)移動(dòng)鼠標(biāo)才會(huì)放大
2嘉栓、鼠標(biāo)移入原圖時(shí)，右側(cè)區(qū)域就會(huì)展示————也即鼠標(biāo)移入原圖拓诸，應(yīng)顯示右側(cè)區(qū)域侵佃，反之移出則隱藏
3、鼠標(biāo)移入藍(lán)色區(qū)域時(shí)奠支，右側(cè)區(qū)域就會(huì)展示————也即鼠標(biāo)移入藍(lán)區(qū)馋辈，應(yīng)顯示右側(cè)區(qū)域，反之移出則隱藏
4倍谜、鼠標(biāo)在藍(lán)區(qū)移動(dòng)時(shí)迈螟，右側(cè)區(qū)域會(huì)展示同區(qū)域的放大效果————因?yàn)檐浖]有放大圖片的交互，但是我們可以換一個(gè)實(shí)現(xiàn)思路尔崔，如下圖示意
左側(cè)原圖答毫，右側(cè)大圖是提前放大并隱藏。放大圖片效果相當(dāng)于把大圖平移到相應(yīng)位置季春，我們只需計(jì)算平移的距離即可
平移位置的設(shè)置如下洗搂，其中 l 是指原圖，l.x 也即原圖的橫坐標(biāo)，this.x 也即鼠標(biāo)所在的動(dòng)態(tài)面板橫坐標(biāo)
將大圖的位置平移至絕對(duì)位置的坐標(biāo)是
[[(l.x - This.x)*2]] , [[(l.y - This.y)*2]]
鼠標(biāo)所在動(dòng)態(tài)面板的移動(dòng)邊界設(shè)置如下
頂部：大于等于原圖的頂部蚕脏，li.top
底部：小于等于原圖的底部侦副，li.bottom
右側(cè)：小于等于原圖的右側(cè)，li.right
左側(cè)：大于等于原圖的左側(cè)驼鞭，li.left
注：li的值需要設(shè)置局部變量秦驯，取值為原圖對(duì)應(yīng)元件
四、固定位置
● 效果名稱
頁(yè)面右側(cè)吸附與滾動(dòng)定位
● 效果描述
首先挣棕，頁(yè)面右側(cè)有功能按鈕译隘，屏幕上下滾動(dòng)時(shí)，這些功能按鈕始終固定在同一位置
其次洛心，右側(cè)有目錄或序號(hào)固耘，點(diǎn)擊目錄時(shí)頁(yè)面可滾動(dòng)到相應(yīng)位置
● 效果分析過(guò)程
1词身、右側(cè)按鈕均固定在頁(yè)面————也即需要將這些按鈕全部放入動(dòng)態(tài)面板厅目，因只有動(dòng)態(tài)面板才有固定到瀏覽器功能
2、點(diǎn)擊回到頂部按鈕法严，頁(yè)面滾動(dòng)到頂部————也即該元件需在單擊時(shí)滾動(dòng)到頂部
3损敷、點(diǎn)擊序號(hào)或目錄，頁(yè)面滾動(dòng)到相應(yīng)位置————與上同理
分析之后深啤，設(shè)置如下圖
頂部按鈕：設(shè)置單擊時(shí)滾動(dòng)到頂部元件
123等序號(hào)按鈕：設(shè)置滾動(dòng)到相應(yīng)位置的元件
所有按鈕放入動(dòng)態(tài)面板：設(shè)置動(dòng)態(tài)面板固定到瀏覽器
五拗馒、多狀態(tài)切換
● 效果名稱
點(diǎn)擊按鈕時(shí)切換到某指定狀態(tài)
● 效果描述
某一位置有3張圖片，另一位置顯示3個(gè)序號(hào)溯街，點(diǎn)擊序號(hào)1則切換至圖片1诱桂，以此類推
● 效果分析過(guò)程
1、一個(gè)位置能放置3張圖片————也即一個(gè)動(dòng)態(tài)面板有3個(gè)狀態(tài)呈昔，每個(gè)狀態(tài)包含1張圖片
2挥等、點(diǎn)擊序號(hào)1，動(dòng)態(tài)面板顯示了第一張圖————也即序號(hào)1有單擊事件堤尾，點(diǎn)擊時(shí)設(shè)置動(dòng)態(tài)面板為狀態(tài)1
按照以上思路触菜，以常理我們依次設(shè)置
序號(hào)1單擊時(shí)，設(shè)置動(dòng)態(tài)面板為 state1
序號(hào)2單擊時(shí)哀峻，設(shè)置動(dòng)態(tài)面板為 state2
序號(hào)3單擊時(shí)涡相，設(shè)置動(dòng)態(tài)面板為 state3
但是！Ｊｓ啊催蝗！這個(gè)方式效率很低，需要每個(gè)按鈕單獨(dú)設(shè)置育特，我們有更高效的方法
如下丙号，動(dòng)態(tài)面板不僅可選擇狀態(tài)先朦，還可以選擇為 Value，那么我們把Value 設(shè)置為 序號(hào)文字犬缨，就不需要每個(gè)序號(hào)單獨(dú)設(shè)置
此處需將序號(hào)元件的文字喳魏，取出來(lái)作為局部變量
以上，就是動(dòng)態(tài)面板5大功能對(duì)應(yīng)的案例實(shí)踐怀薛。
總之刺彩，對(duì)于動(dòng)態(tài)面板的的應(yīng)用，建議第一步是把5種效果分別應(yīng)用熟練枝恋，接下來(lái)就可以多種效果結(jié)合使用创倔，制作任何你看到、想到的交互焚碌。
— — — — 系 列 目 錄 — — — —
這不是Axure教程Ｆ枞痢（一）初步認(rèn)識(shí)
這不是Axure教程Ｖ骸（四）元件六要素與用例
這不是Axure教程！（五）變量與函數(shù)
這不是Axure教程＞槁睢（六）動(dòng)態(tài)面板之一:屬性和動(dòng)效
這不是Axure教程Ｌǘⅰ（六）動(dòng)態(tài)面板之二:經(jīng)典實(shí)踐
這不是Axure教程！（七）強(qiáng)大的中繼器__1
— — — — 目? 錄? 完 — — — —
