相關(guān)推薦
您可能對(duì)下面課程感興趣
Axure8.0視頻教程

74小節(jié)已有17108人學(xué)過

UI交互app及axure設(shè)計(jì)教程

84小節(jié)已有76701人學(xué)過

Axure8實(shí)例之支付寶咻一咻
發(fā)布時(shí)間:2022-03-18 11:06 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175 閱讀: 1130

3

其實(shí),我覺得這真是個(gè)卵用沒有的東西,但是既然有人問了,那我就做一個(gè),正好說下Axure8的優(yōu)點(diǎn)。

這個(gè)需要用Axure8做,為什么呢?因?yàn)锳xure8可以多個(gè)動(dòng)作同時(shí)進(jìn)行。

在Axure7里,如果想在向上移動(dòng)的同時(shí)隱藏,是做不到的,只能是先移動(dòng)到位了再隱藏。

而Axure8就可以!請(qǐng)大家認(rèn)真觀察支付寶咻一咻,它的動(dòng)畫是一個(gè)圓圈一邊放大一邊變透明。

那么,如何實(shí)現(xiàn)呢?

QQ截圖20160331002906

需要弄個(gè)動(dòng)態(tài)面板,2個(gè)狀態(tài),狀態(tài)1是點(diǎn)擊前的按鈕樣式,狀態(tài)2是點(diǎn)擊后的按鈕樣式。

然后再弄2個(gè)圓圈,放在按鈕下面。

因?yàn)閳A圈的動(dòng)畫是循環(huán)的,所以我們需要想一個(gè)循環(huán)的手段,本次我們使用“顯示時(shí)”來做循環(huán),就是在圓圈完全透明后,隱藏圓圈,再顯示出來。再次顯示時(shí),就會(huì)觸發(fā)“顯示時(shí)”這個(gè)交互,實(shí)現(xiàn)循環(huán)。

QQ截圖20160331003114

1、2兩個(gè)圓圈都是一樣的,所以1做完了之后直接復(fù)制粘貼到2里就可以了,那么不同的是什么呢?是它們會(huì)一先一后的播放這個(gè)動(dòng)畫。

這時(shí)候,讓我們回到按鈕的State1上:

QQ截圖20160331003716

點(diǎn)擊按鈕的State1后,首先要將按鈕變?yōu)镾tate2,既按下后的狀態(tài)。

然后要顯示圓圈1,等待1000毫秒后再顯示圓圈2即可。

在這里做顯示1、2的時(shí),就會(huì)觸發(fā)圓圈1、2的顯示時(shí)交互,然后進(jìn)入無盡の循環(huán)中。

UI交互app及axure設(shè)計(jì)教程
我要自學(xué)網(wǎng)商城 ¥50 元
進(jìn)入購買
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
相關(guān)推薦
您可能對(duì)下面課程感興趣
Axure8.0視頻教程

74小節(jié)已有17108人學(xué)過

UI交互app及axure設(shè)計(jì)教程

84小節(jié)已有76701人學(xué)過

分類選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫 程序開發(fā) 網(wǎng)頁設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC