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