導(dǎo)語(yǔ)

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

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

關(guān)鍵詞

• 圖片格式動(dòng)畫
• 跨平臺(tái)解決方案

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

1. 視覺設(shè)計(jì)的轉(zhuǎn)變

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

△ Facebook All White改版

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

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

2. 起點(diǎn)讀書中的動(dòng)效

起點(diǎn)讀書 7.0 之后，我們更加關(guān)注內(nèi)容層面的設(shè)計(jì)，使用動(dòng)畫輔佐視覺、傳遞情感。從動(dòng)畫設(shè)計(jì)到落地，如何在緊張短暫的開發(fā)周期內(nèi)上線一直是一個(gè)考驗(yàn)，對(duì)此，我們?cè)鴩L試過(guò)很多方案，走過(guò)不少?gòu)澛贰?/p>

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

圖片格式動(dòng)畫

1. PNG

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

起點(diǎn)讀書早期使用過(guò)序列幀：

△?起點(diǎn)讀書打賞

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

APNG 是從 PNG 基礎(chǔ)上拓展出來(lái)的，是一個(gè)支持24 位色彩通道和 8 位透明通道的動(dòng)畫格式，對(duì)透明通道的支持非常優(yōu)秀。

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

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

2. GIF

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

△ GIF vs. PNG

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

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

3. WebP

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

△?動(dòng)畫一：WebP vs. GIF

△?動(dòng)畫二：WebP vs. GIF

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

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

綜上，WebP 算是一種更完美的 “GIF” 。如果對(duì)文件體積不敏感，且沒有更好的動(dòng)畫解決方案時(shí)，使用 WebP 是個(gè)不錯(cuò)的選擇。

除了 WebP，還有一種 WebM ，多見于游戲類網(wǎng)站，比如《爐石傳說(shuō)》的 Landing Page https://hs.blizzard.cn/landing ，WebM 僅支持Web，原生不支持。

WebP 導(dǎo)出工具：

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

WebM 導(dǎo)出工具：https://www.fnordware.com/WebM/ WebP

4. 小結(jié)

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

跨平臺(tái)解決方案

1. Lottie

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

為 UI 而生

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

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

Lottie 發(fā)布之后處于持續(xù)更新，從 Github 上主干合并頻率來(lái)看，大概每周一次，從新版本發(fā)布頻率來(lái)看，每月一個(gè) bug fix，隔月發(fā)布一個(gè)新版本，任何 issue 都可以很快響應(yīng)和解決。

支持部分圖片動(dòng)畫

Lottie 早期的版本是不支持圖片類動(dòng)畫的，導(dǎo)出 json 之后會(huì)自動(dòng)生成一個(gè) img 的資源文件夾，播放 .json 文件時(shí)，需要解壓資源壓縮包到本地目錄才能正常播放。從 bodymovin V 5.1.15 之后，Lottie 將圖片轉(zhuǎn)為 base 64 編碼，使用字符代替圖像地址，并封裝在 json 里，直接播放一個(gè) .json 文件，不用再拖著一個(gè)資源文件夾了。

△?Bodymovin 5.5.9 資源文件的設(shè)置面板

Lottie 當(dāng)前對(duì)圖片類動(dòng)畫的支持依然會(huì)有一些小問題，有時(shí)候需要仔細(xì)排查出問題的圖層，并對(duì)照官方文檔 https://airbnb.io/lottie/#/supported-features，靈活調(diào)整動(dòng)畫替代方案。如果你對(duì) Lottie 開發(fā)感興趣，這里有一段 Lottie 安卓開發(fā)工程師 Gabriel Peal 的訪談: https://fragmentedpodcast.com/episodes/82/

2. PAG

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

為 AE 而生

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

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

△ 起點(diǎn)讀書榮譽(yù)徽章 PAG 文件對(duì)比

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

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

△ 起點(diǎn)讀書作品徽章 PAG vs. WebP

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

PAG vs. Lottie

PAG 除了對(duì)特效類動(dòng)畫的支持可圈可點(diǎn)，對(duì)矢量動(dòng)畫的支持也是非常優(yōu)秀，甚至強(qiáng)于 Lottie。以一個(gè)生長(zhǎng)動(dòng)畫為例，Lottie 文件 14k，而 PAG 文件只有1k。

△ 起點(diǎn)讀書投月票提醒

另外，PAG 的開發(fā)者還提供工具方便設(shè)計(jì)師調(diào)整和預(yù)覽動(dòng)畫參數(shù)，不懂 AE 的開發(fā)不是好測(cè)試：）

△?強(qiáng)大的桌面預(yù)覽工具 PAGViewer

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

3. SVGA

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

為改善 Lottie 為生

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

SVGA & PAG

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

△?起點(diǎn)讀書角色送禮 PAG vs. SVGA（by 亞寧）

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

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

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

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

小結(jié)

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

結(jié)語(yǔ)

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

附錄

• 維基百科，APNG https://en.wikipedia.org/wiki/APNG
• 凹凸實(shí)驗(yàn)室，《探究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 這次更新你應(yīng)該了解一下》https://zhuanlan.zhihu.com/p/37385550
• DreamPiggy，《客戶端上動(dòng)態(tài)圖格式對(duì)比和解決方案》https://zhuanlan.zhihu.com/p/25598828
• Japho ，《優(yōu)雅的動(dòng)畫實(shí)現(xiàn)方案SVGA、Lottie》 https://www.jianshu.com/p/60d28d7bab48
• Jfson，《Android 動(dòng)畫庫(kù)對(duì)比（ Lottie 和 SVGA ）》https://jfson.github.io/2018/01/08/41-anim/
• SVGA，http://svga.io/

歡迎關(guān)注作者的微信公眾號(hào)：「閱文體驗(yàn)設(shè)計(jì)YUX」