写点什么

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

用户头像
梅芳姑
关注
发布于: 2021 年 04 月 02 日

微信效果



技术选型

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

  • 合成与图层是什么关系

  • 预合成是什么

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


发布于: 2021 年 04 月 02 日阅读数: 48
用户头像

梅芳姑

关注

还未添加个人签名 2021.03.31 加入

还未添加个人简介

评论

发布
暂无评论
如何实现微信8.0爆炸和烟花表情特效