微信效果
技術選型
1.Lottie
Lottie 是一套著名的跨平臺動畫效果解決方案， 支持iOS、Android、Web 和 React Native（所以我們的設計師對它也非常熟悉）， 設計師使用Adobe After Effects設計好的動畫導出成 JSON 格式，通過lottie，各平臺使用這份json就可實現設計師的動畫效果，不用各自去寫復雜的動畫邏輯，也省去了很多溝通成本。
根據lottie的Android源碼，其大致原理是：
解析json->layer對象的映射->layer對象為layerview構造出各種path等->數據全部準備好就是不斷的執行view的draw方法完成繪制
Android端的實現是基于Drawable，最終都是對canvas的操作。lottieDrawable中的setComposition方法中的buildCompositionLayer開始真正的解析layer和繪制
layer的類型與 AE中的圖層的對應關系為：
- ShapeLayer：形狀圖層
- CompositionLayer：預合成圖層
- SolidLayer：純色圖層
- ImageLayer：圖片素材圖層
- NullLayer：空圖層
- TextLayer：文本圖層
lottie更多介紹
Lottie - 輕松實現復雜的動畫效果
lottie源碼分析
[github：android地址] （https://github.com/airbnb/lottie-android）
[github：ios地址] (]https://github.com/airbnb/lottie-ios/tree/lottie/objectiveC)
2.alphaPlayer
如此酷炫又帶音效的動畫相當于透明視頻了。如何在移動設備上播放透明視頻呢？一般MP4格式的視頻是沒有透明通道的?？梢苑蛛x出Alpha通道，再通過OpenGL ES重新實現Alpha通道和RGB通道的混合，從而實現在端上播放帶透明通道的視頻。
這個方案字節跳動和企鵝電競用于直播間送禮動畫，兩家的開源方案在此，其原理是一模一樣的：
字節跳動：[https://github.com/bytedance/AlphaPlayer]（https://github.com/bytedance/AlphaPlayer）
企鵝電競：https://github.com/Tencent/vap
AlphaPlayer的播放器是基于exoPlayer實現的，vap是自定義解碼器，由于兼容性的原因，我本來更傾向于選擇AlphaPlayer。但是后來發現vap做得更完善一些。對比AlphaPlayer的優勢有：
- ios,android雙端開源，多款產品接入，而且至今還在維護。
- 配套工具開源，且使用體驗更好，可以添加音頻，可以修改透明通道的壓縮參數
- 由于透明通道可以壓縮，且配置json也寫入了MP4，減小了文件體積和數量
實踐
1.Lottie行不行？
行。
用lotttie方案已在我們的產品中實現“煙花”和“爆竹”的效果。但是美術嚷嚷效果不好。我們還是實現了，并且在播放動畫的同時，還創建了一個音頻播放器播放音效。
煙花：
圖片加載不出來，點擊此處：https://upload-images.jianshu.io/upload_images/7473169-3f94eabfb48f056a.gif?imageMogr2/auto-orient/strip
爆竹：
圖片加載不出來，點擊此處：https://upload-images.jianshu.io/upload_images/7473169-f8ba55b1d4675567.gif?imageMogr2/auto-orient/strip
其主要難點在于：
- 對齊發射點
- 周圍視圖物理抖動效果
此方案局限在于：
- json配置無法描述某些特效，比如煙花爆竹要用的“粒子爆炸”效果。
- 復雜動畫引入圖片幀，canvas#saveLayer()和canvas#drawBitmap()耗時過多。
alphaPlayer方案
相比于lottie方案的好處：
- MP4格式，無論從效果、大小與解碼性能上都是最優的，而且支持音頻
- 支持各種酷炫動畫效果，AE導出方便，美術不用受各種限制
- 配合opengl渲染，可拓展引入動態參數（如動態設置大小等）
如何使用：
AE將最終合成導出為png序列，然后使用VPA所提供工具合成帶透明通道數據的MP4視頻。
效果：
暫和lottie方案一致。(已接入實現)因為暫時使用同一份AE素材導出。不過顯而易見地可以做得更精細，可能資源也會更大，目前mp4加2s的音效只有400k。
此處另外補一張此方案的效果對比一下，煙霧效果比lottie方案要逼真多了。
另外補充一個紅包撒金幣的效果：
補充一個游戲徽章的效果：
圖片加載不出來，點擊此處：https://upload-images.jianshu.io/upload_images/7473169-155b3c49def984b9.gif?imageMogr2/auto-orient/strip
延伸1：技術人懂點AE特效設計
After Effects CC 全套入門教程 https://www.bilibili.com/video/BV1At411i7yZ?p=6&t=645
AE在我們項目中的應用除了上述特效動畫，還有VE視頻編輯模板。VE視頻剪輯方案是一個集AE(Adore After Effects)和Pr(Premiere)軟件功能為一體的視頻處理方案。從視頻特效的角度來看，它是一個類似After Effects的基于圖層和特效插件系統的視頻處理架構;從視頻編輯的角度來講，它是類似一個多軌道的含視頻濾鏡、貼紙、文字動畫、軌道動畫、視頻特效、視頻轉場、視頻動畫為一體的視頻編輯系統。
對于一個模板配置數據json進行分析(由VE配套工具導出)
附件 super_mosaic_config.json
對上述聊天特效煙花json數據進行分析（由lotttie配套ae插件導出）
附件 YanHua_ChengHong_750×750.json
從以下幾個問題分析json數據結構
- 合成與圖層是什么關系
- 預合成是什么
- 圖層的資源怎么組織存放
