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

微信效果

技术选型

1.LottieLottie

是一套著名的跨平台动画效果解决方案， 支持 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/vapAlphaPlayer 的播放器是基于 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()耗时过多。

2.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 数据结构

• 合成与图层是什么关系

• 预合成是什么

• 图层的资源怎么组织存放