爆炸动态图片素材大全-如何实现微信8.0爆炸和烟花表情特效

应该叫冲啊,

“表情包”(emoticon)是一个汉语词汇,指的是一种利用图片来表示感情的方式。表情包是在社交软件活跃之后,形成的一种流行文化,表情包流行于互联网上面,基本人人都会发表情包。

在移动互联网时期,人们以时下流行的明星、语录、动漫、影视截图为素材,配上一系列相匹配的文字,用以表达特定的情感。

2017年7月18日,教育部、国家语委在北京发布《中国语言生活状况报告(2017)》,表情包入选2016年度中国媒体十大新词。

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地址] (

)

[github:ios地址] (]

)

如此酷炫又带音效的动画相当于透明视频了。如何在移动设备上播放透明视频呢?一般MP4格式的视频是没有透明通道的。可以分离出Alpha通道,再通过OpenGL ES重新实现Alpha通道和RGB通道的混合,从而实现在端上播放带透明通道的视频。

这个方案字节跳动和企鹅电竞用于直播间送礼动画,两家的开源方案在此,其原理是一模一样的:

字节跳动:[

] (

)

企鹅电竞:

AlphaPlayer的播放器是基于exoPlayer实现的,vap是自定义解码器,由于兼容性的原因,我本来更倾向于选择AlphaPlayer。但是后来发现vap做得更完善一些。对比AlphaPlayer的优势有:

行。

用lotttie方案已在我们的产品中实现“烟花”和“爆竹”的效果。但是美术嚷嚷效果不好。我们还是实现了,并且在播放动画的同时,还创建了一个音频播放器播放音效。

烟花:

此方案局限在于:

相比于lottie方案的好处:

如何使用:

AE将最终合成导出为png序列,然后使用VPA所提供工具合成带透明通道数据的MP4视频。

效果:

暂和lottie方案一致。(已接入实现)因为暂时使用同一份AE素材导出。不过显而易见地可以做得更精细,可能资源也会更大,目前mp4加2s的音效只有400k。

此处另外补一张此方案的效果对比一下,烟雾效果比lottie方案要逼真多了。

After Effects CC 全套入门教程

AE在我们项目中的应用除了上述特效动画,还有VE视频编辑模板。VE视频剪辑方案是一个集AE(Adore After Effects)和Pr(Premiere)软件功能为一体的视频处理方案。从视频特效的角度来看,它是一个类似After Effects的基于图层和特效插件系统的视频处理架构;从视频编辑的角度来讲,它是类似一个多轨道的含视频滤镜、贴纸、文字动画、轨道动画、视频特效、视频转场、视频动画为一体的视频编辑系统。

对于一个模板配置数据json进行分析(由VE配套工具导出)

附件 super_mosaic_

对上述聊天特效烟花json数据进行分析(由lotttie配套ae插件导出)

附件 YanHua_ChengHong_750×

从以下几个问题分析json数据结构