用起點讀書的實戰(zhàn)案例，教你從AE制作到落地開發(fā)的方案

導語

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

遺憾的是，從 AE 制作到落地開發(fā)，至今也沒有一種完備且成熟的跨平臺解決方案。本文將起點讀書中使用過的從 AE 到落地經(jīng)驗梳理成文，對比分析不同方案的差異和優(yōu)劣，辨析其還原程度和性能表現(xiàn)，希望給同行設計師一些參考和借鑒。

關鍵詞

• 圖片格式動畫
• 跨平臺解決方案

行業(yè)與現(xiàn)狀

1. 視覺設計的轉變

從 Facebook 2019上半年的 All White 的改版來看，傳統(tǒng)意義上視覺范疇的 色彩、圖形、質感被最大程度的簡化和提煉：

△ Facebook All White改版

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

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

2. 起點讀書中的動效

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

撥開烏云見天日，守得云開見月明。我們將之前的經(jīng)驗梳理出來，予人玫瑰的同時，也是一次自我復盤。

圖片格式動畫

1. PNG

PNG 序列幀動畫是一種比較原始的動畫類型，通過連續(xù)切換一組分解的動畫序列形成動畫。后來為提高性能，發(fā)展出雪碧圖（精靈圖），將所有幀動畫合并在一張大圖上，通過位移實現(xiàn)動畫幀切換。

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

△?起點讀書打賞

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

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

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

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

2. GIF

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

△ GIF vs. PNG

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

對于比較簡單的動畫，如果只有2個選擇，在沒有透明通道的情況下，選擇 GIF 好于 PNG 。但是，從開發(fā)角度看，一些復雜的 GIF 有時會引起周期性的重繪，占用較多的系統(tǒng)內存，有一定性能風險。

3. WebP

WebP 是 Google 開發(fā)的一款用于改善 GIF 的新動圖格式，支持 24bit 彩色，能夠呈現(xiàn)透明通道，兼容性較好，在項目中用的比較多。

△?動畫一：WebP vs. GIF

△?動畫二：WebP vs. GIF

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

• 文件體積上，WebP 似乎沒有明顯的優(yōu)勢，對比以上兩組動畫，很難講 WebP 一定更好。
• 效果呈現(xiàn)上，WebP 支持了真正的 alpha 通道（8bit），而 GIF 只有 1bit，所以 WebP 的細節(jié)一定更好。
• 兼容性上，WebP 雖不如 GIF， 但也算支持良好，不影響使用。

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

除了 WebP，還有一種 WebM ，多見于游戲類網(wǎng)站，比如《爐石傳說》的 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

4. 小結

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

跨平臺解決方案

1. Lottie

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

為 UI 而生

Lottie 最早是為了解決矢量圖形類動畫的問題。從官方社區(qū)來看，我們能容易發(fā)現(xiàn) Lottie 的矢量基因，社區(qū)作品大多是圖形類動畫。

△ Lottie 社區(qū)設計師 高岡 圭太 作品

Lottie 發(fā)布之后處于持續(xù)更新，從 Github 上主干合并頻率來看，大概每周一次，從新版本發(fā)布頻率來看，每月一個 bug fix，隔月發(fā)布一個新版本，任何 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 開發(fā)感興趣，這里有一段 Lottie 安卓開發(fā)工程師 Gabriel Peal 的訪談: https://fragmentedpodcast.com/episodes/82/

2. PAG

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

為 AE 而生

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

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

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

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

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

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

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

PAG vs. Lottie

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

△ 起點讀書投月票提醒

另外，PAG 的開發(fā)者還提供工具方便設計師調整和預覽動畫參數(shù)，不懂 AE 的開發(fā)不是好測試：）

△?強大的桌面預覽工具 PAGViewer

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

3. SVGA

SVGA 是 YY 直播的開發(fā)工程師 2017 年發(fā)布的一套跨平臺動畫解決方案。SVGA 不支持復雜矢量圖形動畫，對位圖動畫的支持超過 Lottie。

為改善 Lottie 為生

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

SVGA & PAG

SVGA 對基礎類動畫的支持非常優(yōu)秀，但是筆者發(fā)現(xiàn) SVGA 不支持特效類動畫。

△?起點讀書角色送禮 PAG vs. SVGA（by 亞寧）

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

另外，SVGA 支持動態(tài)插入圖片，例如下面左圖中的用戶頭像就是動態(tài)插入的，在一些直播類、游戲類產(chǎn)品中比較常見。

△?SVGA 和 PAG 對于動態(tài)編輯方面的支持演示

后來，PAG 的開發(fā)者受此啟發(fā)，借鑒并優(yōu)化了這種動態(tài)編輯的功能，在保留動畫效果前提下，不僅可以替換圖片內容，還可以動態(tài)修改文本內容以及字體大小，比 SVGA 更為豐富。

小結

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

結語

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

附錄

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

歡迎關注作者的微信公眾號：「閱文體驗設計YUX」