本文將從動態(tài)的交付文件、成像原理，以及如何高效的與開發(fā)團隊溝通等角度來分析動態(tài)設計交付，旨在幫助與我們遇到類似問題的團隊提供合適的解決方案。

前言

開始閱讀之前，我想讓大家先思考兩個問題：你平時接觸的動態(tài)設計需求多嗎？碰到動態(tài)設計，你都是怎么跟開發(fā)團隊進行溝通的？帶著這兩個問題，我們開始今天的主題討論。

首先在目前的體驗設計中動態(tài)交付的方式主要包含文件式交付、參數(shù)式交付兩種。文件交付主要是指通過提供動態(tài)格式文件的方式來達到預期效果，對于開發(fā)者來說，只需要針對性的兼容動態(tài)文件的格式及庫就可以獲得該格式的顯示效果，根據(jù)不同需求還可以簡單的控制動態(tài)的播放、入場、退場等基礎操作；參數(shù)交付主要是對動態(tài)運動的文字表述，開發(fā)可以根據(jù)圖文化的表述對動態(tài)進行代碼還原。

動態(tài)設計的交付方式

就起點設計團隊來說，在長期的項目迭代中，我們幾乎測試了所有的主流動態(tài)圖片格式。因此針對不同的格式有一些測評和看法，可以跟大家交流，這些格式有 GIF、WebP、APNG、Lottie、VAP、PAG，我們將結合實際情況，對這些格式做些簡單的科普和性能比對。

1. GIF

GIF 對于互聯(lián)網(wǎng)來說是一個傳播率極高的古董級動態(tài)格式，它誕生于 1987 年，即使是最后一個版本也是在 1989 年了，在各大網(wǎng)站上瀏覽的動態(tài)廣告、以及與生活息息相關的動態(tài)表情包幾乎都是 GIF 格式。GIF 在我們使用的所有格式中是壓縮效果是最差的，還因為是采用了 8 位色壓縮，只能處理 256 種顏色，所以也是所有格式中顯示效果最差的。

即便如此，GIF 還是存在一些優(yōu)點的，它較為廣闊的傳播性讓其在各種環(huán)境下都有比較不錯的兼容性，它的使用性能也是相對穩(wěn)定的，同時兼容 AndROId、iOS、Web，并且可實現(xiàn)循環(huán)以及首尾幀控制。

在起點讀書中 GIF 的應用主要集中的 UGC 內容上，例如官方表情包、頭像掛件展示等場景均有使用過 GIF 作為主要格式。

點娘表情包

2. WebP

WebP 相對上面的 GIF 要年輕很多，它是谷歌在 2010 年發(fā)布，支持庫是在 2018 年 4 月發(fā)布，我們也是在第一時間在產(chǎn)品中試用了該格式，并獲得了不錯的體驗，截止目前，已有 95.77% 的瀏覽器支持該格式。

WebP 目前支持有損和無損壓縮以及動畫和 alpha 透明度的圖像格式（基于 VP8 視頻格式）。WebP 通常比 JPEG、PNG 和 GIF 具有更好的壓縮率，并且旨在取代它們。WebP 同時兼容 Android、iOS、Web，并且可實現(xiàn)循環(huán)以及首尾幀控制。通過千元機實機測試，WebP 也兼具了較高的穩(wěn)定性，是比較不錯的通用動態(tài)格式選擇。

為了讓用戶獲得更好的視覺感官體驗，因此在起點讀書中例如掛件、動態(tài)卡牌的格式選擇上，WebP 是絕佳的通用解決方案。

起點頭像掛件

起點動態(tài)卡牌

3. APNG

APNG 相對于 WebP 要早出生幾年，是基于 PNG 格式擴展的一種動畫格式，所以它保留了向下兼容 PNG 的特性，因此當解碼器不支持 APNG 時，會默認展示第一幀圖像；APNG 擁有 24 位圖像和 8 位透明性，相比 GIF 擁有更高的顯示效果。

目前關于 APNG、WebP、GIF 的測評對比較多，GIF 自不必多說，它早已成了各大主流動態(tài)格式測評的計量單位，我們這里只談 APNG、WebP，從壓縮率上來說，APNG 優(yōu)于 WebP；從兼容性上來說 WebP 的兼容性明顯高于 APNG，谷歌從 Chrome 59 開始才支持 APNG，而 WebP 是谷歌的親兒子，兼容性自不必說，目前安卓兼容無壓力，iOS 中部分版本存在兼容問題，但考慮到 iOS 的高版本覆蓋率，因此起點在動態(tài)格式上選擇了 WebP。

4. Lottie

Lottie 是 Airbnb 開源的一個面向 iOS、Android、RN 的動畫庫，能分析 AE 導出的動畫 json 文件，客戶端通過引入 Lottie 的支持庫來解析 json 文件，通過此方法原生 App 就可以像使用靜態(tài)素材一樣來實現(xiàn)出動畫效果。

