第三媒體軟件中心軟件網絡資訊軟件資訊 → 動畫制作輕量級SDK,PAG六大優勢助力開發! TTL

動畫制作輕量級SDK,PAG六大優勢助力開發!

上傳:xuqin2009     來源:信息存儲服務     日期:2020-09-29

[摘要]  
   PAG(Portable Animated Graphics) 是解決這幾個痛點的解決方案之一 。它是一套完整的動畫工作流,誕生之初就是為了降低或消除動畫相關的研發成本,打通設計師創作到素材交付上線的極速流程,不斷輸出運行時可編輯的高質量動畫內容
 
[正文]    

導語:

   動畫特效可以輔助視覺制作焦點,引導注意力的方向,越來越為廣大視覺設計師青睞,并廣泛應用于各類場景開發。

   關于動畫設計工具,既有 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 文件,不用再拖著一個資源文件夾了。

動畫制作輕量級SDKPAG六大優勢助力開發!


   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主要優勢介紹

   PAG在運行時,可在保留動畫效果前提下,動態修改替換局部的文本或占位圖內容,甚至對任意子圖層進行增刪改及移動,極大豐富了動畫素材的使用場景,輕松實現照片和視頻模板等素材的批量化生產。

動畫制作輕量級SDKPAG六大優勢助力開發!


   PAG SDK整套方案是基于 C++ 和 OpenGL 的跨平臺架構研發的,不依賴平臺相關的UI框架,除了能做到跨端渲染完全一致外,還能輕松移植到各個原生平臺,其中也包含服務器端的渲染能力。

   在性能方面,PAG應用了游戲渲染里的大量的優化經驗,設計了從中間渲染數據到局部位圖的多級緩存架構,加上幀預測的技術,每幀渲染耗時平均可以做到Lottie的50%左右。

   由于采用二進制格式,不存在JSON的字符串解析,解碼耗時平均比Lottie文件的快12倍,相同的動畫內容導出文件只有Lottie一半左右大小,同時二進制文件格式也更容易做到單文件集成圖片,音頻,視頻等任意資源。

動畫制作輕量級SDKPAG六大優勢助力開發!


(數值單位:毫秒)

以下總結了 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的庫依賴

動畫制作輕量級SDKPAG六大優勢助力開發!

注意: 需要在混淆列表里面,添加libpag的keep規則:

動畫制作輕量級SDKPAG六大優勢助力開發!


配置完以后,sync一下,再編譯。

maven接入

在root工程目錄下面修改build.gradle文件,增加jcenter的maven倉庫

動畫制作輕量級SDKPAG六大優勢助力開發!

ii. 在app的gradle文件app/build.gradle,添加libpag的庫依賴

動畫制作輕量級SDKPAG六大優勢助力開發!


注意: 需要在混淆列表里面,添加libpag的keep規則:

動畫制作輕量級SDKPAG六大優勢助力開發!


配置完以后,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的引用.

動畫制作輕量級SDKPAG六大優勢助力開發!


DEMO及測試素材下載地址:https://pag.io/docs/sdk.html

五、總結

   作為騰訊PCG發布器中臺下三大組件之一,PAG已經在騰訊微視,手機QQ,王者榮耀等數十款產品中落地使用。包含微信在內的多個團隊,也都積極參與該項目的協同共建,齊心協力,不斷打磨這款動畫開發利器。相信隨著PAG的不斷迭代,將持續為動畫設計師及開發工程師們技術賦能,實現更多天馬行空的動畫效果,助力動畫產業進一步發展。

動畫制作輕量級SDKPAG六大優勢助力開發!


   說了這么多關于PAG的介紹,大家是不是迫不及待地想體驗一把PAG的神奇應用呢?別著急,同學們現在可以通過官網下載插件體驗啦!下載地址:https://PAG.io

   (新聞稿 2020-09-30)


頻道首頁 】【 評論 】 【 打印 】 【 字體:
   上一篇:破屏互動+靈感智囊 搜狗輸入法搭建UGC平臺打造個性化
   下一篇:“看少一點,看好一點”,錘子閱讀更名為“珍新聞”
導航:報價 | 大全 | 排行榜 | 產品大全 | 參量 | 訂閱 
 Advertisement
 十大最受關注的新聞
