中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

一、動(dòng)起來

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

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

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

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

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

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

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

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

接下來，我就帶你用另外一種方式來讓這個(gè) loading 圖標(biāo)成為“永動(dòng)機(jī)”。

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

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

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

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

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

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

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

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

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

理論上它可以永遠(yuǎn)轉(zhuǎn)下去，是的，我說的是理論上，因?yàn)槲蚁嘈拍阋仓?，永?dòng)機(jī)不可能被造出來，當(dāng)頁面關(guān)閉的時(shí)候，這個(gè) loading 動(dòng)畫也就停了。

三、實(shí)戰(zhàn)案例

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

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

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

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

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