AE動效如何落地?原來大廠設計師都在用這個!

導語

動效設計是UI設計中不可或缺的一環。隨著硬體性能的發展和動效輸出方式的優化，大家對動效的認知也從最初的認為動效只是為了美觀酷炫，到逐漸認識到動效對於提升用戶體驗和產品需求的重要作用。

但設計師在做動效設計的時候靈感噴湧，兢兢業業做出炫酷的效果，結果一和開發工程師對接就懵了——要麼無法實現，要麼極其複雜。特別是AE裡有很多複雜動效，使用純代碼還原起來非常困難，導致最後設計師只能不斷簡化效果以達到跟開發成本的平衡。

一、傳統AE設計難點及解決方案

傳統的AE設計，總結下來有以下三個核心痛點：

? 研發成本高：每個動效都需要研發通過代碼來還原，單獨排期的特效以及手工配置還原的過程，包括後續復用及改動都需要大量的研發人力持續投入。

? 生產周期長：設計師和研發人員需要反覆確認效果還原度。這樣很難跟上運營節奏，容易錯過時事熱點。

? 視覺動效弱：AE裡有很多複雜動效，使用純代碼還原成本高、維護難度大，設計師只能簡化特效來推進實現開發。

就這些問題，騰訊PCG發布器中臺主導研發了一款動畫開發「神器」—PAG。為設計師提供 AE 導出插件和桌面預覽工具，支持 AE 一切特效。

PAG作為一套完整的動畫工作流，誕生之初就是為了降低或消除動畫相關的研發成本，打通設計師創作到素材交付上線的極速流程，不斷輸出運行時可編輯的高質量動畫內容。

PAG提供從AE導出插件，到桌面預覽工具，再到iOS和Android端的渲染SDK。AE設計師運用PAG實現批量化製作動畫素材，再通過導出PAG插件，到桌面預覽工具進行微量調整，從而提高了動畫的製作效率以及精度。

二、PAG亮點介紹

PAG 方案有完善的工具鏈支持，AE插件支持混合導出能力，無論是表達式、粒子動畫還是 3D插件，只要 AE做的出，PAG 都可以導出。另外導出相同的動畫內容，PAG動畫文件的體積會顯著小於其他方案，並且在解碼速度和渲染性能上都更高。

以下為幾點核心優勢：

1、動畫文件小：首先任何素材文件都是越小越好。在素材下發的使用場景裡，更小的文件能夠節省用戶的下載流量和時長。而如果內置到App裡的，這時候包體大小就直接影響增長拉新的數據了，所以動畫壓縮率非常關鍵。PAG在同樣動畫內容導出方面比其他方案平均可以小50%。

並且由於採用了二進位的數據結構，能單文件集成所有相關動畫資源，讓設計師交付素材時候只需發送一個文件，不在需再要外掛圖片音頻等資源，這樣能夠提高工作流文件傳遞的效率。

2、全AE特性支持：

①完整還原AE渲染系統：針對AE很多複雜動效，使用純代碼還原起來非常困難。設計師只能不斷簡化效果以達到跟開發成本的平衡，導致最終上線的視覺效果都是打過折扣的，不達設計預期。而PAG的SDK已經完全還原了AE整個動畫的渲染系統，能夠支持所有AE特性，設計師可以充分利用AE動畫的原子能力，組合出無限的視覺動效，不用因為代碼還原成本的問題而打折扣。

②支持矢量和序列幀的混合導出：PAG除了在矢量導出上比同類型方案支持更加完善外，還創新性地實現了矢量和序列幀的混合導出能力，設計計可以主動標記哪些圖層使用序列幀導出，例如不需要編輯並且有複雜的動效，而需要編輯的圖層繼續用簡單的矢量方式導出。從而實現支持所有的AE特性又能保持運行時的編輯性。

3、 完善便捷的編輯工具，支持實時預覽以及性能可視化：往往AE設計師跟研發聯調非常費勁，例如設計圖需要給到研發同學上架素材才能看到最終效果，效果反覆確認耗時久；或者不知道如何優化性能，一直改都無法滿足開發需求，需要不斷與研發同學溝通。

但如果通過PAG的自助工具，就能做到所見即所得地生產動畫內容。首先，桌面預覽工具確保了在所有端上渲染效果的一致性，設計師無需把素材提交上線就能看到最終準確的動畫效果。

其次PAG 的導出插件內置了40多種自動優化和提醒的策略，這樣可以在導出的環節就幫助設計師進行性能把關。並且還在預覽工具裡提供性能可視化面板，能夠直觀地看到每個素材量化的性能指標，並配套說明了各種指標的優化方向。

讓設計師可以獨立完成動畫內容交付，高效輔助設計師製作出性能和效果俱佳的動畫內容，避免來回返工。

三、總結

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

說了這麼多關於PAG的介紹，大家是不是迫不及待地想體驗一把PAG的神奇應用呢？別著急，同學們現在可以通過官網下載插件體驗啦！

（責任編輯：李顯傑 ）