Axure神奇操作系列 - 循環(huán)（第一講）
眾所周知华嘹，我們使用Axure不僅僅能夠制作原型圖橄唬，也能在原型圖中實現(xiàn)一些復(fù)雜的交互仰楚。接下來帶來第一個神奇操作-循環(huán)
循環(huán)的實現(xiàn)方式
通過JavaScript提供的LOOPS迭代的方法來實現(xiàn)html中的循環(huán)一樣僧界，Axure中也提供了不同的方式能夠幫助我們來實現(xiàn)循環(huán)的操作捂襟。在用Axure這么久以來我總結(jié)歸納了兩種循環(huán)的實現(xiàn)方式即：觸發(fā)事件與動態(tài)面板循環(huán)，其中觸發(fā)事件可以針對元件本身進行操作郎汪，而動態(tài)面板循環(huán)則是借助于動態(tài)面板的循環(huán)來觸發(fā)循環(huán)效果。接下來將針對二者做詳細講解抛计。
觸發(fā)事件
觸發(fā)事件原理
其實很多的同學(xué)在用Axure很久之后可能都沒接觸到觸發(fā)事件這個動作吹截，畢竟觸發(fā)這個動作在動作庫的最后面波俄，對懦铺！就在這里支鸡！
那么當(dāng)我們針對一個原件添加觸發(fā)事件時候牧挣，發(fā)現(xiàn)動作的配置項和元件的交互有所類似瀑构，其實這個就是元件的真實交互，也就是說我們在對一個元件添加交互時候能夠通過觸發(fā)事件去觸發(fā)一個元件的交互世吨，那么如果這兩個元件是同一個而且交互唯一的話另假？
沒錯怕犁，這就能夠不斷的去交互—觸發(fā)事件—交互—觸發(fā)事件—……，就可以進入到循環(huán)事件中了戈轿。那么這也就是觸發(fā)事件的原理思杯，通過元件本身的交互去觸發(fā)自己的交互完成循環(huán)。
使用觸發(fā)事件完成漣漪效果
那么在了解了觸發(fā)事件的原理之后誊册，我們通過一個示例來講解如何通過觸發(fā)事件來完成一個交互的循環(huán)案怯，這里將通過透明度調(diào)整+尺寸調(diào)整的循環(huán)交互來實現(xiàn)漣漪效果嘲碱，最終將會實現(xiàn)下圖的效果：
以下為分析及實現(xiàn)步驟：
（1）漣漪循環(huán)解析
首先拿到一個交互麦锯，首先我們來分析下具體怎么實現(xiàn)效果（這也是未來大家在做自己的交互時候需要先考慮的問題扶欣，而不是直接上手試錯）宵蛀，那么一個漣漪實際上就是一個圓在放大自己的過程中降低自己的透明度直至消失，一個完整的漣漪實際上就是很多個這樣的圓在放大自己的過程中降低自己的透明度直至消失了煤痕，所以接谨，核心元件：一個圓脓豪，接下來就是實現(xiàn)了
（2）漣漪效果實現(xiàn)
首先扫夜，在Axure中拖入一個圓笤闯。設(shè)置直徑為100，填充顏色看自己喜好超陆，邊框取消掉时呀，這樣為了出來的效果好看。接下來我們先實現(xiàn)圓形在放大自己的時候降低自己的透明度航攒。
那么在這里我們會遇上第一個問題：什么時候觸發(fā)漣漪效果瞧预？
一般來說我會習(xí)慣于在元件載入時候就觸發(fā)垢油，這樣能夠?qū)崿F(xiàn)頁面載入之后就開始我們的效果躯喇，當(dāng)然根據(jù)實際情況也可以點擊之后觸發(fā)或者鼠標(biāo)移入之后觸發(fā)等等廉丽，此處根據(jù)自己需要的效果靈活調(diào)整即可妻味。那么根據(jù)載入時的交互來設(shè)計责球，得到如下交互：
這兩步拆分如下：
在2000ms中以錨點為中心將圓的尺寸放大為直徑240嘉裤；
在2000ms中將圓的透明度調(diào)整為0%屑宠。
需要注意的是典奉，在axure中添加動作時秋柄，動作的先后順序并不是按照組織動作的先后順序由上向下進行的?骇笔，在沒有碰見等待時間之前懦傍，所有的動作同時進行粗俱。
所以整合起來就是虚吟，在2000ms中以錨點為中心將圓的尺寸放大為直徑240并且將圓的透明度調(diào)整為0%串慰。就這樣邦鲫，我們就能夠?qū)崿F(xiàn)圓的放大效果灸叼，接下來我們要考慮如何循環(huán)這個過程。
在循環(huán)之前庆捺，我們需要先將圓還原到放大之前的狀態(tài)古今，這里不做細講，簡而言之就是將透明度和尺寸恢復(fù)到之前的狀態(tài)（也可以把透明度再降低點滔以，尺寸在小點捉腥，具體效果差異可以自己嘗試著看）。那么在這里需要注意上面提到的一句話：動作的先后順序并不是按照組織動作的先后順序由上向下進行的你画，所以中間我們需要加上等待事件但狭，這個事件的時間設(shè)定為0即可，對于Axure來說撬即，只要有這個事件，那么交互在這里就會停下來呈队。（這里建議可以嘗試下不做等待事件看下最終的效果宪摧，可以加深理解），然后我們得到這個交互：
這個時候我們F5一下，就可以發(fā)現(xiàn)元件放大透明之后返回到自己原始狀態(tài)了漆弄，那么接下來就是如何循環(huán)了倒谷。
這里直接講解：添加觸發(fā)事件動作，選擇元件為自己猴伶，然后由于我們的交互是做在自己的載入時動作上的办桨，那么饰剥，下方選擇載入時，這樣就完成了一個觸發(fā)事件了。
F5預(yù)覽下看下测秸，一個圓就能夠自己擱哪兒放大透明然后變回來再放大透明如此循環(huán)了岗憋。那么至此拧廊，其實我們已經(jīng)完成了一個完整的循環(huán)了。
后面就簡單了户敬，復(fù)制三個相同的圓抄瑟，然后給另外兩個圓的交互加上一個等待事件骂维，把三個圓疊加在一起就完成了！F5一下福铅，看下效果~
小結(jié)
通過觸發(fā)事件我們能夠很方便的實現(xiàn)一個循環(huán)汛兜，通過觸發(fā)事件我們能夠做到閃爍漏策、漣漪感耙、旋轉(zhuǎn)谦絮、左右橫跳（誤）等等各種操作草冈。那么問題來了~
由于觸發(fā)事件只要開始了就進入了一個閉環(huán)拳恋，就算在中間插入其他的動作隙赁，也只是打斷了一會兒，導(dǎo)致這個循環(huán)會不聽的進行下去，那么轰驳，如何停下來滑废？
反正目前我也沒想到好的辦法，所以下一期我們來介紹一種通過其他的元件來實現(xiàn)循環(huán)并且能夠隨時停止繼續(xù)的方法—動態(tài)面板實現(xiàn)循環(huán)。
