動畫落地| 從AE 製作到落地開發

動畫落地| 從AE 製作到落地開發

動畫落地| 從AE 製作到落地開發,教程,閱文體驗設計YUX,原創文章站酷網,中國設計師互動平台。

undefined

導語


動畫可以輔助視覺製作焦點,引導注意力的方向,越來越為廣大視覺設計師青睞。從設計工具上來看,既有Framer.js、Origami, 也有交互原型類Principle、Flinto,還有Figma 自帶動畫演示功能的工具,但是對於一些視覺特效、非邏輯表達類動畫,設計師通常會藉助AE 完成。

 

遺憾的是,從AE 製作到落地開發,至今也沒有一種完備且成熟的跨平台解決方案。本文將起點讀書中使用過的從AE 到X 的落地經驗梳理成文,對比分析不同方案的差異和優劣,辨析其還原程度和性能表現,希望給同行設計師一些參考和借鑒。

關鍵詞


· 圖片格式動畫

· 跨平台解決方案

一、行業與現狀


1.1視覺設計的轉變


從Facebook 2019上半年的All White 的改版來看,傳統意義上視覺範疇的色彩、圖形、質感被最大程度的簡化和提煉:

Facebook All White改版

在All White 的表象之下,設計師解決的問題不再是如何將頁面繪製的更加漂亮,而是著眼於信息本身,思考的是如何通過我們的專業性幫助產品更好的傳達內容。

 

視覺設計從來不只是解決美醜,它是關於秩序的設計,解決的是如何提煉重點、革除冗餘、合理的引導用戶的注意力方面的問題。從擬物到扁平到All White ,透過現像看本質,視覺在產品設計中的裝飾感被逐漸減弱,轉向以內容為中心,我們參與和見證著這場轉變。

1.2起點讀書中的動效


起點讀書7.0 之後,我們更加關注內容層面的設計,使用動畫輔佐視覺、傳遞情感。從動畫設計到落地,如何在緊張短暫的開發週期內上線一直是一個考驗,對此,我們曾嘗試過很多方案,走過不少彎路。

 

撥開烏雲見天日,守得云開見月明。我們將之前的經驗梳理出來,予人玫瑰的同時,也是一次自我複盤。

二、圖片格式動畫


2.1 PNG


PNG 序列幀動畫是一種比較原始的動畫類型,通過連續切換一組分解的動畫序列形成動畫。後來為提高性能,發展出雪碧圖(精靈圖),將所有幀動畫合併在一張大圖上,通過位移實現動畫幀切換。

 

起點讀書早期使用過序列幀:

起點讀書打賞

PNG 雖然實現方式較為原始,但確是一種最為穩妥的解決方案,除了圖片體積太大,沒有別的缺點,想必大部分項目中都使用過,這裡不多加贅述。

 

APNG 是從PNG 基礎上拓展出來的,是一個支持24 位色彩通道和8 位透明通道的動畫格式,對透明通道的支持非常優秀。

DEMO: https://tinypng.com/images/apng/panda-waving-2x.png

 

美中不足的是,IE 瀏覽器不支持APNG,原生尚可,一般項目中用的很少,期待APNG 未來兼容性能有所改善。


2.2 GIF


GIF 是除PNG 之外另外一種比較傳統的動畫格式,僅支持8bit 彩色,不支持半透明通道,出現的年代久遠,壓縮技術比較差,動畫邊界有明顯的雜邊,一般用在對動畫精度要求不高的地方。

GIF vs. PNG

我們比較一下上面PNG 序列幀轉為GIF 之後的表現。從文件體積上看,GIF 比PNG 序列小了76% 。但是,從動畫細節上看,GIF 的邊界粗糙有鋸齒,且無法消除。

 

對於比較簡單的動畫,如果只有2個選擇,在沒有透明通道的情況下,選擇GIF 好於PNG 。但是,從開發角度看,一些複雜的GIF 有時會引起週期性的重繪,佔用較多的系統內存,有一定性能風險。

2.3 WebP


WebP 是Google 開發的一款用於改善GIF 的新動圖格式,支持24bit 彩色,能夠呈現透明通道,兼容性較好,在項目中用的比較多。

動畫一:WebP vs. GIF

動畫二:WebP vs. GIF

我們比較一下WebP 和GIF 的差異到底在哪裡:

 

