什么是PAG動(dòng)效組件 PAG動(dòng)效方案使用總結(jié)

近幾年能明顯感覺到，互聯(lián)網(wǎng)產(chǎn)品已經(jīng)越來越離不開動(dòng)效了：不管是APP里會(huì)動(dòng)的加載動(dòng)畫UI，還是直播間里華麗的禮物，都需要經(jīng)歷動(dòng)效上線的過程。而負(fù)責(zé)這些動(dòng)效上線的前端同學(xué)應(yīng)該有過這樣的體驗(yàn)：各種加班寫代碼上線動(dòng)畫效果，并且在動(dòng)效還原過程中反復(fù)和設(shè)計(jì)師聯(lián)調(diào)效果。

最近接觸到一個(gè)開源項(xiàng)目可以幫助大家解決這個(gè)問題，它就是PAG動(dòng)效組件。

PAG 簡(jiǎn)介：認(rèn)識(shí) PAG動(dòng)效

PAG是來自騰訊的一套完整的動(dòng)畫工作流解決方案，助力于將 AE 動(dòng)畫方便快捷的應(yīng)用于各平臺(tái)終端。PAG 的流程圖下圖所示，設(shè)計(jì)師在 AE 上設(shè)計(jì)出動(dòng)畫后，可以通過導(dǎo)出插件導(dǎo)出 pag 文件，同時(shí) PAG 提供了桌面端預(yù)覽工具，支持實(shí)時(shí)預(yù)覽效果，在確認(rèn)效果后，通過運(yùn)行配置上線，各平臺(tái)終端可以通過 PAG SDK 加載渲染 PAG 動(dòng)畫。

img

PAG 特點(diǎn)及優(yōu)勢(shì) ：和其他動(dòng)效上線方案相比，它強(qiáng)在哪里

● 開源項(xiàng)目：無需擔(dān)心團(tuán)隊(duì)維護(hù)問題。

● 文件更?。篜AG采用針對(duì) AE 時(shí)間軸屬性設(shè)計(jì)的二進(jìn)制文件編碼器，能夠使用動(dòng)態(tài)比特位緊湊存儲(chǔ)，冗余信息極少，文件體積最小，解碼速度最快，且支持單文件集成圖片和音頻等外部資源。

● 全 AE 特性支持：在純矢量的導(dǎo)出模式下，無論是哪種實(shí)現(xiàn)方案，在眾多的 AE 特性面前，都只支持將有限的 AE特性導(dǎo)出渲染，PAG 方案提供了 BMP 預(yù)合成的解決方案，支持將特定圖層截圖導(dǎo)出成透明視頻，實(shí)現(xiàn)了對(duì)于所有 AE 特性導(dǎo)出的支持。

● 運(yùn)行時(shí)編輯：PAG 不僅僅支持文本圖層的文本編輯、圖片圖層的占位圖替換，還支持圖層級(jí)別的增加、刪除及更改渲染位置，實(shí)現(xiàn)原子素材的自由組合，典型的應(yīng)用場(chǎng)景就是視頻模版和游戲戰(zhàn)報(bào)，一個(gè)模版中由多個(gè) pag 有機(jī)組合在一起。

● 渲染架構(gòu)：相對(duì)于 Lottie 、SVGA 依賴于平臺(tái)端相關(guān)的渲染接口，PAG 使用了跨平臺(tái)一致的 C++ 架構(gòu)，平臺(tái)層面僅僅提供渲染環(huán)境，渲染的主體位于 C++ 層，可以實(shí)現(xiàn)跨平臺(tái)的渲染一致性。

● 支持的平臺(tái)更多：相比 Lottie 支持 Android、iOS、Web 和 macOS， SVGA 支持 Android、iOS、Web，PAG 實(shí)現(xiàn)了 Android、iOS、Web、macOS、Windows、Linux 和 微信小程序，支持的平臺(tái)更多。

這里放一張對(duì)比圖，大家就一目了然了：

img

想進(jìn)一步了解也可以去開源地址：https://github.com/Tencent/libpag

PAG 使用：核心類分析及常用方法解讀

在瀏覽過開源地址后，這里幫大家整理出核心類的分析：

這些PAG常用方法解讀也能幫助大家使用起來更輕松：

PAG 運(yùn)行時(shí)編輯

PAG 的運(yùn)行時(shí)編輯主要分為兩類：1）修改文本圖層的文本信息、替換圖片圖層中的占位圖、修改實(shí)色圖層中的顏色

