如今,短視頻應用百花齊放,為了吸引更多流量,動畫設計師和開發工程師往往為了制作奪人眼球,極具創意的動畫特效花費大量心血,但最終動畫需求交付上線的效率和質量,仍舊不盡如人意。問題出在哪里?主要還是工具沒有選對!
傳統的AE設計,總結下來有以下三個核心痛點:
研發成本高:每個動效都需要研發通過代碼來還原,單獨排期的特效以及手工配置還原的過程,,包括后續復用及改動都需要大量的研發人力持續投入。
生產周期長:設計師和研發人員需要反復確認效果還原度。這樣很難跟上運營節奏,容易錯過時事熱點。
視覺動效弱:AE里有很多復雜動效,使用純代碼還原起來非常困難,設計師只能不斷簡化效果以達到跟開發成本的平衡。
為了解決上述痛點,騰訊PCG發布器中臺主導研發了一款動畫開發“神器”——PAG。
一、PAG是什么?
PAG (Portable Animated Graphics) 是一套完整的動畫工作流,誕生之初就是為了降低或消除動畫相關的研發成本,打通設計師創作到素材交付上線的極速流程,不斷輸出運行時可編輯的高質量動畫內容。
為什么選擇PAG?
(一)傳統AE設計 VS PAG工作流

上圖為微視的一期運營海報,可以看到在視頻編輯場景下包含大量的動效素材。包括動畫貼紙,轉場特效,以及天氣和地理位置等帶動畫的智能填充文本。
1. 傳統AE設計思路:設計師使用AE先設計好動畫,然后導出視頻Demo。研發再來根據Demo拆解動效組成。如果是不支持的特效能力,還需要單獨排期進行開發。流程圖如下:

2. 引入PAG后的動畫工作流程:

設計師使用AE導出插件,能夠直接將制作好的動畫導出成PAG文件,經過桌面預覽工具的確認,再交付給終端由SDK渲染成動效內容。
通過傳統AE設計與PAG工作流的簡單PK,不難發現使用PAG工作流,研發只有一次性接入SDK的成本即可做到素材自助上線,不再需要參與代碼還原。這也避免了最耗時的研發和設計的聯調環節,從而實現批量化的素材生產流程,大大提高了設計和研發的效率。
(二)PAG的特色優勢
對比市面上其他的動畫組件,PAG具備以下3個顯著亮點:
1、高效動畫文件
PAG——命名上就可以看出,文件格式本身在整套方案中的重要地位,PAG在文件格式設計上主要追求三個核心目標:1)單文件交付 2)解碼速度快 3)動畫文件小。
基于以上的目標,PAG采用了二進制的數據結構來存儲動畫信息。因為二進制數據結構能夠非常方便的單文件集成任何資源,并在解碼速度上,比JSON這類文本數據可以快幾十倍。

在控制文件大小方面,PAG通過利用動畫文件本身的特點,獲得了極高的壓縮率。除了跳過大量默認值的存儲外,PAG在文件的每個屬性組里,都會盡可能地把相似的數據重新排列,讓他們聚合到一起,目的是繞開字節對齊的問題,使用比特位來緊湊存儲。相同的動畫內容,通過以上策略的壓縮,可以比業內同類型方案平均減少50%左右的文件大小:

2、全AE特性支持
PAG支持矢量和序列幀的混合導出。設計師可以按圖層標記導出類型,從而實現支持所有的AE特性又能保持運行時的可編輯性。

為了在實現混合導出后,盡可能壓縮序列幀的大小。PAG內部設計了視頻序列幀的格式,充分利用了視頻的極限幀間壓縮能力,并擴展了透明通道的支持。另外,視頻的格式還可以在運行時利用硬件加速解碼,從而獲得更高的渲染性能。

最后再通過導出插件在視頻編碼器上的針對性優化,最終做到了相比傳統圖片序列幀僅1.24%左右的文件大小。
3、桌面效率工具完善

