微信效果

4fdb33f9494c42d9ae3756e97bb07b81.gif

技術(shù)選型

1.Lottie

Lottie 是一套著名的跨平臺(tái)動(dòng)畫效果解決方案， 支持iOS、Android、Web 和 React Native（所以我們的設(shè)計(jì)師對(duì)它也非常熟悉）， 設(shè)計(jì)師使用Adobe After Effects設(shè)計(jì)好的動(dòng)畫導(dǎo)出成 JSON 格式，通過(guò)lottie，各平臺(tái)使用這份json就可實(shí)現(xiàn)設(shè)計(jì)師的動(dòng)畫效果，不用各自去寫復(fù)雜的動(dòng)畫邏輯，也省去了很多溝通成本。

根據(jù)lottie的Android源碼，其大致原理是：
解析json->layer對(duì)象的映射->layer對(duì)象為layerview構(gòu)造出各種path等->數(shù)據(jù)全部準(zhǔn)備好就是不斷的執(zhí)行view的draw方法完成繪制

Android端的實(shí)現(xiàn)是基于Drawable，最終都是對(duì)canvas的操作。lottieDrawable中的setComposition方法中的buildCompositionLayer開始真正的解析layer和繪制
layer的類型與 AE中的圖層的對(duì)應(yīng)關(guān)系為：

• ShapeLayer：形狀圖層
• CompositionLayer：預(yù)合成圖層
• SolidLayer：純色圖層
• ImageLayer：圖片素材圖層
• NullLayer：空?qǐng)D層
• TextLayer：文本圖層

lottie更多介紹

Lottie - 輕松實(shí)現(xiàn)復(fù)雜的動(dòng)畫效果
lottie源碼分析
[github：android地址] （https://github.com/airbnb/lottie-android）
[github：ios地址] (]https://github.com/airbnb/lottie-ios/tree/lottie/objectiveC)

2.alphaPlayer

如此酷炫又帶音效的動(dòng)畫相當(dāng)于透明視頻了。如何在移動(dòng)設(shè)備上播放透明視頻呢？一般MP4格式的視頻是沒有透明通道的?？梢苑蛛x出Alpha通道，再通過(guò)OpenGL ES重新實(shí)現(xiàn)Alpha通道和RGB通道的混合，從而實(shí)現(xiàn)在端上播放帶透明通道的視頻。
這個(gè)方案字節(jié)跳動(dòng)和企鵝電競(jìng)用于直播間送禮動(dòng)畫，兩家的開源方案在此，其原理是一模一樣的：
字節(jié)跳動(dòng)：[https://github.com/bytedance/AlphaPlayer]（https://github.com/bytedance/AlphaPlayer）
企鵝電競(jìng)：https://github.com/Tencent/vap
AlphaPlayer的播放器是基于exoPlayer實(shí)現(xiàn)的，vap是自定義解碼器，由于兼容性的原因，我本來(lái)更傾向于選擇AlphaPlayer。但是后來(lái)發(fā)現(xiàn)vap做得更完善一些。對(duì)比AlphaPlayer的優(yōu)勢(shì)有：

• ios,android雙端開源，多款產(chǎn)品接入，而且至今還在維護(hù)。
• 配套工具開源，且使用體驗(yàn)更好，可以添加音頻，可以修改透明通道的壓縮參數(shù)
• 由于透明通道可以壓縮，且配置json也寫入了MP4，減小了文件體積和數(shù)量

實(shí)踐

1.Lottie行不行？

行。
用lotttie方案已在我們的產(chǎn)品中實(shí)現(xiàn)“煙花”和“爆竹”的效果。但是美術(shù)嚷嚷效果不好。我們還是實(shí)現(xiàn)了，并且在播放動(dòng)畫的同時(shí)，還創(chuàng)建了一個(gè)音頻播放器播放音效。
煙花：

SVID_20210202_202249_1.gif

SVID_20210202_202437_1.gif

• 對(duì)齊發(fā)射點(diǎn)
• 周圍視圖物理抖動(dòng)效果

此方案局限在于：

• json配置無(wú)法描述某些特效，比如煙花爆竹要用的“粒子爆炸”效果。
• 復(fù)雜動(dòng)畫引入圖片幀，canvas#saveLayer()和canvas#drawBitmap()耗時(shí)過(guò)多。

alphaPlayer方案

相比于lottie方案的好處：

• MP4格式，無(wú)論從效果、大小與解碼性能上都是最優(yōu)的，而且支持音頻
• 支持各種酷炫動(dòng)畫效果，AE導(dǎo)出方便，美術(shù)不用受各種限制
• 配合opengl渲染，可拓展引入動(dòng)態(tài)參數(shù)（如動(dòng)態(tài)設(shè)置大小等）

如何使用：
AE將最終合成導(dǎo)出為png序列，然后使用VPA所提供工具合成帶透明通道數(shù)據(jù)的MP4視頻。

效果：
暫和lottie方案一致。(已接入實(shí)現(xiàn))因?yàn)闀簳r(shí)使用同一份AE素材導(dǎo)出。不過(guò)顯而易見地可以做得更精細(xì)，可能資源也會(huì)更大，目前mp4加2s的音效只有400k。
此處另外補(bǔ)一張此方案的效果對(duì)比一下，煙霧效果比lottie方案要逼真多了。

demo.gif

SVID_20210203_150004_1.gif

SVID_20210203_200629_1.gif

延伸1：技術(shù)人懂點(diǎn)AE特效設(shè)計(jì)

After Effects CC 全套入門教程 https://www.bilibili.com/video/BV1At411i7yZ?p=6&t=645
AE在我們項(xiàng)目中的應(yīng)用除了上述特效動(dòng)畫，還有VE視頻編輯模板。VE視頻剪輯方案是一個(gè)集AE(Adore After Effects)和Pr(Premiere)軟件功能為一體的視頻處理方案。從視頻特效的角度來(lái)看，它是一個(gè)類似After Effects的基于圖層和特效插件系統(tǒng)的視頻處理架構(gòu);從視頻編輯的角度來(lái)講，它是類似一個(gè)多軌道的含視頻濾鏡、貼紙、文字動(dòng)畫、軌道動(dòng)畫、視頻特效、視頻轉(zhuǎn)場(chǎng)、視頻動(dòng)畫為一體的視頻編輯系統(tǒng)。
對(duì)于一個(gè)模板配置數(shù)據(jù)json進(jìn)行分析(由VE配套工具導(dǎo)出)
附件 super_mosaic_config.json
對(duì)上述聊天特效煙花json數(shù)據(jù)進(jìn)行分析（由lotttie配套ae插件導(dǎo)出）
附件 YanHua_ChengHong_750×750.json
從以下幾個(gè)問(wèn)題分析json數(shù)據(jù)結(jié)構(gòu)

• 合成與圖層是什么關(guān)系
• 預(yù)合成是什么
• 圖層的資源怎么組織存放

延伸2：關(guān)于Android動(dòng)畫的總結(jié)