下圖是直播pk的狀態(tài)設(shè)計效果：
如果只是靜態(tài)的，我認為還不夠有亮點，如果能加上一點動效設(shè)計，就比較好了。
實不相瞞，這是一次需求方?jīng)]有提需求，設(shè)計側(cè)主動反推的逆向需求。
今天的分享大綱如下：
1. 幾個過程稿和最終稿的效果展示
先來展示幾個過程稿，了解以下整體動效細節(jié)的調(diào)整。
第一稿效果如下：
稍微有點生硬，氛圍感不夠強烈，于是第二版加了一些氛圍元素，加長了主體位移的距離，效果如下：
比之前好一點，但是有同事反饋說稍微有點快，然后效果不夠霸氣干脆，于是我又咔咔一頓調(diào)整，讓主體出來之后稍微停頓一小會，然后垂直落下：
這樣就會干脆很多，而且加了一個閃光和高光的效果，讓整體更加有氛圍一些。
大概的三個版本優(yōu)化過程是這樣的，其他小的微調(diào)優(yōu)化就不展示了，接下來我們拆分來剖析下這個動效。
2. 先完成主體動畫
我們先來看下主體的動畫效果：
可以分成2個屬性來看：
位移：
主體物先從下到上，然后再往下位移一小段！
縮放：
縮放很簡單，就是從小到大的一個簡單縮放，但這里有個層次的細節(jié)，邊緣的外圈和小皇冠是等主體縮放完成之后再依次出來的，這樣會讓整體層次感更佳。
3. 翅膀的小動畫
小翅膀的動畫算是一個小亮點吧，我加了一個拖影的效果，其實從制作層面也很簡單，固定一個錨點：
然后依次進行旋轉(zhuǎn)即可。這里注意下，因為三個翅膀是拖影效果，所以依次是原來越大，然后透明度依次降低。
動畫效果如下：
翅膀做一個合成（類似智能對象），然后復(fù)制對稱就可以了，這樣改翅膀的動畫改一個就可以。
4. 加上修飾元素動畫
整個主體翅膀的動畫已完成，就可以想辦法加點修飾元素了，我這里一共加了三個觸點：
第一個：放射線條
讓整體有一種放射光芒的感覺
第二個：星星光圈
因為星星的設(shè)定是有一點反射材質(zhì)的，所以最后讓星星再次產(chǎn)生一個光圈擴散：
第三個：反射高光
最后動畫結(jié)束，再加一個簡單的高光位移：
很簡單，就是白色矩形加上透明度和位移即可。
承擔因您的行為而導(dǎo)致的法律責任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。