//C++
std::shared_ptrReplaceImageOrText(){
autopagFile=pag::Load("../../assets/test2.pag");
if(pagFile==nullptr){
returnnullptr;
}
for(inti=0;inumImages();i++){
autopagImage=pag::FromPath("../../assets/scene.png");
pagFile->replaceImage(i,pagImage);
}

for(inti=0;inumTexts();i++){
autotextDocumentHandle=pagFile->getTextData(i);
textDocumentHandle->text="hah哈哈哈哈哈";
pagFile->replaceText(i,textDocumentHandle);
}
returnpagFile;
}

2）渲染樹編輯

渲染樹編輯指的是通過使用 PAGComposition 的相關(guān)接口，完成多個(gè)圖層、多個(gè) pag 文件的自由組合。具體如何使用可以參考下面的代碼：

//以O(shè)C版本為例
-(PAGComposition*)makeComposition{
PAGComposition*compostion=[PAGCompositionMake:self.view.bounds.size];
floatitemWidth=self.view.bounds.size.width/5;
floatitemHeight=100;
for(inti=0;i

	PAG UI場(chǎng)景及列表播放

	當(dāng)一個(gè)頁面中含有多個(gè)pag 文件時(shí)，如果使用多個(gè) PAGView，由于每一個(gè) PAGView 都需要一個(gè)獨(dú)立的渲染環(huán)境，內(nèi)存和 CPU 占用相對(duì)較高，推薦的處理方法有兩種：

	1）通過使用 PAG 的組合模式用將多個(gè) PAG 文件添加到同一個(gè) PAGComposition 中，具體使用方法見運(yùn)行時(shí)編輯，從而將多個(gè)渲染環(huán)境縮減到一個(gè)渲染環(huán)境，降低內(nèi)存和 CPU 占用；

	2）對(duì)于一些 UI 列表場(chǎng)景，需要有多個(gè) View 的存在， pag 文件無法添加到一個(gè) PAGComposition 中，此時(shí)可以使用 PAGImageView
//以O(shè)C版本為例
#import

#defineWIDTH100

@interfacePAGCell:UITableViewCell
@property(nonatomic,strong)PAGImageView*pagImageView;
@property(nonatomic,strong)NSString*filePath;
@end

@implementationPAGCell

-(instancetype)initWithStyle:(UITableViewCellStyle)stylereuseIdentifier:(NSString*)reuseIdentifier{
if(self=[superinitWithStyle:stylereuseIdentifier:reuseIdentifier]){
self.pagImageView=[[PAGImageViewalloc]initWithFrame:CGRectMake(20,0,WIDTH,WIDTH)];
[self.contentViewaddSubview:self.pagImageView];
}
returnself;
}

-(void)setFilePath:(NSString*)filePath{
if([filePathlength]>0){
[self.pagImageViewsetPath:filePath];
[self.pagImageViewsetCurrentFrame:0];
[self.pagImageViewsetRepeatCount:-1];
[self.pagImageViewplay];
}
}


	PAG 字體注冊(cè)

	PAG 除了支持修改文本圖層的文本信息外，還支持修改字體。具體方法如下：

	（1）通過 PAGFont 獲取字體的相關(guān)信息，然后賦值給 PAGText，使用到的接口如下：

	獲取字體信息
//C++
/**
*Registersafontrequiredbythetextlayersinpagfiles,sothattheycanberenderedas
*designed.
*/
staticPAGFontRegisterFont(conststd::string&fontPath,intttcIndex,
conststd::string&fontFamily="",
conststd::string&fontStyle="");
/**
*Registersafontrequiredbythetextlayersinpagfiles,sothattheycanberenderedas
*designed.
*/
staticPAGFontRegisterFont(constvoid*data,size_tlength,intttcIndex,
conststd::string&fontFamily="",
conststd::string&fontStyle="");
PAGFont(std::stringfontFamily,std::stringfontStyle)
:fontFamily(std::move(fontFamily)),fontStyle(std::move(fontStyle)){
}

/**
*Astringwiththenameofthefontfamily.
**/
conststd::stringfontFamily;
/**
*Astringwiththestyleinformation—e.g.,“bold”,“italic”.
**/
conststd::stringfontStyle;



	（2）fontFamlily 和 fontStyle 賦值給 PAGText，PAGText 再填充到 PAGTextLayer 中。
//C++
for(inti=0;inumTexts();i++){
autotextDocumentHandle=pagFile->getTextData(i);
textDocumentHandle->text="hah哈哈哈哈哈";
//Usespecialfont
autopagFont=pag::RegisterFont("../../resources/font/NotoSansSC-Regular.otf",0);
textDocumentHandle->fontFamily=pagFont.fontFamily;
textDocumentHandle->fontStyle=pagFont.fontStyle;
pagFile->replaceText(i,textDocumentHandle);
}


	如果使用了特定字體而又沒有注冊(cè)或字體文件中沒有包含該字符，PAG 內(nèi)部（Android、iOS、macOS、Windows 平臺(tái)）有一個(gè)默認(rèn)字體列表（同時(shí)支持外部設(shè)置字體回退列表，外部設(shè)置時(shí)會(huì)覆蓋默認(rèn)設(shè)置），會(huì)回退到 PAG 的默認(rèn)字體列表中，此時(shí)使用那種字體對(duì)于業(yè)務(wù)方而言是不確定的。
//C++
/**
*Resetsthefallbackfontnames.Itshouldbecalledonlyoncewhentheapplicationisbeing
*initialized.
*/
staticvoidSetFallbackFontNames(conststd::vector&fontNames);

/**
*Resetsthefallbackfontpaths.Itshouldbecalledonlyoncewhentheapplicationisbeing
*initialized.
*/
staticvoidSetFallbackFontPaths(conststd::vector&fontPaths,
conststd::vector&ttcIndices);


	PAG 視頻編輯場(chǎng)景

	在視頻編輯場(chǎng)景，使用的不是 PAGView，而是 PAGPlayer、PAGSurface 和 PAGComposition。

	PAGSurface 可以通過 CVPixelBufferRef 或紋理創(chuàng)建，方便快捷的與視頻后編輯中的 CVPixelBuffer 或 紋理進(jìn)行整合。同時(shí) PAGImage 也支持通過 CVPixelBufferRef 或 紋理創(chuàng)建，通過 PAGPlayer 控制播放進(jìn)度，將視頻內(nèi)容填充進(jìn)圖片圖層的占位圖。
//OC
/**
*CreatesaPAGImageobjectfromthespecifiedCVPixelBuffer,returnnulliftheCVPixelBufferis
*invalid.
*/
+(PAGImage*)FromPixelBuffer:(CVPixelBufferRef)pixelBuffer;

//java
publicstaticPAGImageFromTexture(inttextureID,inttextureTarget,intwidth,intheight);

publicstaticPAGImageFromTexture(inttextureID,inttextureTarget,intwidth,intheight,booleanflipY);


	PAG 軟解注入

	為什么會(huì)有軟解注入？PAG 的導(dǎo)出方式中支持 BMP 預(yù)合成導(dǎo)出，在 pag 文件中，如果含有 BMP 預(yù)合成，一個(gè) BMP 預(yù)合成相當(dāng)于一個(gè)視頻，視頻則需要解碼。在 PAG SDK 中默認(rèn)使用硬件解碼，但硬件解碼存在兩個(gè)問題：

	1）移動(dòng)端硬件解碼器的瞬時(shí)存在數(shù)目是有限制的，不能無限的創(chuàng)建，如果創(chuàng)建硬件解碼器的數(shù)目超過限制，就會(huì)出現(xiàn)解碼器創(chuàng)建失敗的情況，在視頻編輯場(chǎng)景中需要關(guān)注；

	2）Android 平臺(tái)由于機(jī)型兼容性、碎片化驗(yàn)證，不能保證所有的機(jī)型都能硬件解碼成功，因此 Android 平臺(tái)軟解是必須的。

	于是，在提供的制品庫(kù)中， iOS 平臺(tái)由于沒有兼容性的問題，默認(rèn)是不帶軟解的，Android 提供了兩個(gè)包，普通的包默認(rèn)是內(nèi)置軟解的，noffavc 的包是沒有內(nèi)置軟解的。

	具體怎么注入軟解呢：Android 平臺(tái)可以選擇完整制品庫(kù)，iOS 平臺(tái)可以引入 ffavc。

	pod'ffavc'

	通過如下方法完成軟件解碼器的注冊(cè)：
//OC
-(void)registerSoftwareDecoder
{
//注冊(cè)軟件解碼器工廠指針
autofactory=ffavc::GetHandle();
[PAGVideoDecoderRegisterSoftwareDecoderFactory:(void*)factory];
}


	如果接入方自己的 APP 中已經(jīng)內(nèi)置了軟解庫(kù)，可以通過外部注入的方式注入軟解。

	PAG 官網(wǎng)提供了下面這個(gè)軟解注入接口，需要業(yè)務(wù)方基于自己的解碼器實(shí)現(xiàn)，PAG BMP 預(yù)合成中的視頻編碼格式為 h264。

	https://github.com/libpag/ffavc/blob/main/vendor/libpag/include/pag/decoder.h

	具體的實(shí)現(xiàn)方式可以參考：

	ffavc/FFAVCDecoder.cpp at main · libpag/ffavc · GitHub

	然后自己通過上面提到的方式注入軟解。

	PAG 服務(wù)端渲染

	和 Lottie、SVGA 不同的是，PAG 支持服務(wù)端渲染，盡管 PAG 的渲染依賴 OpenGL 環(huán)境，但 服務(wù)端卻可以繼續(xù)使用 CPU 服務(wù)器。具體實(shí)現(xiàn)層面，PAG 通過 swiftshader 在 CPU 服務(wù)器上構(gòu)建出了 OpenGL 環(huán)境，使得 pag 文件可以在 CPU 環(huán)境中正常渲染。

	在服務(wù)端的具體使用如下，獲取到的是 BGRA 的數(shù)據(jù)，該數(shù)據(jù)可以用于視頻編碼。
//C++
autopagFile=pag::Load("../../assets/test2.pag");
autopagSurface=pag::MakeOffscreen(pagFile->width(),pagFile->height());
if(pagSurface==nullptr){
printf("---pagSurfaceisnullptr!!!
");
return-1;
}
autopagPlayer=newpag::PAGPlayer();
pagPlayer->setSurface(pagSurface);
pagPlayer->setComposition(pagFile);

autototalFrames=TimeToFrame(pagFile->duration(),pagFile->frameRate());
autocurrentFrame=0;

intbytesLength=pagFile->width()*pagFile->height()*4;

while(currentFrame<=?totalFrames)?{
????pagPlayer->setProgress(currentFrame*1.0/totalFrames);
autostatus=pagPlayer->flush();

//PAG渲染數(shù)據(jù)讀取
autodata=newuint8_t[bytesLength];
pagSurface->readPixels(pag::BGRA_8888,pag::Premultiplied,data,
pagFile->width()*4);
delete[]data;

currentFrame++;
}

deletepagPlayer;

	開始使用 ：如何接入

	接入使用分為開發(fā)部分和設(shè)計(jì)部分，這里分別為大家介紹下：

	(1) 開發(fā)者——接入SDK

	在PAG的Github Wiki中有非常詳細(xì)的接入指引（包括Android、iOS、Web等平臺(tái)的接入方法和范例工程）

	

	img

	(2)設(shè)計(jì)師——下載導(dǎo)出插件和預(yù)覽工具

	設(shè)計(jì)師想要使用PAG，只需在官網(wǎng)下載預(yù)覽工具 PAGViewer和 AE 導(dǎo)出插件即可//pag.art/docs/install.html

	

	img

	整體看來，PAG的核心價(jià)值如下：

				上線難點(diǎn)
			

				傳統(tǒng)方案痛點(diǎn)
			

				PAG動(dòng)效價(jià)值
		

				研發(fā)成本
			

				每個(gè)動(dòng)效都需要研發(fā)通過代碼來還原，需要大量的研發(fā)人力持續(xù)投入，由于研發(fā)人力有限，導(dǎo)致這個(gè)流程無法批量化生產(chǎn)素材。
			

				研發(fā)只有一次性接入 SDK的成本，在后續(xù)整個(gè)素材生產(chǎn)流程都無需研發(fā)人力介入。整套工作流不在受制于研發(fā)的人力瓶頸，就能夠開放給更多的設(shè)計(jì)師使用，批量化的進(jìn)行素材生產(chǎn)。
		

				生產(chǎn)周期
			

				設(shè)計(jì)師和研發(fā)人員的聯(lián)調(diào)成本高，效果還原度需要反復(fù)確認(rèn)，中間產(chǎn)生較長(zhǎng)的上線周期，拖延產(chǎn)品運(yùn)營(yíng)節(jié)奏。
			

				由于砍掉了研發(fā)成本，最耗時(shí)的研發(fā)和設(shè)計(jì)的聯(lián)調(diào)環(huán)節(jié)也不存在了。設(shè)計(jì)師可以所見即所得地生產(chǎn)素材，極大地縮短了生產(chǎn)周期，能夠快速響應(yīng)運(yùn)營(yíng)熱點(diǎn)。
		

				動(dòng)效視覺
			

				AE里有很多復(fù)雜動(dòng)效，使用純代碼還原起來非常困難，設(shè)計(jì)師只能不斷簡(jiǎn)化效果以達(dá)到跟開發(fā)成本的平衡，導(dǎo)致上線的視覺效果大打折扣。
			

				PAG的SDK完全還原了AE整個(gè)動(dòng)效的渲染系統(tǒng)，接入一次，設(shè)計(jì)師就可以充分利用AE動(dòng)效的原子能力，組合出無限的視覺動(dòng)效，不用因?yàn)榇a還原成本的問題而打折扣。
		

	據(jù)官網(wǎng)顯示已經(jīng)有很多頭部應(yīng)用接入使用（如微信、王者榮耀、小紅書、知乎等），穩(wěn)定性應(yīng)該很有保證，如果有動(dòng)效上線相關(guān)業(yè)務(wù)的朋友非常值得試試。

	編輯：黃飛