當前位置:編程學習大全網 - 源碼下載 - 如何實現微信8.0爆炸和煙花表情特效

如何實現微信8.0爆炸和煙花表情特效

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中的圖層的對應關系為:

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數據結構

  • 上一篇:請教有個簡單的java程序,調用jni的動態庫,當
  • 下一篇:php郵件發送代碼可以本地測試嗎
  • copyright 2024編程學習大全網