Axure 可以實現(xiàn)豐富的動畫效果，幾乎涵蓋了我們平時設(shè)計中所能接觸到的系統(tǒng)動畫，但是，當你需要讓你的動畫循環(huán)播放，你知道該怎么做嗎？本篇文章告訴你。

本文適合有一定 Axure 基礎(chǔ)的讀者閱讀！

一、動起來

在 Axure 中，如果想讓下面這個 loading 圖標動起來，你應(yīng)該能夠很快實現(xiàn)。

我相信大多數(shù)人的思路是，像下圖這樣給 loading 圖標添加一個[載入時]的[旋轉(zhuǎn)】效果：

讓我們來看看這個效果在瀏覽器中呈現(xiàn)出來的樣子，我們會發(fā)現(xiàn)這個圖標轉(zhuǎn)動了一圈之后就停了下來（gif 圖片會循環(huán)播放，實際上圖標只轉(zhuǎn)了一圈）：

如果我想讓這個 loading 動畫持續(xù)10秒鐘呢，也許你會說，那簡單，把動畫的持續(xù)時間調(diào)到 10000ms，像這樣：

那我們再來看看調(diào)整后的效果：

可以看到，雖然持續(xù)時間達到10秒鐘，但是動畫的速度卻變慢了很多，這個時候你應(yīng)該想到了，持續(xù)的時間變長了，但旋轉(zhuǎn)的角度沒有變化，所以導(dǎo)致速度變慢了，這個時候應(yīng)該同步調(diào)整速度，變成這樣：

再看看，嗯，這次效果對了：

但，如果我想讓這個圖標持續(xù)轉(zhuǎn)5分鐘，10分鐘，或者1個小時，怎么樣，是不是有點不會算了？那如果我希望它能永遠一直轉(zhuǎn)下去呢，雖然你可能會問我永遠有多遠，但我只能告訴你，永遠肯定不是通過一個數(shù)值來表達。

接下來，我就帶你用另外一種方式來讓這個 loading 圖標成為“永動機”。

二、永久持續(xù)地動起來

首先，我們在 loading 圖標所在的頁面中拖入一個[動態(tài)面板]，并在面板中添加多一個狀態(tài)（這一步很重要，因為 Axure 添加動態(tài)面板默認只有一個狀態(tài)，而我們至少需要用到兩個狀態(tài)）。

至于狀態(tài)中的內(nèi)容，不重要，可以不放任何東西，我們只是把它當成一個控制器，并不需要它顯示任何內(nèi)容。

接下來，我們需要給這個動態(tài)面板添加兩個事件：

1、[載入時]，以1秒鐘為間隔，循環(huán)切換到下一個狀態(tài)，設(shè)置截圖如下：

我們在瀏覽器看看效果（為了更直觀地展示最終效果，我在狀態(tài)1中放了文字“1”，狀態(tài)2中放了文字“2”，并給動態(tài)面板加了一個背景色）：

可以看到，動態(tài)面板會不斷地在[狀態(tài)1]和[狀態(tài)2]進行切換，我知道這個時候有人會問了：這跟 loading 動畫有什么關(guān)系？這就涉及到動態(tài)面板的第2個事件了。

2、[狀態(tài)變化時]，將 loading 圖標在1秒內(nèi)旋轉(zhuǎn)360°：

這就完了？是的，這就完了，來看看效果吧：

理論上它可以永遠轉(zhuǎn)下去，是的，我說的是理論上，因為我相信你也知道，永動機不可能被造出來，當頁面關(guān)閉的時候，這個 loading 動畫也就停了。

三、實戰(zhàn)案例

接下來是我做的一組動效，里面大多數(shù)的都是通過動態(tài)面板作為控制器來完成的，大家有興趣可以看一下。傳送門>>

其中最復(fù)雜的應(yīng)該算是這個機械時鐘效果的實現(xiàn)了，不過原理也很簡單，我看已經(jīng)有大佬發(fā)過類似的教程，我也就不再班門弄斧了。

簡單講就是把表盤分成360°，動態(tài)面板每秒鐘運行一次，獲取當前的時間，根據(jù)時間判斷時針、分針、秒針各應(yīng)該旋轉(zhuǎn)多少度，有興趣大家可以去搜一下相關(guān)的文章。

本文主要還是跟大家分享動態(tài)面板在循環(huán)動畫中的使用。實際上，動態(tài)面板的循環(huán)播放除了在動畫播放方面，在另外的一些設(shè)計上也有非常巧妙的用處，有興趣歡迎關(guān)注一下。

下篇文章我會給大家?guī)韯討B(tài)面板循環(huán)播放的另外一種用處！感謝閱讀！