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