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