1  榮耀專利自研技術成就榮耀獵人游戲本2020旗艦級散熱
2  開學 必帶雷蛇靈刃,“靈靈”后的“刃”性!
3  小米筆記本: 超長續航,RedmiBook 13全面屏超薄本
4  冷知識: 點擊收獲你不知道的鍵盤小知識
5  中興手機: 4800萬AI四攝,中興天機Axon 11 SE手機降價
6  科技圈的審美革命 手機的“無性別化”時代來了
7  榮耀手機: 6.63英寸升降全面屏,榮耀X10 5G手機2189元
8  金士頓DataTraveler 2000加密閃存盤推出128GB版本
9  三星Galaxy Z Flip 5G秘境白外觀、交互全面升級
10  用三星Galaxy Z Flip 5G的配色密碼 解鎖全球城市風尚
 十大熱門驅動/軟件下載
1  [手機驅動]手機usb萬能
2  [熱門常用軟件]QQ2008正式版下載【騰訊QQ2008官方版Beta1】
3  [熱門常用軟件]E話通下載【E話通4.5 正式版】
4  [手機驅動]Samsung三星 手機USB驅動1.0版For Win98SE/ME/...
5  [手機驅動]Microsoft微軟 ActiveSync同步軟件4.5中文版Fo...
6  [攝像頭驅動]萬能攝像頭 FOR Windows
7  [熱門常用軟件]皮皮播放器下載【PPFilm皮皮播放器 2.1.0....
8  [手機驅動]諾基亞 PC套件下載
9  [熱門常用軟件]面對面游戲下載【面對面視頻游戲大廳】
10  [手機驅動]Microsoft微軟 Windows Mobile Device Center ...
 十大最受關注的品牌
1  三星手機(SAMSUNG)
2  諾基亞手機(NOKIA)
3  華碩筆記本(ASUS)
4  摩托羅拉手機(MOTOROLA)
5  英特爾CPU(Intel)
6  華碩主板(ASUS)
7  LG手機(LG)
8  索愛手機(Sony Ericsson)
9  聯想筆記本(lenovo)
10  宏碁筆記本(acer)
 十大熱門常用軟件下載
1  QQ2008正式版下載【騰訊QQ2008官方版Beta1】
2  E話通下載【E話通4.5 正式版】
3  皮皮播放器下載【PPFilm皮皮播放器 2.1.0.2版】
4  面對面游戲下載【面對面視頻游戲大廳】
5  DVD解碼器下載【NVIDIA DVD Decoder 1.02】
6  迅雷5下載【迅雷5.8.1.507官方版】
7  QQ2007 II正式版下載【騰訊QQ2007官方版本】
8  QQ2006正式版下載【騰訊QQ2006官方版本】
9  聯眾世界游戲大廳下載【聯眾世界2.7.0.8官方版】
10  MTV下載器【MTV下載精靈 8.31版】
11  pplive最新版下載【PPLive網絡電視V1.9.35版】
12  迅雷(Thunder)下載【迅雷v5.7.12.493官方版】
13  騰訊QQ2008下載【騰訊QQ官方版2008極速賀歲版KB1】
14  Total Video Converter下載【Total Video Converter v3.1...
15  QQ拼音輸入法下載【騰訊QQQQ拼音輸入法V1.4.1版】
16  皮皮高清影視播放器下載【PIPIPlayer 2.7.0.3版】
17  eMule下載【電驢eMule官方v0.49a正式版】
18  極點五筆輸入法下載【極點五筆6.1標準版】
19  QQ2009正式版下載【騰訊QQ2009 SP4官方版】
20  Vagaa哇嘎畫時代版下載【哇嘎 2.6.5.10】
   >> 查看評論   
 
   >> 查看更多評論   [共有0條評論]
發表評論
        
        
   點評:
   姓名:  
            字數: 0
     
新聞精選
·鴻雁物聯網大廈啟用 3000平體驗館成杭州智慧
·為什么企業郵箱不能用來群發郵件?
·“看少一點,看好一點”,錘子閱讀更名為“珍
·高性價比之選 榮泰S60按摩椅為家人開啟健康未
·當數字貨幣走進大眾生活,Mybit能帶給你什么
·艾媒金榜:2020年中國新經濟獨角獸企業TOP100
  ·第九屆創客嘉年華"云上重聯" 海內
·ICC精準營銷貼片,城商行撬動零售市場的支點
·中式快餐供應鏈管理突破 備受美食平臺青睞好
·立足浦東 日立建機迎接浦東新區領導調研
·簡于形 精于心,中興通訊亮相中國國際信息通
·破解金融機構智能風建難題 百融云自動建模平