Axure教程:如何制作超簡(jiǎn)單機(jī)械加載效果
本人教大家,如何利用Axure制作超簡(jiǎn)單機(jī)械加載效果,enjoy~
看看效果:
可以學(xué)到什么?
- 循環(huán)動(dòng)態(tài)面板的應(yīng)用
- 有關(guān)循環(huán)動(dòng)畫(huà)怎么處理
- 自帶元件庫(kù)的使用
第一步:繪制
在系統(tǒng)元件庫(kù)里搜索“齒輪”。
添加三個(gè)到畫(huà)布,設(shè)置尺寸180*180,依次命名齒輪1、齒輪2、齒輪3,如圖分布:
第二步:制作動(dòng)效
創(chuàng)建一個(gè)動(dòng)態(tài)面板,添加2個(gè)狀態(tài),命名“控制”。
新建交互【狀態(tài)改變時(shí)】:
- 旋轉(zhuǎn)齒輪2順時(shí)針經(jīng)過(guò)360°,動(dòng)畫(huà)線性5000ms;
- 旋轉(zhuǎn)齒輪3逆時(shí)針經(jīng)過(guò)360°,動(dòng)畫(huà)線性5000ms;
- 旋轉(zhuǎn)齒輪1逆時(shí)針經(jīng)過(guò)360°,動(dòng)畫(huà)線性5000ms。
然后需要驅(qū)動(dòng)“控制”動(dòng)態(tài)面板循環(huán)的交互,在什么都不選擇的情況下,點(diǎn)擊交互,頁(yè)面載入時(shí),設(shè)置“控制”動(dòng)態(tài)面板下一項(xiàng)循環(huán)間隔5000ms。
以上做的兩個(gè)步驟即每隔5秒觸發(fā)一次動(dòng)態(tài)面板循環(huán),動(dòng)態(tài)面板循環(huán)一次,就轉(zhuǎn)動(dòng)齒輪一周,轉(zhuǎn)動(dòng)時(shí)間5秒。
第三步:效果
有沒(méi)有感覺(jué)很舒服!??!用循環(huán)動(dòng)態(tài)面板同樣可以做出加載中省略號(hào)從一點(diǎn)到三點(diǎn)循環(huán)下去的效果,大家動(dòng)動(dòng)腦筋做做看吧!
本文由 @索大佩羅娜 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自Unsplash,基于CC0協(xié)議
評(píng)論
看完一篇原型設(shè)計(jì)文章啦,感覺(jué)還是不太會(huì)?
?? 想從0基礎(chǔ)開(kāi)始學(xué)習(xí)Axure么?推薦你找Axure實(shí)戰(zhàn)班的助教小可愛(ài)@CC-起點(diǎn)學(xué)院(微信:qidiancc520),回復(fù)關(guān)鍵詞:大禮包
領(lǐng)取原型設(shè)計(jì)大禮包,多學(xué)多練,你也能成為原型設(shè)計(jì)高手哦!