PAG提供的AE導出插件PAGExporter內置了40多種自動優化和提醒策略。例如自動縮小圖片資源的分辨率,彈窗提醒相鄰的序列幀圖層可以合并等等。這些優化策略還在持續地增加,這樣可以在導出的環節就進行性能把關。
而桌面預覽工具PAGViewer確保了渲染結果跟移動端完全一致,這樣設計師可以所見即所得地生產素材,而不需要上線來回確認。并且提供性能監測面板,能夠直觀地看到每個素材量化的性能指標,并配套說明了各種指標的優化方向。最后通過服務端文件性能校驗接口,業務方可以把它與素材管理端進行整合,在上傳素材時自動判斷素材性能是否合格,將性能把關做到全自動化。經過這一系列自動化工具的配合,設計師就能夠獨立地進行素材生產,制作出效果和性能均優異的動畫素材。

五大應用場景,輕松玩轉PAG
說了這么多,PAG具體是如何靈活應用到動畫制作場景中呢?
讓我們來看看具體的應用效果吧~
1、UI動畫

上圖右下角的Pick按鈕,就是一個利用PAG實現的可交互UI動畫效果,支持設計師編程控制進度、文本內容,從而做到對整個動畫完全把控,研發只需要替換預設的文本內容即可。并且文件體積非常小,僅2KB左右。
2、貼紙字幕

目前,絕大部分的視頻編輯App,在貼紙字幕這塊的實現都分為兩種類型,要么貼紙有豐富的動效,但不可編輯;要么可以編輯文本,但只有靜態或者簡單的動效,大大束縛了設計師,降低了視頻的整體觀感。而PAG方案讓貼紙有精美動效的前提下,還可以保持強大的編輯性,讓使用者的個性化元素得到更好的呈現。
3、照片模板

PAG支持將內置的圖片作為占位圖替換,并保留所有動畫效果。因此可以將整個PAG動畫設計成一個照片模板,把想要的照片替換進去,自動套用效果生成視頻。這個功能可以取代原先需要研發手動還原的動態相冊的能力,讓設計師批量化生產,提升效率。
4、視頻模板


視頻模板仍然基于圖片替換原理,但特別的是,PAG支持將占位圖替換為視頻。比如這個高樓求愛的模板,設計師能夠一鍵將自己的視頻貼到一座大廈的墻面上。這樣通過快速套用各種節日主題的視頻效果,能夠及時抓住各類運營熱點。
5、智能剪輯

智能剪輯是圍繞用戶上傳的視頻內容,生成定制化的模板,模板本身是不固定的,可以從多個PAG文件組合而成,類似活字印刷。設計師可以利用這個特性,構建自己的特效組件庫,然后對接AI的識別能力,根據一定規則組合得到無限數量的模板效果,可以做到一鍵出片。這塊目前的典型應用場景是王者榮耀的周戰報功能,隨機生成游戲高光時刻視頻。
四、總結
PAG方案提供了一套簡化并完善的動畫工作流,在縮小文件體積的情況下,仍然支持所有AE特性,并保留了動畫運行可編輯的靈活性。接入一次,設計師就可以復用PAG經過3年積累的AE動畫原子能力,組合出無限的視覺動效,不用再因為代碼還原成本的問題而對效果打折扣。再加上桌面效率工具在效果預覽和性能檢測上的易用性,極大提升了動畫相關需求的生產效率和視覺表現。
作為騰訊PCG發布器中臺下三大組件之一,PAG已經在騰訊微視,手機QQ,王者榮耀等數十款產品中落地使用。包含微信在內的多個團隊,也都積極參與該項目的協同共建,齊心協力,不斷打磨這款動畫開發利器。相信隨著PAG的不斷迭代,將持續為動畫設計師及開發工程師們技術賦能,實現更多天馬行空的動畫效果,助力動畫產業進一步發展。
說了這么多關于PAG的介紹,大家是不是迫不及待地想體驗一把PAG的神奇應用呢?
別著急,同學們現在可以通過官網下載插件體驗啦!下載地址:https://pag.io






