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

前言

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

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

動(dòng)態(tài)設(shè)計(jì)的交付方式

就起點(diǎn)設(shè)計(jì)團(tuán)隊(duì)來(lái)說(shuō)，在長(zhǎng)期的項(xiàng)目迭代中，我們幾乎測(cè)試了所有的主流動(dòng)態(tài)圖片格式。因此針對(duì)不同的格式有一些測(cè)評(píng)和看法，可以跟大家交流，這些格式有 GIF、WebP、APNG、Lottie、VAP、PAG，我們將結(jié)合實(shí)際情況，對(duì)這些格式做些簡(jiǎn)單的科普和性能比對(duì)。

1. GIF

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

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

在起點(diǎn)讀書中 GIF 的應(yīng)用主要集中的 UGC 內(nèi)容上，例如官方表情包、頭像掛件展示等場(chǎng)景均有使用過(guò) GIF 作為主要格式。

點(diǎn)娘表情包

2. WebP

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

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

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

起點(diǎn)頭像掛件

起點(diǎn)動(dòng)態(tài)卡牌

3. APNG

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

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

4. Lottie

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

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

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

雖然 Lottie 很強(qiáng)大，但因?yàn)槠鋵?shí)時(shí)渲染的特點(diǎn)，因此對(duì)內(nèi)存和設(shè)備性能在碰到復(fù)雜文件消耗巨大，加上其在動(dòng)態(tài)效果上的支持比較局限，所以 Lottie 僅能解決一些簡(jiǎn)單到中等的動(dòng)畫問(wèn)題，對(duì)于例如直播間特效、打賞類動(dòng)畫來(lái)說(shuō)，Lottie 則會(huì)顯得力不從心。

5. VAP

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

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

起點(diǎn)卡牌

6. PAG

PAG 是騰訊自主研發(fā)的一個(gè)開(kāi)源項(xiàng)目，它同時(shí)支持「矢量預(yù)合成」導(dǎo)出和「BMP 預(yù)合成」導(dǎo)出兩種方式。

矢量預(yù)合成導(dǎo)出無(wú)法支持所有的 AE 特性，但相對(duì)來(lái)說(shuō)還是比 Lottie 支持的格式要多的多，在理想情況下使用矢量預(yù)合成可以獲得更好的性能和更小的動(dòng)畫文件。

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

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

起點(diǎn)票賞

目前在起點(diǎn)讀書內(nèi)的各類打賞投票場(chǎng)景，為了更好的展示效果，動(dòng)效格式都會(huì)優(yōu)先考慮 PAG。

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

1. 透明通道序列幀

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

2. 視頻+透明通道

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

3. 矢量動(dòng)畫

形成動(dòng)畫的物體、動(dòng)作及時(shí)間都是通過(guò)代碼來(lái)完成，也因?yàn)槭羌兇a動(dòng)畫，因此可以做到體量極小，性能也是極佳的。

4. 圖片「渲染」動(dòng)畫

指通過(guò) json 格式的描述文件，將指定圖片賦予運(yùn)動(dòng)、時(shí)長(zhǎng)、動(dòng)作，最終通過(guò)解析渲染出描述中的動(dòng)畫效果的形式。

5. 視頻幀混合矢量

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

通過(guò)上面的一系列介紹，可以了解到我們?cè)谧鰟?dòng)態(tài)文件交付時(shí)，需要綜合考慮的因素就較多了，例如不同平臺(tái)的特性、低版本兼容問(wèn)題、動(dòng)態(tài)庫(kù)的適配性等。

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

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

關(guān)于參數(shù)交付

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

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

動(dòng)態(tài)標(biāo)注的本質(zhì)就是將時(shí)間（時(shí)間節(jié)點(diǎn)）、地點(diǎn)（位置）、人物（物品）、通過(guò)「動(dòng)作」進(jìn)行呈現(xiàn)就是標(biāo)注的基本結(jié)構(gòu)了，當(dāng)然也可以通過(guò)此方法來(lái)衍生出一些特需標(biāo)注法。例如在一個(gè)復(fù)雜的動(dòng)態(tài)設(shè)計(jì)需求中，涉及到的動(dòng)畫較多，有位移軟轉(zhuǎn)場(chǎng)動(dòng)畫、手勢(shì)操作響應(yīng)、操作反饋動(dòng)畫、隨機(jī)動(dòng)畫等。

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

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

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

結(jié)語(yǔ)

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

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

無(wú)論多簡(jiǎn)單的動(dòng)態(tài)在需要開(kāi)發(fā)實(shí)現(xiàn)時(shí)候，都建議進(jìn)行標(biāo)注落地，有效的標(biāo)注可以減少不必要的溝通以及非必要的后期走查反復(fù)。

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

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

參考資料

• 關(guān)于 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 對(duì)比鏈接： 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 相關(guān)閱讀推薦：https://mp.weixin.qq.com/s/a8-yOp8h5LiFGKSdLE_toA
• PAG 官網(wǎng)： https://pag.io/docs/pag-export.html

閱文體驗(yàn)設(shè)計(jì)YUX