·文件體積上,WebP似乎沒有明顯的優勢,對比以上兩組動畫,很難講WebP一定更好。

·效果呈現上,WebP支持了真正的alpha通道(8bit),而GIF只有1bit,所以WebP的細節一定更好。

·兼容性上,WebP雖不如GIF,但也算支持良好,不影響使用。

綜上,WebP 算是一種更完美的“GIF” 。如果對文件體積不敏感,且沒有更好的動畫解決方案時,使用WebP 是個不錯的選擇。

 

除了WebP,還有一種WebM ,多見於遊戲類網站,比如《爐石傳說》的Landing Page https://hs.blizzard.cn/landing ,WebM 僅支持Web,原生不支持。

WebP 導出工具:

https://github.com/bigxixi/webp_apng_exporter_for_AE (文件可以在瀏覽器預覽)

WebM 導出工具:https://www.fnordware.com/WebM/ WebP

2.4小結


通過以上對比分析,圖片格式動畫的體積都比較大。綜合的還原效果、兼容性和性能,WebP 最佳,GIF 幾乎和質量無緣,PNG 過於原始。

三、跨平台解決方案


3.1 Lottie

Lottie 庫和插件是Airbnb 於2017年前後發布的一款跨平台的動畫解決方案,設計師通過bodymovin 從AE 中將動畫導出json 文件,開發只需將將其導入資源文件夾直接引用即可。

·為UI而生

Lottie 最早是為了解決矢量圖形類動畫的問題。從官方社區來看,我們能容易發現Lottie 的矢量基因,社區作品大多是圖形類動畫。

Lottie 社區設計師高岡圭太作品

Lottie 發布之後處於持續更新,從Github 上主幹合併頻率來看,大概每週一次,從新版本發布頻率來看,每月一個bug fix,隔月發布一個新版本,任何issue 都可以很快響應和解決。

·支持部分圖片動畫

Lottie 早期的版本是不支持圖片類動畫的,導出json 之後會自動生成一個img 的資源文件夾,播放.json 文件時,需要解壓資源壓縮包到本地目錄才能正常播放。從bodymovin V 5.1.15 之後,Lottie 將圖片轉為base 64 編碼,使用字符代替圖像地址,並封裝在json 裡,直接播放一個.json 文件,不用再拖著一個資源文件夾了。

Bodymovin 5.5.9 資源文件的設置面板

Lottie 當前對圖片類動畫的支持依然會有一些小問題,有時候需要仔細排查出問題的圖層,並對照官方文檔https://airbnb.io/lottie/#/supported-features,靈活調整動畫替代方案。如果你對Lottie 開發感興趣,這裡有一段Lottie 安卓開發工程師Gabriel Peal 的訪談: https://fragmentedpodcast.com/episodes/82/


3.2 PAG


PAG https://pag.im/ 是騰訊開發者推出的一款面向原生開發的動畫解決方案,為設計師提供AE 導出插件和桌面預覽工具,支持AE 一切特效。 Lottie 當前對圖片類動畫的支持依然會有一些小問題,有時候需要仔細排查出問題的圖層,並對照官方文檔https://airbnb.io/lottie/#/supported-features,靈活調整動畫替代方案。如果你對Lottie 開發感興趣,這裡有一段Lottie 安卓開發工程師Gabriel Peal 的訪談: https://fragmentedpodcast.com/episodes/82/

·為AE而生

PAG 將動畫渲染成圖片序列幀,無論是表達式、粒子動畫還是3D插件,只要AE 做的出,PAG 都支持。另外,PAG 還完美支持透明通道,動畫體積非常小。

起點讀書今年上半年接入了PAG 的SDK,最早用於作品榮譽徽章的展示:

起點讀書榮譽徽章PAG 文件對比

對於位圖動畫,PAG 有2種導出形式:視頻序列幀和位圖序列幀,視頻序列幀小於位圖序列幀,以上圖為例,視頻序列幀83k,位圖序列幀234k,前者比後者小64%。

在使用場景上,視頻序列幀適用於展示型、模態型頁面,位圖序列幀適用於對實時渲染要求較高的Feeds 型頁面,如果用作列表動畫,可能會出現卡頓。

起點讀書作品徽章PAG vs. WebP

