微信效果

4fdb33f9494c42d9ae3756e97bb07b81.gif

技术选型

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格式的视频是没有透明通道的。可以分离出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方案已在我们的产品中实现“烟花”和“爆竹”的效果。但是美术嚷嚷效果不好。我们还是实现了，并且在播放动画的同时，还创建了一个音频播放器播放音效。
烟花：

SVID_20210202_202249_1.gif

图片加载不出来，点击此处：https://upload-images.jianshu.io/upload_images/7473169-3f94eabfb48f056a.gif?imageMogr2/auto-orient/strip
爆竹：

SVID_20210202_202437_1.gif

图片加载不出来，点击此处：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方案要逼真多了。

demo.gif

另外补充一个红包撒金币的效果：

SVID_20210203_150004_1.gif

补充一个游戏徽章的效果：

SVID_20210203_200629_1.gif

图片加载不出来，点击此处：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数据结构

合成与图层是什么关系
预合成是什么
图层的资源怎么组织存放

如何实现微信8.0爆炸和烟花表情特效