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