2023年【Axure 動(dòng)態(tài)面板】讓你的動(dòng)畫變成“永動(dòng)機(jī)”

【Axure動(dòng)態(tài)面板】讓你的動(dòng)畫變成“永動(dòng)機(jī)”本文適合有肯定Axure基礎(chǔ)的讀者閱讀！

一、動(dòng)起來(lái)

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

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

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

假如我想讓這個(gè)loading動(dòng)畫持續(xù)10秒鐘呢，或許你會(huì)說(shuō)，那簡(jiǎn)潔，把動(dòng)畫的持續(xù)時(shí)間調(diào)到10000ms，像這樣：

那我們?cè)賮?lái)看看調(diào)整后的效果：

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

再看看，嗯，這次效果對(duì)了：

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

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

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

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

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

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

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

我們?cè)趻呙槠骺纯葱Ч榱烁庇^地展現(xiàn)最終效果，我在狀態(tài)1中放了文字“1”，狀態(tài)2中放了文字“2”，并給動(dòng)態(tài)面板加了一個(gè)背景色）：

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

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

這就完了？是的，這就完了，來(lái)看看效果吧：

理論上它可以永久轉(zhuǎn)下去，是的，我說(shuō)的是理論上，由于我信任你也知道，永動(dòng)機(jī)不行能被造出來(lái)，當(dāng)頁(yè)面關(guān)閉的時(shí)候，這個(gè)loading動(dòng)畫也就停了。

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

接下來(lái)是我做的一組動(dòng)效，里面大多數(shù)的都是通過(guò)動(dòng)態(tài)面板作為掌握器來(lái)完成的，大家有愛好可以看一下。傳送門

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

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

本文主要還是跟大家共享動(dòng)態(tài)面板在循環(huán)動(dòng)畫中的使用。實(shí)際上，動(dòng)態(tài)面板的循環(huán)播放除了在動(dòng)畫播放方面