作為一名“失蹤人口”，上次發(fā)帖還是在18年的時候，還沒緩過神，這幾年就過去了。仔細(xì)想想，這幾年的工作內(nèi)容包羅萬象：視頻模板音兔、3D禮物動畫、虛擬角色avatar、游戲宣傳PV、NFT等，也算是經(jīng)歷了項(xiàng)目的摧殘，熬成了一名老設(shè)計(jì)。引用一句經(jīng)典的話語，“擁抱變化”，我想一名成熟的設(shè)計(jì)，無疑得是能在多種項(xiàng)目中摸爬，練就一身武藝。
在之前的項(xiàng)目中，作為一名多媒體設(shè)計(jì)，無法避免的得和開發(fā)打交道的，那么經(jīng)典三件套：GIF/序列幀/lottie也都有在各種項(xiàng)目中運(yùn)用，關(guān)于三者的優(yōu)劣特色，網(wǎng)絡(luò)上好文數(shù)不勝數(shù)，就不贅述了，這次主要是想分享今年項(xiàng)目引入的新技術(shù)，也是本文重點(diǎn)講解的工具：【PAG】
項(xiàng)目背景
《全民k歌》是國內(nèi)的一款主打唱歌的移動端軟件，近幾年也在擁抱視頻化進(jìn)程，推出了歌詞海報(bào)、視頻動畫等短視頻模板功能。
在之前的模板制作過程中，我們一直遵循“古法工藝”：
這就導(dǎo)致了繁瑣的制作流程，反反復(fù)復(fù)的還原檢查，以及和開發(fā)永遠(yuǎn)也掰頭不完的一句話：你這動畫曲線還原的不行??！也有同學(xué)會在這說使用CSS動畫曲線即可，但客戶端受到各種因素制約，算法工程師無法直接調(diào)用，只能手搓代碼去盡可能還原動畫標(biāo)注，但終究是很難完美實(shí)現(xiàn)，所以現(xiàn)在K歌上的歌詞模板，只是設(shè)計(jì)和開發(fā)妥協(xié)的產(chǎn)物。
除了動畫曲線外，最終資源包還會受到文件體積限制：圖片清晰度、循環(huán)幀長度、轉(zhuǎn)場數(shù)量、貼圖疊加圖層等需要考慮的因素。這些負(fù)面影響，都在不斷的為最終輸出減分。因此我們一直在尋求新技術(shù)來解決這些痛點(diǎn)，直到看到騰訊發(fā)布的全新動畫方案—PAG!
主流動畫格式對比
從設(shè)計(jì)側(cè)主要應(yīng)用功能來講，lottie和PAG能滿足常規(guī)需求，其中PAG比較吸引我的功能主要3點(diǎn)：
1.特效圖片自動合成并能輸出
我們以常見的粒子為例，當(dāng)制作完成后，我們嘗試導(dǎo)出
可以發(fā)現(xiàn)無論是導(dǎo)出json或是svga的時候，這些插件對于AE特效效果無能為力，而AE之所以強(qiáng)大，也是體現(xiàn)在其豐富的擴(kuò)展插件上，如果因?yàn)闊o法導(dǎo)出這些效果而放棄使用，實(shí)在是可惜。而且這些效果的缺失，也會使得畫面呈現(xiàn)效果大打折扣。
如果輸出PNG序列幀，再用序列幀一幀一幀的擺放到時間軌，也能用json等導(dǎo)出，但是為何不直接導(dǎo)出序列即可呢？而且萬一是個幾百幀的序列文件，光是擺上時間軸的工作，也是相當(dāng)折磨人的。
反觀PAG這邊，只需要對合成名字添加【_bmp】后綴，輸出的時候即可自動轉(zhuǎn)碼，全自動輸出，省時省力。
重要的是：支持插件效果的輸出！支持插件效果的輸出！支持插件效果的輸出！
2.強(qiáng)大的壓縮性能
我們接著上面的粒子案例講述。
當(dāng)效果完成后，落地是非常重要的過程。無法落地的動效，那只能成為飛機(jī)稿。
上述的粒子煙花，導(dǎo)出序列接近7兆，即使用第三方軟件壓縮，也只能控制在2兆左右
而我們用PAG去輸出，只有580K
對接過開發(fā)的同學(xué)應(yīng)該都知道，開發(fā)對于文件體積的限制那可謂是做到了極致。從設(shè)計(jì)的角度而言，我們可能更關(guān)注效果，而過大的文件體積，會導(dǎo)致更高的性能劃線，許多低端機(jī)型也許只能用降級方案，常見的就是高端機(jī)展示動畫，低端機(jī)展示靜幀。對于用戶而言，效果的缺失自然而然也談不上多好的用戶體驗(yàn)。
2兆的序列幀對比580K的pag，優(yōu)異的壓縮性能，能照顧到更多的低端機(jī)用戶。
上述的粒子是位圖，PAG已經(jīng)展現(xiàn)了優(yōu)秀的壓縮效率，當(dāng)我們以矢量效果制作的時候，pag依然領(lǐng)先。
3.完善的自檢工具
我們依然以小球動畫為例
SVGA和lottie只能預(yù)覽，無法性能評估
而PAG的輸出文件，雙擊預(yù)覽，即可調(diào)用專用播放器，能很直觀的展示持續(xù)時間、幀速率、寬高、顯存性能等。
設(shè)計(jì)和開發(fā)互相看不對眼，因素之一就在于開發(fā)吐槽設(shè)計(jì)性能消耗太大，砍掉了做好的動畫。雖說很多項(xiàng)目在開始前會讓開發(fā)介入做性能評估，但是對于能否落地，以及是否真的是因?yàn)樾阅芟奶鬅o法上線，對于設(shè)計(jì)而言都是黑盒。
而PAG完善的自檢工具，對于性能的消耗一目了然，后續(xù)只需要擬定好性能消耗劃線，那么設(shè)計(jì)也能更好的根據(jù)劃線去制作動畫。
案例展示
下面我結(jié)合具體的模板案例，來展示一下PAG的動畫優(yōu)勢
我們先去PAG官網(wǎng)下載插件：https://pag.io
選擇對應(yīng)的平臺版本，我這邊選擇了MAC插件，當(dāng)安裝完成后，從應(yīng)用程序啟動PAG Viewer
點(diǎn)擊左上角即可安裝AE插件
在AE的具體制作過程中，將固定不變的素材內(nèi)容裝入一個合成即可，我們并不需要更改自己的制作習(xí)慣，PAG插件在人性化上是非常值得稱贊的，基本沒有學(xué)習(xí)成本。
當(dāng)安裝上最新版的PAG插件后，選用panel導(dǎo)出方式
在彈出的菜單中，我們可以把使用了插件的合成層，勾選bmp，PAG插件就會自動執(zhí)行轉(zhuǎn)換，把AE第三方插件效果，轉(zhuǎn)換為可導(dǎo)出的內(nèi)容，這樣就做到了svga和lottie做不到的事。
下面畫框內(nèi)的安子代表用戶素材，可替換任意圖片或者視頻
音軌部分，我們和開發(fā)的溝通，因?yàn)樵谀０逯谱髦校糗壩募枪潭ǖ?，所以我們只需要把音效疊加在背景音樂音軌上即可，將整條音頻對齊第1幀，即可讓音畫同步。
整個制作流程，因?yàn)镻AG能自動將特效圖層轉(zhuǎn)化，無需導(dǎo)出序列幀制作偽lottie，所以對設(shè)計(jì)師而言能省事不少，同樣對于粒子、煙火等效果，也能通過_bmp標(biāo)簽帶出，使得畫面內(nèi)容更加豐富。
有空的同學(xué)可以看看pag.io/docs/install.html，里面有詳細(xì)的安裝過程、規(guī)范信息等，方便和開發(fā)對齊后續(xù)流程。
效率對比
在引入了PAG后，我們的制作流程也從古法工藝，進(jìn)化到了現(xiàn)代工藝，最明顯的就是效率的提升
舊制作流程：
視覺定稿+設(shè)計(jì)demo+設(shè)計(jì)改稿=2天
開發(fā)文檔=1天
開發(fā)還原+調(diào)試+正式發(fā)包=2-3天
所有工期加起來，也是按周為單位去計(jì)算的了，對于分分秒秒都有大事件的互聯(lián)網(wǎng)來說，這個工期實(shí)在是太慢
新制作流程：
視覺定稿+設(shè)計(jì)demo+設(shè)計(jì)改稿=2天 即可直接發(fā)布PAG包上線
并且最主要的是開發(fā)的效果只能近似，而PAG的動畫能完美還原~
在引入PAG后，K歌的模板產(chǎn)出能力，從6天提升到了2天，效率翻了3翻（卷起來了~）
互聯(lián)網(wǎng)行業(yè)，時間就是生命，熱點(diǎn)都跟不上，怎么卷贏競品？高效的產(chǎn)出，能更好的結(jié)合時事熱點(diǎn)，制作出新穎的設(shè)計(jì)，為公司產(chǎn)品帶來持久的活力。
總結(jié)
對于動效設(shè)計(jì)來說，甚至對于所有設(shè)計(jì)來說，工具只是實(shí)現(xiàn)效果的一個途徑，但是好的工具，事半功倍。PAG的出現(xiàn)，給了動效設(shè)計(jì)一個新的選擇，而我們也不再局限于只能制作矢量動畫，聲光、煙霧、粒子、火花等等的效果，都將使我們的設(shè)計(jì)產(chǎn)出，更加精彩。有了PAG，動效設(shè)計(jì)將擁有無限可能。
最后附上PAG官方的QQ交流群，各位同學(xué)如果對PAG有使用交流或者功能建議，歡迎加群探討。讓我們一起把PAG打磨的更加強(qiáng)大，讓更多用戶感受動效之美。
愿各位新年虎虎生威，2022，不負(fù)年華
Powered by Froala Editor
設(shè)計(jì)部墊底的存在
19
作品
2058
粉絲
86
關(guān)注
分享能獲取更多贊？
大牛，別默默的看了，快登錄幫我點(diǎn)評一下吧！:)
登錄 立即注冊