爆竹礼物特效使用,是需要在抖音拍摄的时候,进入魔法弹窗,找到新春爆竹特效进行使用,目前只有这一种。
抖音新春爆竹特效是为了春节新增的特效,炮竹表面是红色的,有一个黄颜色的春字,燃放出的爆竹是黄色和红色的。
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地址] ( https://github.com/airbnb/lottie-android )
[github:ios地址] (] https://github.com/airbnb/lottie-ios/tree/lottie/objectiveC )
如此酷炫又带音效的动画相当于透明视频了。如何在移动设备上播放透明视频呢?一般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的优势有:
行。
用lotttie方案已在我们的产品中实现“烟花”和“爆竹”的效果。但是美术嚷嚷效果不好。我们还是实现了,并且在播放动画的同时,还创建了一个音频播放器播放音效。
烟花:
此方案局限在于:
相比于lottie方案的好处:
如何使用:
AE将最终合成导出为png序列,然后使用VPA所提供工具合成带透明通道数据的MP4视频。
效果:
暂和lottie方案一致。(已接入实现)因为暂时使用同一份AE素材导出。不过显而易见地可以做得更精细,可能资源也会更大,目前mp4加2s的音效只有400k。
此处另外补一张此方案的效果对比一下,烟雾效果比lottie方案要逼真多了。
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数据结构