本文會(huì)給大家分享直播pk狀態(tài)的小動(dòng)效制作感悟了，細(xì)節(jié)磨了很久，希望能給大家一點(diǎn)啟發(fā)。今天會(huì)從過(guò)程稿和最終稿的效果展示、主體動(dòng)畫(huà)、修飾元素動(dòng)畫(huà)等方面進(jìn)行分享。

下圖是直播pk的狀態(tài)設(shè)計(jì)效果：

如果只是靜態(tài)的，我認(rèn)為還不夠有亮點(diǎn)，如果能加上一點(diǎn)動(dòng)效設(shè)計(jì)，就比較好了。

實(shí)不相瞞，這是一次需求方?jīng)]有提需求，設(shè)計(jì)側(cè)主動(dòng)反推的逆向需求。

今天的分享大綱如下：

1. 幾個(gè)過(guò)程稿和最終稿的效果展示

先來(lái)展示幾個(gè)過(guò)程稿，了解以下整體動(dòng)效細(xì)節(jié)的調(diào)整。

第一稿效果如下：

稍微有點(diǎn)生硬，氛圍感不夠強(qiáng)烈，于是第二版加了一些氛圍元素，加長(zhǎng)了主體位移的距離，效果如下：

比之前好一點(diǎn)，但是有同事反饋說(shuō)稍微有點(diǎn)快，然后效果不夠霸氣干脆，于是我又咔咔一頓調(diào)整，讓主體出來(lái)之后稍微停頓一小會(huì)，然后垂直落下：

這樣就會(huì)干脆很多，而且加了一個(gè)閃光和高光的效果，讓整體更加有氛圍一些。

大概的三個(gè)版本優(yōu)化過(guò)程是這樣的，其他小的微調(diào)優(yōu)化就不展示了，接下來(lái)我們拆分來(lái)剖析下這個(gè)動(dòng)效。

2. 先完成主體動(dòng)畫(huà)

我們先來(lái)看下主體的動(dòng)畫(huà)效果：

可以分成2個(gè)屬性來(lái)看：

位移：

主體物先從下到上，然后再往下位移一小段！

縮放：

縮放很簡(jiǎn)單，就是從小到大的一個(gè)簡(jiǎn)單縮放，但這里有個(gè)層次的細(xì)節(jié)，邊緣的外圈和小皇冠是等主體縮放完成之后再依次出來(lái)的，這樣會(huì)讓整體層次感更佳。

3. 翅膀的小動(dòng)畫(huà)

小翅膀的動(dòng)畫(huà)算是一個(gè)小亮點(diǎn)吧，我加了一個(gè)拖影的效果，其實(shí)從制作層面也很簡(jiǎn)單，固定一個(gè)錨點(diǎn)：

然后依次進(jìn)行旋轉(zhuǎn)即可。這里注意下，因?yàn)槿齻€(gè)翅膀是拖影效果，所以依次是原來(lái)越大，然后透明度依次降低。

動(dòng)畫(huà)效果如下：

翅膀做一個(gè)合成（類(lèi)似智能對(duì)象），然后復(fù)制對(duì)稱(chēng)就可以了，這樣改翅膀的動(dòng)畫(huà)改一個(gè)就可以。

4. 加上修飾元素動(dòng)畫(huà)

整個(gè)主體翅膀的動(dòng)畫(huà)已完成，就可以想辦法加點(diǎn)修飾元素了，我這里一共加了三個(gè)觸點(diǎn)：

第一個(gè)：放射線條

讓整體有一種放射光芒的感覺(jué)

第二個(gè)：星星光圈

因?yàn)樾切堑脑O(shè)定是有一點(diǎn)反射材質(zhì)的，所以最后讓星星再次產(chǎn)生一個(gè)光圈擴(kuò)散：

第三個(gè)：反射高光

最后動(dòng)畫(huà)結(jié)束，再加一個(gè)簡(jiǎn)單的高光位移：

很簡(jiǎn)單，就是白色矩形加上透明度和位移即可。

總結(jié)

好了，以上就是這個(gè)小動(dòng)效的制作感悟了，細(xì)節(jié)磨了很久，希望能給大家一點(diǎn)啟發(fā)。

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》沒(méi)想到用這個(gè)方法，原來(lái)小白也可以做動(dòng)效！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)