學(xué)會(huì)一個(gè)小案例，是為了豐富我們的交互原型設(shè)計(jì)，您可以在此基礎(chǔ)上變換出層出不窮的效果！
最近在做一個(gè)視頻通話的項(xiàng)目，剛好需要連線效果，就設(shè)計(jì)了個(gè)“水波漣漪”的效果，先看一下演示。
效果大家看到了，很簡(jiǎn)單，就是一個(gè)漣漪的加載效果；顏色將就看吧，不好看你自己調(diào)下。
開始畫原型
一、畫漣漪的波紋圈
1、首先畫四個(gè)原型，背景透明，邊框調(diào)到最粗，顏色白色，名稱隨意起；由大到小尺寸分別是100*100、80*80、60*60、40*40
此處我起名為c1、c2、c3、c4
2、然后將4個(gè)圓形的透明度由大到小依次調(diào)整為40%、60%、80%、100%
3、將4個(gè)圓形水平垂直居中
二、創(chuàng)建執(zhí)行動(dòng)畫的動(dòng)態(tài)面板
1、從默認(rèn)組件庫(kù)里，拖一個(gè)動(dòng)態(tài)面板進(jìn)來，尺寸調(diào)小一點(diǎn)，便于操作，給動(dòng)態(tài)面板也起個(gè)名稱隨意
2、我們有4個(gè)圈要做動(dòng)畫，我計(jì)算了一下波形的由隱藏到顯示再到隱藏的循環(huán)，來回正好需要8次，因此復(fù)制創(chuàng)建總共8個(gè)動(dòng)態(tài)面板的狀態(tài)
3、接下來添加交互動(dòng)作，每次切換狀態(tài)的時(shí)候依次從小圈到大圈顯示再隱藏，為了讓漣漪看起來由快到慢，這里的顯示動(dòng)畫也將時(shí)間逐步增長(zhǎng)處理
動(dòng)作列表
操作步驟
三、完成封裝，添加全局執(zhí)行命令
1、將剛剛創(chuàng)建的所有原件，全選編組，并且起個(gè)名稱便于操作
2、將其中4個(gè)圓形，設(shè)置為隱藏
3、最后給剛剛編的組，添加一個(gè)加載命令
這里的循環(huán)間隔時(shí)間越長(zhǎng)，動(dòng)畫速度越慢
ok了，F(xiàn)5看下效果吧！
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。