axure怎么制作圖片自動(dòng)播放的效果?

2020-01-29 21:34:37

字體：大中小

供稿：網(wǎng)友

我們可以使用“Axure RP”工具設(shè)計(jì)交互式原型，這是一個(gè)非常棒的工具。現(xiàn)在我們使用它來(lái)構(gòu)建圖片自動(dòng)播放（輪播），這里使用的是“Axure RP 8.0”，以下是您需要做的事情。

一、導(dǎo)入圖片

1、新建項(xiàng)目。通過(guò)依次點(diǎn)擊菜單欄“文件（File）”-“新建（New）”來(lái)創(chuàng)建新項(xiàng)目。

2、添加圖片元件。從左側(cè)元件庫(kù)（Libraries）中找到圖片（Image），拖放到畫布適合的位置。

3、導(dǎo)入圖片。雙擊圖片元件，在彈出的窗口中找到圖片，單擊“打開”。

4、導(dǎo)入其他圖片。重復(fù)2和3，再次導(dǎo)入2張圖片。

二、創(chuàng)建動(dòng)態(tài)面板

1、要?jiǎng)?chuàng)建輪播，請(qǐng)將輪播中的每個(gè)圖像置于自身的動(dòng)態(tài)面板里。

2、右鍵單擊“圖像1”，然后選擇“轉(zhuǎn)換為動(dòng)態(tài)面板（Convert to Dynamic Panel）”。 命名動(dòng)態(tài)面板“自動(dòng)播發(fā)圖片（輪播）”。

3、雙擊剛剛創(chuàng)建的動(dòng)態(tài)面板以打開動(dòng)態(tài)面板狀態(tài)管理器。

4、點(diǎn)擊綠色“+”圖標(biāo)兩次，給動(dòng)態(tài)面板三個(gè)狀態(tài)（State）。

5、單擊確定（Ok）關(guān)閉對(duì)話框。右鍵單擊“圖像2”并選擇“剪切（Cut）”。在右側(cè)“概要（Outline）”中雙擊“State2”將其打開，進(jìn)行編輯。

6、將“Image 2”粘貼到“State2”的畫布上。然后將粘貼的圖像移動(dòng)到坐標(biāo)（0,0）。

7、重復(fù)上述步驟，將“Image 3”粘貼到“State3”中。

三、制作自動(dòng)播發(fā)

1、選擇動(dòng)態(tài)面板。在屬性（Properties）選項(xiàng)卡中，雙擊“OnLoad（載入時(shí)）”添加一個(gè)新的OnLoad實(shí)例。

2、在左側(cè)列中，單擊“Set Panel State（設(shè)置面板狀態(tài)）”。

3、在右欄中，選擇“This Widget（這個(gè)小部件）”。

4、在右欄的底部，單擊標(biāo)簽為“Select state（選擇狀態(tài)）”的下來(lái)菜單，然后選擇“Next（下一個(gè)）”。單擊復(fù)選框“向后循環(huán)（Wrap from last to first）”和“循環(huán)間隔（Repeat every）”，默認(rèn)設(shè)置每秒（1000 ms），您可以更改秒數(shù)（嘗試3000毫秒）。最后將“Animate In（進(jìn)入動(dòng)畫）”和“Animate Out（退出動(dòng)畫）”值設(shè)置為“向左滑動(dòng)（slide left）”和“500 ms”。