2014微博客戶端一馬當(dāng)先——短視頻動畫分享

又一年風(fēng)花雪月人情冷暖，又一年歲歲年年歡慶祝福。2014甲午年屬馬，一馬當(dāng)先，馬上有錢，龍馬精神，萬馬奔騰……都充斥著人們對來年的期盼和心愿。新浪微博客戶端依舊祝愿每一個用戶眼前一亮天馬行空的展現(xiàn)一下新年新氣象。大家在春節(jié)版微博客戶端能看到2014馬上新年快樂~（看過的請輕噴）這是新版客戶端更新后開機展示的一段8秒的視(niu)頻(bi)動畫。由相同的三角形分別組合形成的2014、馬頭以及新年彩球的圖案。通過3D空間旋轉(zhuǎn)、組合、運動連成一體。寓意著千千萬萬小小的正能量凝聚成此時此刻對新一年的欣喜與祝愿，煥然一體而瞬息萬變。

（重點）很多喜歡它的小伙伴兒們都會對這個動畫是如何制作出來的頗為感興趣，以下就是一些簡單的分享。首先大家在熟悉photoshop的基礎(chǔ)上，還要知道After Effects動畫設(shè)計軟件（小白誤入）。

重點：After Effects與Photoshop組合使用制作3D動畫

0， 先要有明確的構(gòu)思（此處省略一萬字……）

1，Photoshop制作靜態(tài)關(guān)鍵幀
這里的幀代表的是每一個組合畫面的最終效果。

PS設(shè)計好最終的畫面好壞是視頻動畫效果的關(guān)鍵，需要在平面設(shè)計的過程中將所有的畫面素材提前標(biāo)注好，標(biāo)注好圖層名，以備動畫調(diào)整中可以隨時確定好每一個元素的屬性。最終做到平面的效果就是最終的動畫效果（暫停視頻的畫面效果）。如果想要加入光效或者調(diào)整顏色，請把這個任務(wù)交給After Effects吧，相信它的能力比起PS有過之而無不及。

2，After Effects 3D圖層來還原出平面的效果

psd在AE中載入后會讀取到Photoshop的圖層，包括圖層名以及圖層的位置等屬性。通過3D設(shè)定將原本平面的動畫素材至于3D空間中，并加入攝像機、燈光以及陰影，將攝像機和燈光至于合適的空間位置。

3，設(shè)定新的3D動畫關(guān)鍵幀

在空間中通過重新設(shè)置和擺放，在運動過程中添加更多的關(guān)鍵幀。使之運動過程更為充滿活力和空間效果。

4，節(jié)奏與變速運動的設(shè)定

在整體動畫的運動關(guān)鍵幀都設(shè)定好之后，再根據(jù)需要做整體的動畫，這里設(shè)置了整體的3D旋轉(zhuǎn)，配合上攝像機景深的效果，設(shè)計出更具有空間感畫面效果。

5，移動端高質(zhì)量壓縮輸出
視頻的壓縮需要根據(jù)輸出的要求而定，不同的輸出方式?jīng)Q定視頻壓縮的不同格式。在移動設(shè)備上，MP4是較為通用的視頻格式。在iOS設(shè)備上也可以用mov等其他格式。MP4可以保證視頻的文件足夠小的情況下畫面幀數(shù)和畫質(zhì)損失較小。最后選擇合適的壓縮碼率和壓縮分辨率，輸出后在不同的移動設(shè)備中測試。但是對顏色色域的壓縮還是不能達到完美具體請參考。http://www.zhihu.com/question/20048209/answer/14275262

小結(jié)

所有的動畫視頻設(shè)計都都需要一個清晰而明確的思路和方法。才能更加快速和準確的達到最終的表現(xiàn)效果。其中含有運動體驗的設(shè)計都離不開各種運動變速技巧。無論是運用到視頻動畫還是界面動效都需要努力的積累和實現(xiàn)應(yīng)用。