要使用 Lottie 需要先通過 bodymovin （AE 插件）將 AE 動畫工程文件轉換為 json 格式的描述文件。Lottie 負責解析動畫的數(shù)據(jù)，包括動畫大小，動畫時長，幀率，用到的圖片，字體，圖層等等信息，最終精準地渲染出動畫。

Lottie 支持矢量（MG）動畫，并最終效果通過解析渲染完成，因此具有比較高的兼容性，并且可以在極小的文件大小下，實現(xiàn)極佳的畫質效果，同時兼容 Android、iOS、Web，是目前互聯(lián)網(wǎng)產(chǎn)品中比較通用的解決方案；并且可以通過解析文件實現(xiàn)循環(huán)、首尾幀固定、圖層顏色修改等操作。

雖然 Lottie 很強大，但因為其實時渲染的特點，因此對內存和設備性能在碰到復雜文件消耗巨大，加上其在動態(tài)效果上的支持比較局限，所以 Lottie 僅能解決一些簡單到中等的動畫問題，對于例如直播間特效、打賞類動畫來說，Lottie 則會顯得力不從心。

5. VAP

VAP（Video Animation Player）是企鵝電競開發(fā)，用于播放酷炫動畫的實現(xiàn)方案，它可以播放帶有 Alpha 通道的視頻。是一種擬 WebP、APNG 的動畫解決方案，與之相比具有壓縮率高（素材更小）、硬件解碼速度快的優(yōu)點，比 Lottie 能實現(xiàn)更復雜的動畫效果（比如粒子特效）；并且 VAP 可以將自定義的屬性合并到動畫中。

VAP 簡單點理解就是將 MP4 (H264) 文件的透明通道與原動畫一起導出，然后通過解析合成形成透明動畫的顯示效果。這種方案占用內存小，性能高，文件體積小，支持效果全，是比較理想的特性動畫解決方案。

起點卡牌

6. PAG

PAG 是騰訊自主研發(fā)的一個開源項目，它同時支持「矢量預合成」導出和「BMP 預合成」導出兩種方式。

矢量預合成導出無法支持所有的 AE 特性，但相對來說還是比 Lottie 支持的格式要多的多，在理想情況下使用矢量預合成可以獲得更好的性能和更小的動畫文件。

BMP 預合成導出模式支持所有 AE 特效，設計師只需要關注視覺效果本身即可，相應的會對設備性能產(chǎn)生一定消耗。BMP 預合成目前支持視頻序列幀和位圖序列幀兩種導出的存儲格式，它對位圖做了簡單的幀間壓縮，可比傳統(tǒng)的 PNG 序列文件小 50%。視頻存儲格式幀基于 H264 幀間壓縮并補充了透明通道（類似 VAP 的解決方案），相比位圖存儲格式只有 10% ~ 25% 左右的文件大小。

而且在目前的版本迭代中，PAG 還同時支持了「矢量預合成」和「BMP 預合成」混合導出，可以在文件導出效果、性能、體量上做到更優(yōu)秀的表現(xiàn)。不過雖然 PAG 在效果和壓縮上表現(xiàn)優(yōu)越，但是在遇到大型動畫或復雜特效后對設備性能的壓力還是巨大的，而且目前僅支持 iOS、Android，Web 支持正在開發(fā)中。此時 VAP 可以作為 PAG 的平替。

起點票賞

目前在起點讀書內的各類打賞投票場景，為了更好的展示效果，動效格式都會優(yōu)先考慮 PAG。

動態(tài)文件成像原理

1. 透明通道序列幀

簡單來說就是 PNG 序列，但是也有比較高級的表現(xiàn)方法，就是通過幀間壓縮來進行圖片壓縮，可以做到比普通的 PNG 整列更小的體積。

2. 視頻+透明通道

上面也提到了，是將 mp4 視頻與相應的 alpha 通道視頻疊加后，就可以將原視頻表現(xiàn)得帶有透明效果。

3. 矢量動畫

形成動畫的物體、動作及時間都是通過代碼來完成，也因為是純代碼動畫，因此可以做到體量極小，性能也是極佳的。

4. 圖片「渲染」動畫

指通過 json 格式的描述文件，將指定圖片賦予運動、時長、動作，最終通過解析渲染出描述中的動畫效果的形式。

5. 視頻幀混合矢量

指將「視頻+透明通道」與「矢量動畫」混合導出的動畫表現(xiàn)形式，既保證了視頻的全特效效果，又保留了矢量動畫的最佳顯示效果，并且沒有增加動畫文件體積。

通過上面的一系列介紹，可以了解到我們在做動態(tài)文件交付時，需要綜合考慮的因素就較多了，例如不同平臺的特性、低版本兼容問題、動態(tài)庫的適配性等。

格式的選擇不是一成不變了，為了讓用戶可以獲得更好的互動體驗，可以針對性地對不同端的動態(tài)格式進行變換。

起點在漫長的迭代周期中，在不同版本時期引入過不同的動態(tài)文件格式，綜合各項性能，目前選用了 PAG 作為我們的客戶端主要使用格式，并且在 PAG 的開發(fā)過程中，我們也始終與其研發(fā)團隊保持一定的溝通，幫助我們解決了不少技術難題，就目前來說 PAG 依然是強有力的動態(tài)交付解決方案。

