作者:鹹魚閒餘_xs
作者站酷:https://www.zcool.com.cn/article/ZOTMxMjIw.html
今天有給大家分享一個動效老司機的乾貨文章,作者有著豐富的直播禮物動效設計經驗,認真看完相信對你很有裨益。
相關預覽gif和分享僅供交流,切勿商用。著作權歸屬公司,轉載請聯繫作者,請勿私自轉載,謝謝配合。
前言
因為工作的變故,在18年底開始使用svga,撿起AE做一做動效。相關資料能查到的不多,趟了些坑。
今天開始陸陸續續整理分享些經驗乾貨給大家。
一. 什麼是SVGA
SVG,它的英文全稱為Scalable Vector Graphics,即可伸縮矢量圖形。
SVGA,理解為就是一種2d位圖動畫的儲存格式,可以很小的容量播放一個帶通道的效果,很好的替代png序列(文件容量大\自帶加密)、gif文件格式(透明通道\色域低\邊緣鋸齒明顯)。
雖然支持動態繪製矢量圖形,但也蠻佔性能,目前更多使用提前做好的位圖(Png素材)導入AE製作動畫。
帶來的直觀好處:一個10幾MB大的序列幀效果,用svga格式可以只要幾百K甚至幾十K。
設計師所製作的效果,就是用戶在版本中的完整效果,保證效果也讓內存不會爆掉。
官方網址:http://svga.io/index.html
再引用一段開發團隊的故事背景:
YY開發團隊當時針對《某直播》動畫開發的格式文件,可以更小容量的將表情動畫實現到直播等應用類軟體中。
遇到的主要問題是資源文件大小和實時內存佔用及CPU消耗。市面上有較多壓縮方法及文件格式(Gif、WebP、A-PNG等),但都無法保障滿足性能的同時還原出美術設計出的原效果。
開發團隊參照CreateJS和BodyMovin工具開發了開發 SVGA。
相關歷史看作者自述【SVGA 背後的故事】傳送門:
直播App中Android酷炫禮物動畫實現方案(上篇)
據悉在 YY 系的產品中有超過十多個產品的使用,應用範圍涵蓋 iOS / Android / Web / PC 客戶端等。
通過烘焙關鍵幀記錄每一幀的參數,動畫過程中圖片都在不斷復用,性能得到提升。並且不用解析高階插值(二次線性方程,貝塞爾曲線方程)這個格式不關心你的關鍵幀及曲線算法,因為導出時,每一幀都是關鍵幀。
二. SVGA 動效作品
目前公司的直播平臺和資訊類App普遍使用SVGA格式製作動畫和特效。
放少量效果給大家,Gif壓縮和文件大小有限制,大家看個小樣,有興趣的可以下載魚丸空間。
大多數效果幾十K-幾百K內就可以完成,不建議一個svga就是一整套序列幀,多以動畫的思路進行製作。
三. 限制與規範
雖然製作軟體是AE2017(及以上),大家都會用,但是限制還是客觀存在的。↓
支持位圖動畫和形狀圖層繪製,但是不建議太過複雜。
不支持AE自帶及外部插件的效果控制項特效,無法直接輸出。
不支持3D圖層,不支持運動模糊,不要使用時間重映射。
無法使用疊加模式,不支持圖層軌道遮罩
可以使用鋼筆工具的遮罩,但僅支持加法。
能使用的基本的Transform信息製作關鍵幀動畫(位移旋轉縮放)
可以使用父子關係,可以使用有實際數值幀變化的表達式。
可以使用合成組,但請不要層數過高及重複K幀,會導致輸出丟失。
儘量減少無用空白像素,可節省內存。
更多限制與規範可以參照下方的官方指導截圖。若有新發現,歡迎你的分享。
問:swf、 gif、Mp4文件的怎麼快速轉換成svga?
答:沒有真正快速的方法,如果你沒空了解或工期要求嚴,短期需要轉換好提交給程序,那麼就先導進AE進行渲染輸出png序列圖資源,然後再導出 SVGA 動畫。
問:某個效果,非要全套用序列圖,太大了怎麼辦?
答:序列幀縮小50%輸出(可以在AE進行操作或者PS批處理)、導入AE後放大200%;效果會模糊,但是文件大小能減少到25%,縮小到四分之一。你沒聽錯。
問:畫質縮小模糊點能接受,但是幀數依然很多,文件還是好大!
答:抽幀,每2抽1,或者每3刪2幀都行。重點是配合幀率,把原效果的節奏還原回來。
例:你幀率原本30幀每秒,對半隔幀刪50%,幀率15基本沒問題。
狠點就設置幀率10幀,每3張刪2張。資源刪減節省,配合幀率,效果時長前後保持一致。
問:序列幀資源需要循環多次,按教程把資源做了處理並打了單獨的合成組,用多個合成組前後拼接實現了序列幀循環多次的效果。但是輸出時有的幀會丟失?
答:單一的序列重複加長時間,拖下來多組、排列好給一次關鍵幀輔助即可。SVGA對序列的支持就是很不友好,資源量大時序列資源丟失會是常態,試過一些方案,結果最有效的就是減少合成組的使用(最好能在一個合成組內完成所有動畫效果)資源少合成組的問題不明顯、但是多了減的時候會痛苦,屆時記得用父集節點。
問:時間重置加循環表達式總是卡著跳1幀?好像有個空幀?
答:例如合成組15幀,默認時間重置下得到的是0-15兩個時間重映射關鍵幀;實際你製作了15幀的效果,0-15是16個數,循環應給0-14打幀(14自己k一下、刪掉15),循環解決。
注意:玩svga不要用時間重置,輸出不支持。
針對問題2,其實是有更爽利的方法,如果你對於AE熟悉,可以將素材導入AE,在輸出前進行素材右鍵→時間→時間伸縮進行(33%or50%的縮放預覽、繼而輸出)效率更高。
主要是更適合強迫症患者(資源序號是連貫的,哈哈)
六. 教程預告後續會分享一些案例製作技巧&教程,例如:
燈籠:簡單光暈與柔軟飄帶
金幣:疊加質感與加法遮罩
粒子效果:粒子原理及多種實現
煙花:序列圖的使用與資源節省
透視效果:車輪案例應用
大家敬請期待,墨染動效公眾號會第一時間發布後續相關教程,大家有什麼動效相關問題,也可以在文章下面留言。
好了,今天的分享就這裡,如果覺得對你有所幫助,不妨來一波轉發、留言、在看三連~~~
更多動效設計內容,關注並星標 墨染動效 公眾號,方便第一時間查看消息~
—
往期精選文章
動效從設計到代碼-網易雲音樂2018年度聽歌報告的背後
乾貨 | 淘寶設計師談動效的高效設計與交付
完美解決AE不支持AI漸變&不透明度的問題
超全面!動效設計標準與規範
超全面!圖標動效設計思路梳理
教你K最少的幀,做最靚的仔
從基礎原理到高階實踐:如何利用動效來提升可用性
迪士尼動畫原則在UI動效中的應用
動效小技巧教程匯總(一)
動效小技巧教程匯總(二)
—
長按識別關注
—
好內容,同分享,大家快快點一下右下角的 在看 ,讓大家一起看吧~~~