根據lottie的Android源碼,其大致原理是:
解析json->layer對象的映射->layer對象為layerview構造出各種path等->數據全部準備好就是不斷的執行view的draw方法完成繪制
Android端的實現是基於Drawable,最終都是對canvas的操作。lottieDrawable中的setComposition方法中的buildCompositionLayer開始真正的解析layer和繪制
layer的類型與 AE中的圖層的對應關系為:
Lottie - 輕松實現復雜的動畫效果
lottie源碼分析
[github:android地址] ( /airbnb/lottie-android )
[github:ios地址] (] /airbnb/lottie-ios/tree/lottie/objectiveC )
如此酷炫又帶音效的動畫相當於透明視頻了。如何在移動設備上播放透明視頻呢?壹般MP4格式的視頻是沒有透明通道的。可以分離出Alpha通道,再通過OpenGL ES重新實現Alpha通道和RGB通道的混合,從而實現在端上播放帶透明通道的視頻。
這個方案字節跳動和企鵝電競用於直播間送禮動畫,兩家的開源方案在此,其原理是壹模壹樣的:
字節跳動:[ /bytedance/AlphaPlayer] ( /bytedance/AlphaPlayer )
企鵝電競: /Tencent/vap
AlphaPlayer的播放器是基於exoPlayer實現的,vap是自定義解碼器,由於兼容性的原因,我本來更傾向於選擇AlphaPlayer。但是後來發現vap做得更完善壹些。對比AlphaPlayer的優勢有:
行。
用lotttie方案已在我們的產品中實現“煙花”和“爆竹”的效果。但是美術嚷嚷效果不好。我們還是實現了,並且在播放動畫的同時,還創建了壹個音頻播放器播放音效。
煙花:
此方案局限在於:
相比於lottie方案的好處:
如何使用:
AE將最終合成導出為png序列,然後使用VPA所提供工具合成帶透明通道數據的MP4視頻。
效果:
暫和lottie方案壹致。(已接入實現)因為暫時使用同壹份AE素材導出。不過顯而易見地可以做得更精細,可能資源也會更大,目前mp4加2s的音效只有400k。
此處另外補壹張此方案的效果對比壹下,煙霧效果比lottie方案要逼真多了。
After Effects CC 全套入門教程 /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數據結構