關于參數(shù)交付

參數(shù)交付的核心在于溝通，而如何正確有效的與開發(fā)人員進行溝通就顯得至關重要，我們通過下圖可以看到一個典型案例。

正確的闡述動態(tài)設計的關鍵信息才是有效交流，才能讓開發(fā)更精準的還原你所要的效果。但現(xiàn)實往往是我們會碰到大量復雜動畫，此時用語言來描述動畫會顯得特別疲軟復雜，而如何將這些復雜語言進行圖形化的傳達，讓表達更清晰，就顯得至關重要。因此我們綜合日常的一些工作經(jīng)驗，建立了圖形分段式動態(tài)標注法，讓動態(tài)一目了然。

動態(tài)標注的本質就是將時間（時間節(jié)點）、地點（位置）、人物（物品）、通過「動作」進行呈現(xiàn)就是標注的基本結構了，當然也可以通過此方法來衍生出一些特需標注法。例如在一個復雜的動態(tài)設計需求中，涉及到的動畫較多，有位移軟轉場動畫、手勢操作響應、操作反饋動畫、隨機動畫等。

為了讓開發(fā)實現(xiàn)的效果達到設計預期，使用了圖形化標注法，將時間軸、動作、曲線、運動軌跡等進行呈現(xiàn)。關于標注的詳情信息，就不再進行詳細文字描述了，感興趣的可以通過大圖進行詳細了解。

看到這里我想有些朋友會產(chǎn)生一些疑惑，為什么都 2022 年了，你還在做動態(tài)標注？目前行業(yè)中不是有很多動態(tài)輸出的解決方案嗎？Principle、ProtoPie、Origami、Cocos Creator 等等，這些不乏比較高效的解決方案，同時筆者也在設計中或多或少的使用過相關的軟件來作為高效解決方案，但如果你想系統(tǒng)性的學習動態(tài)圖形和動畫設計那么 After Effects 是首選，強大的功能，能盡情實現(xiàn)你的動畫創(chuàng)意。

至于筆者會傾向為動態(tài)設計輸出標注，有幾點我覺得至關重要，一是強化在設計過程中對動態(tài)理論的掌握；二是對動態(tài)設計進行整理歸檔，方便為全局動態(tài)做統(tǒng)一形成規(guī)范；三是在開發(fā)過程中可以精準定位問題，并提高還原率，實際項目證明，有標注的動態(tài)還原在第一次交付走查時可達到 60%~80%的還原率。

結語

遇到動態(tài)設計需求時，在符合條件（例如實時反饋、聚焦動畫、轉場動畫等）的情況下參數(shù)交付是最優(yōu)的；而有些場景（例如重視覺效果呈現(xiàn)、復雜交互動畫、動態(tài)展示等）優(yōu)先使用文件交付。

建議的解決方案排序是 PAG＞VAP＞Lottie＞W(wǎng)ebP/APNG…，例如在 iOS 平臺，所有的 PAG 文件播放都有比較不錯的體驗，因此我們更建議使用 PAG 交付，而在 Android 端 WebP 的穩(wěn)定性更好，因此在 Android 更建議使用 WebP，當然在 Web 端依然可以使用 Lottie、WebP 作為平替。

無論多簡單的動態(tài)在需要開發(fā)實現(xiàn)時候，都建議進行標注落地，有效的標注可以減少不必要的溝通以及非必要的后期走查反復。

關于制作工具，筆者無特殊偏好，常規(guī)的動態(tài)設計軟件都會去接觸，如果需要給到一些建議的有條件或想系統(tǒng)性學習動態(tài)的可以優(yōu)先學習 AE，在 B 站上有很多教程，上手需要一點難度，但一勞永逸；如果只想學習并使用 UI 交互類動態(tài)，那么 Principle、ProtoPie 是不二選擇，甚至 Figma 本身也是不錯的解決方案；如果成為全棧設計師是你的夢想，那么 Origami 或許可以為你打開一扇門；如果你想在特效及 3D 動畫上有所建樹，那么我優(yōu)先推薦 Blender 作為你的主力工具。

最后送大家一首勸學（內卷）詩：三更燈火五更雞，正是男兒讀書時，黑發(fā)不知勤學早，白首方悔讀書遲。

參考資料

• 關于 WebP 格式： https://developers.google.com/speed/webp
• WebP 引文： https://caniuse.com/webp
• APNG 制作： https://ezgif.com/apng-maker
• APNG 引用： https://juejin.cn/post/6857678436304388104
• APNG 對比鏈接： http://littlesvr.ca/apng/gif_apng_webp3.Html
• Lottie 參考： https://cloud.tencent.com/developer/article/1005896
• VAP 地址： https://github.com/Tencent/vap/blob/master/Introduction.md
• PAG 相關閱讀推薦：https://mp.weixin.qq.com/s/a8-yOp8h5LiFGKSdLE_toA
• PAG 官網(wǎng)： https://pag.io/docs/pag-export.html

閱文體驗設計YUX