? ? ? 動(dòng)效能使應(yīng)用增色不少，動(dòng)效的設(shè)計(jì)要有意義。它就像編排一組舞蹈，好的動(dòng)效優(yōu)雅高效，每一個(gè)動(dòng)作和變化都有意義。有序的進(jìn)場(chǎng)，整齊劃一的退場(chǎng)。動(dòng)效設(shè)計(jì)的軟件很多，其中Pixate是初學(xué)者很好的選擇，它功能簡單，理解起來很容易，上手極快。上一篇案例是其官網(wǎng)的一個(gè)案例，有詳細(xì)的介紹和完整的素材，大家可以試試。

? ? ? ? 好了，廢話少說，這次是實(shí)際項(xiàng)目中的一個(gè)小案例給大家分享一下。先上最后的效果，感覺還是不錯(cuò)的：

最終效果

整個(gè)界面中剛開始的時(shí)候只有一個(gè)按鈕，有點(diǎn)像Metarial Desgin中Float Action Button。通過點(diǎn)擊這個(gè)按鈕調(diào)出菜單，展現(xiàn)出其他針對(duì)當(dāng)前界面的操作。這樣設(shè)計(jì)的目的是節(jié)約移動(dòng)端界面的空間，讓用戶更加專注于內(nèi)容本身而不被其他元素打擾。

第一步先把素材制作好,整個(gè)動(dòng)效包含的素材并不多：六個(gè)圖標(biāo)（menu,infor,grid_view,thumb_up,switch）,兩個(gè)背景（按鈕的背景，菜單面板的背景）。

第二步把素材導(dǎo)入到pixate軟件后理清思路。整個(gè)動(dòng)效的大概過程是點(diǎn)擊按鈕后展開菜單面板，其他圖標(biāo)按順時(shí)針依次出場(chǎng)；再次點(diǎn)擊按鈕其他圖標(biāo)依次消失后收起面板。就是這么簡單，然后調(diào)節(jié)動(dòng)畫的數(shù)值，在手機(jī)上預(yù)覽效果。

Pixate軟件的原理是每一個(gè)圖層(layer)可以賦予動(dòng)作（action）和動(dòng)畫(animation);動(dòng)畫是由某個(gè)圖層的動(dòng)作觸發(fā)的。這次依然放出動(dòng)效的拆解圖，方便大家學(xué)習(xí)理解。

華麗的進(jìn)場(chǎng)

優(yōu)雅的退場(chǎng)

附件下載（制作本案例需要的素材和一個(gè)成品文件）

感覺有點(diǎn)幫助就點(diǎn)個(gè)贊，給點(diǎn)鼓勵(lì)。