sdk|王者QQ微信都在用的動(dòng)畫神器要開(kāi)源了:把交付時(shí)間縮短90%( 三 )
PAG究竟是怎么解決它們的?
我們與PAG的研發(fā)團(tuán)隊(duì)、騰訊PCG發(fā)布器中臺(tái)下編輯子工作組的負(fù)責(zé)人Dom取得了聯(lián)系,了解了背后的實(shí)現(xiàn)原理。
PAG背后的技術(shù)門道Dom表示,PAG早期最有挑戰(zhàn)的地方,其實(shí)就在于“動(dòng)畫文件設(shè)計(jì)”和“全AE特性支持”這兩部分。
高效動(dòng)畫文件
在輸出文件格式方面,已有的JSON等格式存在兩大問(wèn)題:解碼速度慢、壓縮率低。
為此,團(tuán)隊(duì)重新設(shè)計(jì)了一種名為.pag的文件格式,采用二進(jìn)制數(shù)據(jù)結(jié)構(gòu)來(lái)存儲(chǔ)動(dòng)畫信息。
一方面,二進(jìn)制數(shù)據(jù)結(jié)構(gòu)不需要做字符串匹配、序列化等操作,解碼速度會(huì)比JSON等格式的文件快上許多。測(cè)試數(shù)據(jù)顯示,在解碼速度上,PAG格式的動(dòng)畫文件要比JSON文件快12倍。
另一方面,相比于JSON,二進(jìn)制數(shù)據(jù)結(jié)構(gòu)具有更高的壓縮率。
JSON文件導(dǎo)出的冗余信息較多,而二進(jìn)制的數(shù)據(jù)結(jié)構(gòu)則能跳過(guò)大量默認(rèn)值存儲(chǔ),并使用動(dòng)態(tài)比特位來(lái)緊湊存儲(chǔ)。因此相同的動(dòng)畫內(nèi)容,PAG文件比同類型方案壓縮文件小50%左右。
此外,采用二進(jìn)制數(shù)據(jù)結(jié)構(gòu)還有一個(gè)額外的好處,在導(dǎo)出動(dòng)畫文件時(shí)不用再搭配“圖片包”(外掛圖片),一個(gè)文件就能搞定,包括音頻也能夠內(nèi)置。

文章插圖
全AE特性支持
說(shuō)完文件格式,再來(lái)看看PAG文件是如何做到支持所有AE效果的。
這個(gè)特性使得PAG文件既能實(shí)時(shí)預(yù)覽復(fù)雜特效,又能確保動(dòng)畫的可編輯性,但在之前,它們并不能同時(shí)被實(shí)現(xiàn)。
這是因?yàn)閭鹘y(tǒng)的動(dòng)畫的導(dǎo)出模式有兩種,即矢量導(dǎo)出和序列幀導(dǎo)出。
矢量導(dǎo)出的動(dòng)畫文件具有可編輯性,但缺點(diǎn)是一些復(fù)雜特效無(wú)法在移動(dòng)端實(shí)時(shí)預(yù)覽,因此無(wú)法做到全AE特性支持。
序列幀導(dǎo)出基于截圖的原理解決了這個(gè)問(wèn)題,也就是將復(fù)雜的視覺(jué)動(dòng)效全部截成圖片,再實(shí)現(xiàn)導(dǎo)出。但這就導(dǎo)致文件大小可能高達(dá)幾十上百兆,對(duì)移動(dòng)端而言“又大,又沒(méi)法編輯”。
為了讓文件既可以編輯,又能保證精彩動(dòng)態(tài)效果的實(shí)現(xiàn),PAG的研發(fā)人員們想到了混合導(dǎo)出的方法。
簡(jiǎn)單來(lái)說(shuō),就是給不需要可編輯性的圖層打標(biāo)記。這樣在導(dǎo)出時(shí),需要保留編輯性的圖層就會(huì)以純矢量形式被導(dǎo)出,而打了標(biāo)記的圖層,則以序列幀的方式導(dǎo)出。

文章插圖
值得一提的是,為了盡可能壓縮導(dǎo)出文件的大小,PAG團(tuán)隊(duì)還自己設(shè)計(jì)了bmp預(yù)合成的格式,充分利用了視頻的極限幀間壓縮能力,并在此基礎(chǔ)上擴(kuò)展了對(duì)透明通道的支持。
再加上渲染方面的優(yōu)化,最終,相比于傳統(tǒng)圖片序列幀,視頻序列幀格式的文件大小可以降低到原來(lái)的1.24%左右。

文章插圖
但從基礎(chǔ)功能的實(shí)現(xiàn),到如今成為一整套完整的工具流,PAG并非“一蹴而就”。
與之相反,雖然SDK去年才開(kāi)始對(duì)外開(kāi)放,但早在2016年,PAG的第一行代碼就已經(jīng)寫下。
從最初的1.0版本迭代到如今的形態(tài),PAG已經(jīng)走過(guò)了4個(gè)版本。
“被battle出來(lái)的產(chǎn)品”“從寫下第1行代碼,到第1次跑通,團(tuán)隊(duì)就用了6個(gè)月時(shí)間。”
至于為何要選擇堅(jiān)持打磨這樣一款工具產(chǎn)品,Dom提到了一個(gè)“回憶殺”的詞語(yǔ)Flash:
在Flash時(shí)代,動(dòng)效開(kāi)發(fā)有一套非常完善的工作流:設(shè)計(jì)師把動(dòng)畫制作出來(lái),導(dǎo)出一個(gè)SWF文件,開(kāi)發(fā)人員無(wú)需手敲代碼還原效果,直接導(dǎo)入就能使用。并且動(dòng)效里面的細(xì)節(jié)是可以調(diào)整的。
但到了現(xiàn)在的H5、移動(dòng)應(yīng)用開(kāi)發(fā)里,很少有工具能夠完整還原這套完善的動(dòng)畫工作流。
相關(guān)經(jīng)驗(yàn)推薦
- 彼端|cos:王者榮耀妲己時(shí)之彼端cos正片@秋楚楚
- 公孫離|cos:王者榮耀公孫離國(guó)風(fēng)少女cos正片@nico醬
- 光之國(guó)|光之國(guó)的王牌,科技改變力量,希卡利是如何一步步成為王者的呢?
- 甄姬|cos:王者榮耀甄姬游園驚夢(mèng)cos正片@小魚(yú)
- 公孫離|cos:王者榮耀公孫離花間舞cos正片@四娘
- kpl|cos:王者榮耀上官婉兒kpl限定皮膚天狼繪夢(mèng)者cos正片
- |cos:王者榮耀西施cos正片@敲可愛(ài)噠nico醬
- 同人|cos:王者榮耀虞姬啟明星使同人cos正片@溫流
- |cos:王者榮耀美女貂蟬cos正片@押切
- 德拉西翁|奧特曼最新排名,特利迦是黃金,神秘四奧是鉆石,王者只有一個(gè)!
