本文會給大家分享直播pk狀態的小動效制作感悟了，細節磨了很久，希望能給大家一點啟發。今天會從過程稿和最終稿的效果展示、主體動畫、修飾元素動畫等方面進行分享。

下圖是直播pk的狀態設計效果：

如果只是靜態的，我認為還不夠有亮點，如果能加上一點動效設計，就比較好了。

實不相瞞，這是一次需求方沒有提需求，設計側主動反推的逆向需求。

今天的分享大綱如下：

1. 幾個過程稿和最終稿的效果展示

先來展示幾個過程稿，了解以下整體動效細節的調整。

第一稿效果如下：

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

比之前好一點，但是有同事反饋說稍微有點快，然后效果不夠霸氣干脆，于是我又咔咔一頓調整，讓主體出來之后稍微停頓一小會，然后垂直落下：

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

大概的三個版本優化過程是這樣的，其他小的微調優化就不展示了，接下來我們拆分來剖析下這個動效。

2. 先完成主體動畫

我們先來看下主體的動畫效果：

可以分成2個屬性來看：

位移：

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

縮放：

縮放很簡單，就是從小到大的一個簡單縮放，但這里有個層次的細節，邊緣的外圈和小皇冠是等主體縮放完成之后再依次出來的，這樣會讓整體層次感更佳。

3. 翅膀的小動畫

小翅膀的動畫算是一個小亮點吧，我加了一個拖影的效果，其實從制作層面也很簡單，固定一個錨點：

然后依次進行旋轉即可。這里注意下，因為三個翅膀是拖影效果，所以依次是原來越大，然后透明度依次降低。

動畫效果如下：

翅膀做一個合成（類似智能對象），然后復制對稱就可以了，這樣改翅膀的動畫改一個就可以。

4. 加上修飾元素動畫

整個主體翅膀的動畫已完成，就可以想辦法加點修飾元素了，我這里一共加了三個觸點：

第一個：放射線條

讓整體有一種放射光芒的感覺

第二個：星星光圈

因為星星的設定是有一點反射材質的，所以最后讓星星再次產生一個光圈擴散：

第三個：反射高光

最后動畫結束，再加一個簡單的高光位移：

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

總結

好了，以上就是這個小動效的制作感悟了，細節磨了很久，希望能給大家一點啟發。

轉載請注明：學UI網》沒想到用這個方法，原來小白也可以做動效！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.wtxcl.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務