我們再比較下PAG 和WebP,首先,二者用肉眼幾乎看不出顯示方面的差異,但是從體積上看,PAG 僅為WebP 的十分之一,具有碾壓優勢。

 

· PAG vs. Lottie

PAG 除了對特效類動畫的支持可圈可點,對矢量動畫的支持也是非常優秀,甚至強於Lottie。以一個生長動畫為例,Lottie 文件14k,而PAG 文件只有1k。

起點讀書投月票提醒

另外,PAG 的開發者還提供工具方便設計師調整和預覽動畫參數,不懂AE 的開發不是好測試:)

強大的桌面預覽工具PAGViewer

PAG 出現的比較晚,目前僅限MAC 電腦從AE 導出,系統只兼容到Android 4.4 以上,低版本需要有兜底方案。另外,PAG 對Web 的開發還未完成, 當前也沒有正式開源,目前優先騰訊系業務接入,預計明年將正式對外開源。


3.3 SVGA


SVGA 是YY 直播的開發工程師2017 年發布的一套跨平台動畫解決方案。 SVGA 不支持複雜矢量圖形動畫,對位圖動畫的支持超過Lottie。

·為改善Lottie為生

SVGA 最初的目標是彌補和改善Lottie 。筆者通過反複測試發現,SVGA 記錄的是動畫元素在時間軸上每幀的表現,支持的動畫類型比Lottie 更多, 幾乎支持一切AE 基礎類動畫。但是更新頻率比較慢,今年只發布了3-4個版本。

· SVGA & PAG

SVGA 對基礎類動畫的支持非常優秀,但是筆者發現SVGA 不支持特效類動畫。

起點讀書角色送禮PAG vs. SVGA(by 亞寧)

以上圖為例,SVGA 僅保留了基礎的縮放動畫,卻丟失了光效和粒子效果。

 

另外,SVGA 支持動態插入圖片,例如下面左圖中的用戶頭像就是動態插入的,在一些直播類、遊戲類產品中比較常見。

SVGA 和PAG 對於動態編輯方面的支持演示

後來,PAG 的開發者受此啟發,借鑒並優化了這種動態編輯的功能,在保留動畫效果前提下,不僅可以替換圖片內容,還可以動態修改文本內容以及字體大小,比SVGA 更為豐富。

3.4小結


通過以上比較分析,如果只接入一套動畫庫,那麼可以考慮PAG ,PAG 在原生上的表現甚至可以取代Lottie 和WebP,但是,在libpag for Web 開發完成之前,需要藉助其他方案協同;非騰訊系產品可以期待明年PAG 開源,當前可用WebP、Lottie 和SVGA 代替。

四、結語


以上是起點讀書一年來在動畫落地方案的一點經驗,希望對大家有所幫助。從以視覺表現為中心,到以傳達內容為中心,我們也在探索、嘗試和改變,動畫設計只是解決問題的一小步,未來起點讀書還會持續為提升用戶體驗而努力,希望給用戶帶來更多的驚喜,更好的閱讀體驗。

——————————————————————————————————————————————————

附錄

1. 維基百科,APNG https://en.wikipedia.org/wiki/APNG
2. 凹凸實驗室,《探究WebP一些事兒》https://aotu.io/notes/2016/06/23/explore-something-of-webp/index.html
3. bigxixi ,《BX-WebpApngExporter》 https://github.com/bigxixi/webp_apng_exporter_for_AE
4. Lottie官方Medium博客, Introducing Lottie https://medium.com/airbnb-engineering/introducing-lottie-4ff4a0afac0e
5. Fragmented Podcast,Lottie Android 開發者Gabriel Peal https://fragmentedpodcast.com/episodes/82/
6. 西西,《Lottie 這次更新你應該了解一下》https://zhuanlan.zhihu.com/p/37385550
DreamPiggy,《客戶端上動態圖格式對比和解決方案》https://zhuanlan.zhihu.com/p/25598828
7. Japho ,《優雅的動畫實現方案SVGA、Lottie》 https://www.jianshu.com/p/60d28d7bab48
8. Jfson,《Android 動畫庫對比( Lottie 和SVGA )》https://jfson.github.io/2018/01/08/41-anim/

9. SVGA,http://svga.io/

本文作者:徐萌萌

轉載請向閱文體驗設計微信公眾號( id: YUX_design ) 獲取授權,並註明作者、出處和鏈接。

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。