導(dǎo)語：
動畫特效可以輔助視覺制作焦點，引導(dǎo)注意力的方向，越來越為廣大視覺設(shè)計師青睞，并廣泛應(yīng)用于各類場景開發(fā)。
關(guān)于動畫設(shè)計工具，既有 Framer.js、Origami， 也有交互原型類 Principle、Flinto，還有 Figma 自帶動畫演示功能的工具，但是對于一些視覺特效、非邏輯表達(dá)類動畫，設(shè)計師通常會借助 AE 完成。
遺憾的是，AE動畫效果的開發(fā)至今也沒有一種完備且成熟的跨平臺解決方案，導(dǎo)致動畫需求交付上線的效率和質(zhì)量都不盡人意。對于市面上不同的動畫開發(fā)工具，本文將對比分析不同方案的差異和優(yōu)劣，辨析其還原程度和性能表現(xiàn)，希望給研發(fā)同學(xué)們一些參考和借鑒。
一、傳統(tǒng)AE設(shè)計難點及解決方案
傳統(tǒng)的AE設(shè)計，總結(jié)下來有以下三個核心痛點：
研發(fā)成本高： 每個動效都需要研發(fā)通過代碼來還原，單獨排期的特效以及手工配置還原的過程，包括后續(xù)復(fù)用及改動都需要大量的研發(fā)人力持續(xù)投入。
生產(chǎn)周期長： 設(shè)計師和研發(fā)人員需要反復(fù)確認(rèn)效果還原度。這樣很難跟上運營節(jié)奏，容易錯過時事熱點。
視覺動效弱： AE里有很多復(fù)雜動效，使用純代碼還原起來非常困難，設(shè)計師只能不斷簡化效果以達(dá)到跟開發(fā)成本的平衡。
PAG (Portable Animated Graphics) 是解決這幾個痛點的解決方案之一 。它是一套完整的動畫工作流，誕生之初就是為了降低或消除動畫相關(guān)的研發(fā)成本，打通設(shè)計師創(chuàng)作到素材交付上線的極速流程，不斷輸出運行時可編輯的高質(zhì)量動畫內(nèi)容。
PAG提供從AE導(dǎo)出插件，到桌面預(yù)覽工具，再到iOS和Android端的渲染SDK。在AE設(shè)計師設(shè)計完成后可以直接輸出動畫文件，SDK研發(fā)不需要再參與代碼還原，只需要接入一次SDK即可做到素材自助上線。也避免了反復(fù)進(jìn)行效果確認(rèn)的聯(lián)調(diào)時間成本。
在PAG誕生之前，大家是用lottie來處理這些問題的，不可否認(rèn)lottie是個很好的方案， 但仍有些問題沒有得到很好的解決。
二、Lottie vs PAG
Lottie 最早是為了解決矢量圖形類動畫的問題。從官方社區(qū)來看，我們能容易發(fā)現(xiàn) Lottie 的矢量基因，社區(qū)作品大多是圖形類動畫。
Lottie 庫和插件是 Airbnb 于2017年前后發(fā)布的一款跨平臺的動畫解決方案，設(shè)計師通過 bodymovin 從 AE 中將動畫導(dǎo)出 json 文件，開發(fā)只需將其導(dǎo)入資源文件夾直接引用即可。
Lottie 早期的版本不支持圖片類動畫，導(dǎo)出 json 之后會自動生成一個 img 的資源文件夾，播放 .json 文件時，需要解壓資源壓縮包到本地目錄才能正常播放。從 bodymovin V 5.1.15 之后，Lottie 將圖片轉(zhuǎn)為 base 64 編碼，使用字符代替圖像地址，并封裝在 json 里，直接播放一個 .json 文件，不用再拖著一個資源文件夾了。
Lottie 當(dāng)前對圖片類動畫的支持依然會有一些小問題，有時候需要仔細(xì)排查出問題的圖層，并對照官方文檔靈活調(diào)整動畫替代方案。
PAG最初誕生的原因，正是因為Lottie無法滿足視頻編輯場景里的動畫以下幾點需求：
1.當(dāng)時它根本不支持文本圖層，可編輯的字幕貼紙是視頻編輯非常重要的能力。
2.在 iOS 上它依賴 CALayer 渲染，當(dāng)用在非主線程的視頻合成時，有部分動畫會不呈現(xiàn)。
3.Android 上，它的遮罩實現(xiàn)無與倫比的卡(10×)，但受限于 Java 層的閹割版 Canvas，也沒有特別好的實現(xiàn)方式。
當(dāng)時的Lottie還存在大大小小扎堆的渲染 Bug 以及功能支持還不完善，如無法反向遮罩，矢量圖無法挖空等等。
PAG 選擇了放棄重寫渲染SDK解決方案，從頭開始設(shè)計一種更高效的二進(jìn)制動畫文件格式，并基于AE C++ SDK重新實現(xiàn)了導(dǎo)出插件，又基于跨平臺C++和OpenGL重寫了兩移動端渲染SDK，歷時半年跑通第一個版本。PAG包含了當(dāng)時Lottie支持的所有功能，并徹底擺脫了導(dǎo)出和渲染上的能力擴展相關(guān)限制。
相比于Lottie方案，PAG不僅解決了在它在矢量動畫渲染上的各種問題，更重要的是擴展了動畫的使用場景，PAG圍繞運行時可編輯性設(shè)計了靈活的架構(gòu)，能夠完美 實現(xiàn)動畫的局部編輯替換需求。
三、PAG主要優(yōu)勢介紹
PAG在運行時，可在保留動畫效果前提下，動態(tài)修改替換局部的文本或占位圖內(nèi)容，甚至對任意子圖層進(jìn)行增刪改及移動，極大豐富了動畫素材的使用場景，輕松實現(xiàn)照片和視頻模板等素材的批量化生產(chǎn)。
PAG SDK整套方案是基于 C++ 和 OpenGL 的跨平臺架構(gòu)研發(fā)的，不依賴平臺相關(guān)的UI框架，除了能做到跨端渲染完全一致外，還能輕松移植到各個原生平臺，其中也包含服務(wù)器端的渲染能力。
在性能方面，PAG應(yīng)用了游戲渲染里的大量的優(yōu)化經(jīng)驗，設(shè)計了從中間渲染數(shù)據(jù)到局部位圖的多級緩存架構(gòu)，加上幀預(yù)測的技術(shù)，每幀渲染耗時平均可以做到Lottie的50%左右。
由于采用二進(jìn)制格式，不存在JSON的字符串解析，解碼耗時平均比Lottie文件的快12倍，相同的動畫內(nèi)容導(dǎo)出文件只有Lottie一半左右大小，同時二進(jìn)制文件格式也更容易做到單文件集成圖片，音頻，視頻等任意資源。
(數(shù)值單位：毫秒)
以下總結(jié)了 PAG 方案的六大優(yōu)勢：
1文件更小PAG是二進(jìn)制文件格式，并采用了可變長編碼整形以及動態(tài)按位聚合這些壓縮技術(shù)，讓相同動畫導(dǎo)出的文件大小平均只有 Lottie 的一半左右(都經(jīng)過zip壓縮后對比)。PAG 除了對特效類動畫的支持可圈可點，對矢量動畫的支持也是非常優(yōu)秀，甚至強于 Lottie。以一個生長動畫為例，Lottie 文件 14k，而 PAG 文件只有1k。
2解碼更快由于采用二進(jìn)制格式，不存在JSON的字符串解析，解碼耗時平均只有Lottie文件的7.6%，同時二進(jìn)制文件格式也更容易做到單文件集成圖片，音頻，視頻等任意資源。
3支持更多AE特性PAG目前支持Lottie在移動端幾乎所有的功能，并且額外在文本，遮罩，濾鏡方面比Lottie支持更加全面。除了矢量導(dǎo)出，PAG還增加了視頻序列幀導(dǎo)出，能夠支持所有的AE特性。
4性能更好基于 C++ 和 OpenGL 硬件加速渲染，除了能做到兩端渲染完全一致外，應(yīng)用了游戲渲染里的大量的優(yōu)化經(jīng)驗，從中間渲染數(shù)據(jù)到局部位圖的多級緩存架構(gòu)，每幀渲染耗時平均可以做到Lottie的50%左右。
5編輯性更高除了運行時文本編輯和占位圖替換功能外，PAG還支持圖層級別的任意組合修改。為復(fù)雜的應(yīng)用場景提供更加靈活的編程擴展能力。
6支持服務(wù)端渲染PAG支持服務(wù)端渲染能力，以C++方式接入，可以支持服務(wù)端照片轉(zhuǎn)特效視頻以及一鍵大片模板等功能，結(jié)合H5快速實現(xiàn)運營活動頁。
四、PAG SDK端全平臺接入方式
目前PAG SDK已經(jīng)支持了5個原生平臺，包含iOS、Android、Linux、Windows和macOS等。而且SDK的接入非常便捷，可實現(xiàn)10分鐘快速接入。
Android端SDK為aar文件，支持armeabi, armv7a, arm64
iOS端SDK為framework文件，分為四個版本：真機版(arm64、arm64/armv7)和真機模擬器版(arm64/x64、arm64/armv7/x64)
Android端接入
基本要求
支持android 4.4及以上系統(tǒng)
推薦使用gralde 3.0及以上版本編譯
aar接入
1.將libpag的aar文件放置在android工程項目的libs目錄下
2.添加添加aar庫依賴
在app的gradle文件app/build.gradle，添加libpag的庫依賴
注意： 需要在混淆列表里面，添加libpag的keep規(guī)則：
配置完以后，sync一下，再編譯。
maven接入
在root工程目錄下面修改build.gradle文件，增加jcenter的maven倉庫
ii. 在app的gradle文件app/build.gradle，添加libpag的庫依賴
注意： 需要在混淆列表里面，添加libpag的keep規(guī)則：
配置完以后，sync一下，再編譯。
iOS端接入
基本要求
支持iOS8及以上
需要使用Xcode8.0及以上版本進(jìn)行編譯
Framework接入
1.將libpag的framework文件放置在iOS工程項目目錄下
2.在項目工程中，配置所使用Target的General->Embedded Binaries，添加libpag.framework
3.由于libpag暫時不支持Bitcode，需要配置Build Settings->Build Options->Enable Bitcode 為No
cocoapods接入
修改App目錄下的Podfile文件，添加相應(yīng)的libpag的引用.
DEMO及測試素材下載地址：https://pag.io/docs/sdk.html
五、總結(jié)
作為騰訊PCG發(fā)布器中臺下三大組件之一，PAG已經(jīng)在騰訊微視，手機QQ，王者榮耀等數(shù)十款產(chǎn)品中落地使用。包含微信在內(nèi)的多個團(tuán)隊，也都積極參與該項目的協(xié)同共建，齊心協(xié)力，不斷打磨這款動畫開發(fā)利器。相信隨著PAG的不斷迭代，將持續(xù)為動畫設(shè)計師及開發(fā)工程師們技術(shù)賦能，實現(xiàn)更多天馬行空的動畫效果，助力動畫產(chǎn)業(yè)進(jìn)一步發(fā)展。
說了這么多關(guān)于PAG的介紹，大家是不是迫不及待地想體驗一把PAG的神奇應(yīng)用呢?別著急，同學(xué)們現(xiàn)在可以通過官網(wǎng)下載插件體驗啦!下載地址：https://PAG.io
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
