動效老司機分享直播禮物 SVGA 動畫避坑指南

2021-02-10 墨染動效


作者:鹹魚閒餘_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動效中的應用

動效小技巧教程匯總(一)

動效小技巧教程匯總(二)

長按識別關注

好內容,同分享,大家快快點一下右下角的 在看 ,讓大家一起看吧~~~

相關焦點

  • 直播App中Android酷炫禮物動畫實現方案(下篇):SVGA由來與Lottie的對比
    第二天,小B把Pony捉到了會議室,說道:『給你個死任務,把UED設計出來的動畫,實現到《ME直播》中,不然就拿你去祭天』。Pony差點當場就尿了……先給你看看,UED的動畫是醬紫的。這個動畫,如果輸出成GIF的話,要3MB,尺寸是750*750。在上一篇文章中已經介紹過幾種被否掉的方法,這裡再稍作補充說明,如果使用GIF實現,有以下問題。
  • 新版MATERIAL DESIGN 官方動效指南
    Google 剛發布了新版Material Design 官方動效指南,"平行煎餅"就給大家帶來了中文版!
  • 你必知的視頻號直播避坑指南!
    這兩天,不少同行在碟盛開俱樂部的社群聊到視頻號直播的審核變嚴了,不少人在實踐過程中踩坑被罰:
  • 直播App中Android酷炫禮物動畫實現方案(上篇)
    在當下移動直播火爆的年代,如果你曾經使用過移動端直播應用,相信會被裡面那令人驚嘆的禮物動畫效果迷住,比如像下面這樣的效果。
  • 動效教程 | AE製作超級炫酷的切割動畫
    👆 點擊「藍色字體」,關注墨染動效~作者站酷ID | 叫我老Diu就好啦 · 本文由作者授權發布作者主頁
  • 動效教程 | AE內置效果製作寶石海星動畫
    👆 點擊「藍色字體」,關注墨染動效~作者站酷ID | 叫我老Diu
  • QQ空間做直播了!微信直播還遠嗎?
    ,在互動模式、界面設計、動效(畫)樣式、禮物質感、產品推廣都做了精緻的打磨,通過系統化的設計,為用戶打造一個完善的直播體系。空間也做直播了!沒錯,在當今直播的熱潮下,國內外的直播產品大都是基於陌生人的關係鏈,且內容結構與視覺效果同質化嚴重。如何讓用戶更好的分享生活?如何為用戶提供差異化的內容消費?如何給用戶更多新鮮趣味的互動玩法?
  • Lottie 入門指南
    文件超小Lottie與 GIF 和 PNG 序列相比,體積縮小 600%,傳輸速度提高 10 倍,Lottie 很小,而且不會像素化(如果只使用矢量素材)。攜程智能YOYO是最近攜程火車票做的一個智能吉祥物出現的動畫,大部分元素均使用位圖,包括科技感的眼鏡,與馬賽克的流光等,就算使用位圖,整體大小也才100KB3.對研發的優勢
  • 海外買房避坑指南之三:找中介還是找開發商?(上篇)
    海外買房避坑指南之三:找中介還是找開發商?15:31 來源:海房避雷針泰勒 原標題:海外買房避坑指南之三
  • 騰訊課堂 H5 直播間點讚動效實現
    前言以前在看微信視頻號直播的時候,經常點擊右下角的點讚按鈕。看著它的數字慢慢從一位數變成五位數,還是挺有氛圍感的。特別是長按的時候,有個手機震動的反饋,很帶感。雖然之前很好奇這些飄動的點讚動效是怎麼實現的,但沒有特別去鑽研。直到前陣子投入騰訊課堂 H5 直播間的需求,需要自己去實現一個這樣的效果時,才開始摸索。
  • 狗仔直播老司機:到處是性感的直播APP
    狗仔直播老司機:到處是性感的直播APP 編輯:廠商提供2016-12-21   霧霾越來越嚴重,但是擋不住老司機看美女的心,作為一個老司機,小編要隆重的介紹
  • AE教程:波浪&操縱點動效
    今天分享的文章來自於UI中國會員-UILEO的AE教程:波浪&操縱點動效。
  • 老司機看片神器,絕對的老司機哦!
    我又來了給大家送福利了,今天來給大家分享一個老司機看片軟體,真正的老司機看片渠道,內置你懂得,歡迎來拿!!!       南瓜直播:一個支持央視、衛視、港澳臺和電影輪播的電視直播工具,但軟體內含「福利頻道」,輸入密碼後就能解鎖海量「深夜成人視頻資源」,尺度有點大,建議沒人的時候偷偷看哦!
  • 狗仔直播老司機:那些性感撩人直播動作
    狗仔直播老司機:那些性感撩人直播動作 編輯:廠商提供2016-12-19    年末了,帶來一波狗仔直播APP老司機福利,一起盤點一下那些性感美女們
  • 《喵星大作戰》:從零開始的老司機進階指南
    為了幫助喵司機們突破小宇宙領悟第七感,Bilibili車隊的「澤野螳螂」、「中國BOY」、「花少北」和「小當家」老師特別為大家帶來了詳盡且「不收課時費」的老司機進階Rap說唱,想提升實力的喵友們,速來圍觀吧!
  • 這裡有一份2020最新直播暖場話術指南,請收好!
    我整理了一些抖音、快手常用的直播暖場話術指南,現在分享給不知道怎麼直播開場的小夥伴們!一、直播歡迎話術1、歡迎大家來到我的直播間,我是一名新手主播,請支持我20分鐘,停留20分鐘送300個親密值!3、歡迎 XX 來到我的直播間,他們都是因為我的歌聲/舞姿/幽默感留下來的,你也是嗎?4、剛進來的小夥伴,可以等一下後面的朋友,沒有點關注的,給主播點點關注5、歡迎新來的朋友不要著急馬上走,人間自有真情在,點點紅心都是愛,天若有情6天亦老,來波關注好不好。
  • 母嬰店加盟避坑指南
    當今市場母嬰店加盟品牌遍地生花,那創業者們要怎樣在眾多的加盟品牌當中避坑避雷最終成功創業呢?今天我列幾個大家可能會遇到的情況,希望能對大家有幫助。今天列舉的大概就是這些,之後想到了還會繼續與大家分享的。祝願大家都能創業成功!
  • 老司機福利 腿玩年女主播 誰是第一
    作為一名老司機,對其他四樣,都感覺普普通通,只有美腿才是最吸引人的。那麼,誰才是主播裡面第一美腿。羽杉最近很火的一位妹子,典型的老司機喜歡的身材,特別是一雙大長腿,配上高跟鞋,簡直性感的不要不要的,更重要的是,羽杉妹子的臉龐非常清純,屬於老司機都喜歡的類型。
  • 疑似滴滴司機直播性侵女乘客,地下色情直播平臺有多瘋狂?
    滴滴司機直播性侵乘客? 最初的爆料來自一位名叫@ 巧克力翠翠殺的微博網友,他表示,6月10日凌晨,一名疑似河南鄭州的網約車司機自稱在搭載女性乘客時藉助藥物對其進行迷奸,並在某直播平臺上進行直播。爆料者「besafe2020june」稱,男子在侵害結束後,於凌晨2時21分關閉了直播。 很快這件事在網絡上發酵,引發網友討論。滴滴出行在其官方微博回應稱,已注意到「司機性侵直播」一事,目前已經報警,正在緊急核實當中。
  • 老司機福利:狗仔直播上最大膽的女主播
    首頁 > 傳媒 > 關鍵詞 > 狗仔最新資訊 > 正文 老司機福利:狗仔直播上最大膽的女主播