導語
動效設計是UI設計中不可或缺的一環(huán)。隨著硬件性能的發(fā)展和動效輸出方式的優(yōu)化,大家對動效的認知也從最初的認為動效只是為了美觀酷炫,到逐漸認識到動效對于提升用戶體驗和產(chǎn)品需求的重要作用。
但設計師在做動效設計的時候靈感噴涌,兢兢業(yè)業(yè)做出炫酷的效果,結果一和開發(fā)工程師對接就懵了——要么無法實現(xiàn),要么極其復雜。特別是AE里有很多復雜動效,使用純代碼還原起來非常困難,導致最后設計師只能不斷簡化效果以達到跟開發(fā)成本的平衡。
一、傳統(tǒng)AE設計難點及解決方案
傳統(tǒng)的AE設計,總結下來有以下三個核心痛點:
• 研發(fā)成本高:每個動效都需要研發(fā)通過代碼來還原,單獨排期的特效以及手工配置還原的過程,包括后續(xù)復用及改動都需要大量的研發(fā)人力持續(xù)投入。
• 生產(chǎn)周期長:設計師和研發(fā)人員需要反復確認效果還原度。這樣很難跟上運營節(jié)奏,容易錯過時事熱點。
• 視覺動效弱:AE里有很多復雜動效,使用純代碼還原成本高、維護難度大,設計師只能簡化特效來推進實現(xiàn)開發(fā)。
就這些問題,騰訊PCG發(fā)布器中臺主導研發(fā)了一款動畫開發(fā)“神器”—PAG。為設計師提供 AE 導出插件和桌面預覽工具,支持 AE 一切特效。
PAG作為一套完整的動畫工作流,誕生之初就是為了降低或消除動畫相關的研發(fā)成本,打通設計師創(chuàng)作到素材交付上線的極速流程,不斷輸出運行時可編輯的高質(zhì)量動畫內(nèi)容。
PAG提供從AE導出插件,到桌面預覽工具,再到iOS和Android端的渲染SDK。AE設計師運用PAG實現(xiàn)批量化制作動畫素材,再通過導出PAG插件,到桌面預覽工具進行微量調(diào)整,從而提高了動畫的制作效率以及精度。
二、PAG亮點介紹
PAG 方案有完善的工具鏈支持,AE插件支持混合導出能力,無論是表達式、粒子動畫還是 3D插件,只要 AE做的出,PAG 都可以導出。另外導出相同的動畫內(nèi)容,PAG動畫文件的體積會顯著小于其他方案,并且在解碼速度和渲染性能上都更高。
以下為幾點核心優(yōu)勢:
1、動畫文件?。菏紫热魏嗡夭奈募际窃叫≡胶?。在素材下發(fā)的使用場景里,更小的文件能夠節(jié)省用戶的下載流量和時長。而如果內(nèi)置到App里的,這時候包體大小就直接影響增長拉新的數(shù)據(jù)了,所以動畫壓縮率非常關鍵。PAG在同樣動畫內(nèi)容導出方面比其他方案平均可以小50%。
并且由于采用了二進制的數(shù)據(jù)結構,能單文件集成所有相關動畫資源,讓設計師交付素材時候只需發(fā)送一個文件,不在需再要外掛圖片音頻等資源,這樣能夠提高工作流文件傳遞的效率。
2、全AE特性支持:
①完整還原AE渲染系統(tǒng):針對AE很多復雜動效,使用純代碼還原起來非常困難。設計師只能不斷簡化效果以達到跟開發(fā)成本的平衡,導致最終上線的視覺效果都是打過折扣的,不達設計預期。而PAG的SDK已經(jīng)完全還原了AE整個動畫的渲染系統(tǒng),能夠支持所有AE特性,設計師可以充分利用AE動畫的原子能力,組合出無限的視覺動效,不用因為代碼還原成本的問題而打折扣。
②支持矢量和序列幀的混合導出:PAG除了在矢量導出上比同類型方案支持更加完善外,還創(chuàng)新性地實現(xiàn)了矢量和序列幀的混合導出能力,設計計可以主動標記哪些圖層使用序列幀導出,例如不需要編輯并且有復雜的動效,而需要編輯的圖層繼續(xù)用簡單的矢量方式導出。從而實現(xiàn)支持所有的AE特性又能保持運行時的編輯性。
3、 完善便捷的編輯工具,支持實時預覽以及性能可視化:往往AE設計師跟研發(fā)聯(lián)調(diào)非常費勁,例如設計圖需要給到研發(fā)同學上架素材才能看到最終效果,效果反復確認耗時久;或者不知道如何優(yōu)化性能,一直改都無法滿足開發(fā)需求,需要不斷與研發(fā)同學溝通。
但如果通過PAG的自助工具,就能做到所見即所得地生產(chǎn)動畫內(nèi)容。首先,桌面預覽工具確保了在所有端上渲染效果的一致性,設計師無需把素材提交上線就能看到最終準確的動畫效果。
其次PAG 的導出插件內(nèi)置了40多種自動優(yōu)化和提醒的策略,這樣可以在導出的環(huán)節(jié)就幫助設計師進行性能把關。并且還在預覽工具里提供性能可視化面板,能夠直觀地看到每個素材量化的性能指標,并配套說明了各種指標的優(yōu)化方向。
讓設計師可以獨立完成動畫內(nèi)容交付,高效輔助設計師制作出性能和效果俱佳的動畫內(nèi)容,避免來回返工。
三、總結
作為騰訊PCG發(fā)布器中臺下三大組件之一,PAG已經(jīng)在騰訊微視,手機QQ,王者榮耀等數(shù)十款產(chǎn)品中落地使用。包含微信在內(nèi)的多個團隊,也都積極參與該項目的協(xié)同共建,齊心協(xié)力,不斷打磨這款動畫開發(fā)利器。相信隨著PAG的不斷迭代,將持續(xù)為動畫設計師及開發(fā)工程師們技術賦能,實現(xiàn)更多天馬行空的動畫效果,助力動畫產(chǎn)業(yè)進一步發(fā)展。
說了這么多關于PAG的介紹,大家是不是迫不及待地想體驗一把PAG的神奇應用呢?別著急,同學們現(xiàn)在可以通過官網(wǎng)下載插件體驗啦!下載地址:https://PAG.io
申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點子。點擊此處,共同探討創(chuàng)業(yè)新機遇!