2022-5-10 純純
在終端APP中，動畫非常常見，它可以輔助視覺制造焦點，同時也可以讓用戶交互更加順滑，但動畫的實現(xiàn)卻是設(shè)計師和研發(fā)群體的一個痛點。如何輔助設(shè)計師設(shè)計高性能炫酷的動畫、如何將設(shè)計師設(shè)計的動畫準(zhǔn)確無誤的還原到終端APP上是業(yè)界不斷探索和解決的問題。
圖1 傳統(tǒng)動畫實現(xiàn)流程圖
當(dāng)前最好的動畫設(shè)計軟件是Adobe After Effects（簡稱AE），從AE動畫制作到終端APP呈現(xiàn)，傳統(tǒng)的實現(xiàn)方式如圖1所示，有三大痛點：實現(xiàn)成本高、溝通成本高和性能難以保證。
近幾年，業(yè)界誕生了像Lottie、SVGA這樣的動畫工作流解決方案，雖然在一定程度上提升了生產(chǎn)效率，但存在AE支持能力有限、動畫性能難以保證、配套工具支持有限的問題。
PAG（Portable Animated Graphics）是騰訊PCG發(fā)布器中臺自主研發(fā)的一套完整的動畫工作流解決方案，助力于將AE動畫方便快捷的應(yīng)用于各平臺終端。PAG的流程圖如圖2所示，設(shè)計師在AE上設(shè)計出動畫后，可以通過導(dǎo)出插件導(dǎo)出pag文件，同時PAG提供了桌面端預(yù)覽工具，支持實時預(yù)覽效果，在確認(rèn)效果后，通過運行配置上線，各平臺終端可以通過PAG SDK加載渲染pag動畫。
圖2 PAG動畫工作流流程圖
與Lottie、SVGA相比，PAG增加支持了服務(wù)端。除此之外，如圖3所示，PAG動畫方案在導(dǎo)出動畫文件大小、AE特性支持和可編輯性方面具有較大的優(yōu)勢。
圖3 PAG和Lottie對比圖
和Lottie、SVGA實現(xiàn)不同的是，PAG不依賴平臺端渲染接口，可以實現(xiàn)各平臺的渲染一致性。PAG與Lottie、SVGA的矢量能力支持如附表1《AE特性能力支持》所示。
無論是PAG還是Lottie、SVGA，所支持的AE特性僅僅是AE眾多特性中的很少的一部分，這在一定程度上限制了設(shè)計師的創(chuàng)造力。針對這個問題，PAG新增了BMP預(yù)合成的導(dǎo)出方式，支持導(dǎo)出所有AE特性，適用于不可編輯的場景。其原理如圖4所示，在合成的層面將渲染結(jié)果截取成圖片，然后進(jìn)行視頻編碼。
圖 4 BMP預(yù)合成原理圖
針對視頻不支持透明通道而動畫需要包含透明通道的問題，在編碼的層面擴展了透明通道的支持，如圖5所示。
圖6 PAG矢量和BMP預(yù)合成混合導(dǎo)出
針對導(dǎo)出動畫和AE設(shè)計動畫存在偏差的問題，PAG導(dǎo)出插件增加了使用了不支持AE特性提醒功能，如下圖7所示。
圖7 PAG導(dǎo)出面板
在預(yù)覽界面，同樣有不支持特性的提示，如圖8所示。
圖8 PAG導(dǎo)出面板預(yù)覽窗口
在使用AE設(shè)計動畫的過程中，設(shè)計師可以方便快捷的提前查看使用了那些不支持直接導(dǎo)出的AE特性，換種實現(xiàn)方式或者導(dǎo)出成BMP預(yù)合成，有效的解決了設(shè)計動畫和導(dǎo)出動畫存在偏差的問題。
在AE動畫設(shè)計的過程中，PAG導(dǎo)出面板提供了一鍵設(shè)置BMP預(yù)合成的方法，如下圖9所示。需要提示的是，一旦設(shè)置了BMP預(yù)合成，該合成中的文本和圖片將不能再被用戶編輯。
圖9 BMP 預(yù)合成設(shè)置
由于BMP預(yù)合成可能會影響到可替換圖片的數(shù)量，PAG同時會實時更新可替換圖片的數(shù)量給設(shè)計以提示。
在用pag設(shè)置的素材中，經(jīng)常會遇到用戶填充的圖片與默認(rèn)占位圖尺寸不一致的情況，在導(dǎo)出面板中PAG增加圖片填充的四個規(guī)則，如圖10所示：
圖10 可替換圖片填充設(shè)置
其中：
不縮放：畫面不縮放，從左上角位置開始裁剪
黑邊：在保持高寬比的情況下縮放到設(shè)備的可用屏幕大小，圖像不發(fā)生變形，如果圖片尺寸和填充區(qū)域比例不一致，會出現(xiàn)黑邊，為默認(rèn)填充模式
拉伸：不保持寬高比填充，會發(fā)生失變形
裁剪：在保持高寬比的情況下縮放到完全填滿可用的屏幕大小
具體效果如圖11所示。
圖11 圖片填充效果圖
PAGViewer支持桌面端預(yù)覽PAG文件動畫效果，如下圖所示。支持查看動畫文件中包含有多少個可編輯文本和可編輯圖片，且支持設(shè)計師本地填充素材，實時預(yù)覽填充效果，無需等待上線后才能確認(rèn)真實效果。圖片占位圖支持填充圖片或視頻，如果PAG文件內(nèi)置了音頻文件，支持播放音頻效果。具體效果如圖12所示。
圖12 PAG效果預(yù)覽
在pag動畫實際使用的過程中，PAG經(jīng)常遇到的問題是設(shè)計師辛辛苦苦設(shè)計的動畫在終端上性能表現(xiàn)不佳，需要進(jìn)行返工優(yōu)化，同樣的問題在使用Lottie方案時候也會存在。
除了效果預(yù)覽，PAGViewer還增加了性能展示面板，可以很方便的看到pag動畫的基本信息，如時長、幀率、尺寸、bmp預(yù)合成的數(shù)量，圖層總數(shù)等，還有量化的性能指標(biāo)，定量的評估pag文件的性能，如圖13所示，方便設(shè)計師進(jìn)行針對性的優(yōu)化，而不需要等到上線前才會暴露性能問題。具體效果如圖13所示。
圖13 PAG性能展示面板
目前PAG方案已經(jīng)廣泛應(yīng)用于騰訊公司內(nèi)外幾十款產(chǎn)品中，涵蓋了眾多的國民級應(yīng)用。
總結(jié)下來，PAG目前主要使用在以下幾大場景：
圖15 UI動畫場景
設(shè)計師設(shè)計出動畫文件后，研發(fā)只需要替換預(yù)設(shè)的文本內(nèi)容即可，并且文件體積非常小。
圖16 貼紙動畫場景
圖17 照片/視頻模板場景
PAG支持將內(nèi)置的圖片作為占位圖替換，并保留所有動畫效果。因此可以將整個PAG動畫設(shè)計成一個模板，把預(yù)設(shè)的占位圖替換成用戶選取的照片，自動套用效果生成視頻。全程可以讓設(shè)計師自由批量生產(chǎn)模板，無需研發(fā)介入。
仍然基于圖片替換原理，PAG也支持將占位圖替換為視頻，實現(xiàn)視頻模板功能。
圖18 智能剪輯場景
智能剪輯是圍繞用戶上傳的視頻內(nèi)容，生成定制化的模板，模板本身是不固定的，可以從多個PAG文件組合而成，類似活字印刷。設(shè)計師可以利用這個特性，構(gòu)建自己的特效組件庫，然后對接AI的識別能力，根據(jù)一定規(guī)則組合得到無限數(shù)量的模板效果，可以做到一鍵出片。這塊目前的典型應(yīng)用場景是王者榮耀的周戰(zhàn)報功能，隨機生成游戲高光時刻視頻。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、
UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍(lán)藍(lán)設(shè)計的小編 http://bouu.cn