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

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

lottie-web的npm版本是lottie-web，其对应的cdn外链版则是bodymovin.js

即颤搭使是gzip压缩后的lottie-web轻量版的js文件，大小仍然有40kb的大小。如果使用npm包的形式进行加载，那么vendor.js会增加40kb的大小，这样会使页面性能下降。

所以，我们会采用script标签的形式来加载lottie文件，并且使用defer或async属性来进行异步加载茄知拿。一般情况下，我们只需要svg格式的动画，所以可以使用lottie_light版本（猛判仅支持svg渲染）。

#d窗

oktoast : ^3.1.5

#路由

get : ^4.5.1

#百度地图定位

flutter_bmflocation : ^2.0.0-nullsafety.1

#百度地图-基础地图

flutter_baidu_mapapi_map : ^3.0.0+2

#百度地图-检索

flutter_baidu_mapapi_search : ^3.0.0

#百度地图-计算工具

flutter_baidu_mapapi_utils : ^3.0.0

#屏幕自动适应

flutter_screenutil : ^5.2.0

#Banner图切换

flutter_swiper_plus : ^2.0.4

#网络请求

dio : ^4.0.4

dio_cache_interceptor : ^3.2.2

pretty_dio_logger : ^1.2.0-beta-1

#城市选择器

azlistview : ^2.0.0

#本地存储

get_storage : ^2.0.3

#权限

permission_handler : ^8.3.0

#保存图兆隐亩片

image_gallery_saver : ^1.7.1

# image_save: ^5.0.0

#常用工具类

common_utils :

path : plugin/common_utils-2.0.2

#选择器

flutter_picker : ^2.0.2

#生成二维码

qr_flutter : ^4.0.0

#验证码输入框

pin_input_text_field : ^4.1.1

# 汉字携掘转拼音

lpinyin : ^2.0.3

#多张图片上传

wechat_assets_picker : ^6.3.1

wechat_camera_picker : ^2.6.3

#裁剪图片

image_cropper : ^1.5.0

#图片压缩

flutter_luban : ^0.1.13

#家谱树

graphview : ^1.1.1

vector_math : ^2.1.0

#行为验证码

steel_crypt : ^3.0.0+1

encrypt : ^5.0.0

#二维码识别

flutter_qr_reader : ^1.0.5

#右上角小图标

badges : ^2.0.2

#唤醒系统应用

url_launcher : ^6.0.17

flutter_sms : ^2.3.2

#QQ分享

tencent_kit : ^2.1.0

flutter_cache_manager : ^3.3.0

#微信SDK

fluwx : ^3.6.1+4

#支付宝SDK

tobias :

path : plugin/族森tobias-2.2.0

#个推

getuiflut : ^0.2.11

#极光推送

# jpush_flutter:

# path: plugin/jpush_flutter-2.2.2

#极光魔链

jmlink_flutter_plugin :

path : plugin/jmlink_flutter_plugin-2.1.2

#极光认证

jverify :

path : plugin/jverify-2.2.4

#极光统计

janalytics :

path : plugin/janalytics-2.1.5

#倒计时

circular_countdown_timer : ^0.2.0

#加载中效果

flutter_spinkit : ^5.1.0

#APP更新

r_upgrade :

path : plugin/r_upgrade-0.3.7+2

#刷新-加载更多

flutter_easyrefresh : ^2.2.1

#右上角d出式菜单

custom_pop_up_menu : ^1.2.2

#时间轴

timeline_tile : ^2.0.0

#虚线边框

dotted_border : ^2.0.0

like_button : ^2.0.4

#图片

extended_image : ^6.0.1

#图片九宫格

nine_grid_view : ^2.0.0

#时间模糊插件

timeago :

path : plugin/timeago-3.1.0

#屏幕截图

screenshot : ^1.2.3

#图片压缩

flutter_image_compress : ^1.1.0

#List左滑右滑

flutter_slidable : ^1.2.0

#底部伸缩抽屉-针对地图

sliding_up_panel : ^2.0.0+1

#键盘高度

flutter_keyboard_size : ^1.0.0+4

#JSON动图

lottie : ^1.2.2

#城市选择器

city_pickers :

path : plugin/city_pickers-1.0.1

#调试工具

path_provider : ^2.0.7

#打开HTML

webview_flutter : ^2.3.1

#表情

emoji_picker_flutter : ^1.0.8

#扇形进度

ai_progress : ^2.0.0

#喜欢按钮

tiktok_favorite_gesture : ^1.0.0

#获取手机信息

device_info : ^2.0.3

#包信息

package_info : ^2.0.2

device_apps : ^2.1.1

#倒计时

stop_watch_timer : ^1.3.1

#发现Android和iOS上的网络（WiFi和移动/蜂窝）连接状态

connectivity_plus : ^2.2.0

#从应用程序打开iOS和Android手机设置。

app_settings : ^4.1.1

#日志上报

sentry_flutter : ^6.1.2

#后退拦截

back_button_interceptor : ^5.0.2

#视频播放器

better_player : ^0.0.81

#APP启动图

flutter_native_splash : ^2.0.4

#JSON-TO-MAPPER

dart_json_mapper : ^2.1.17

#HTML展示

flutter_html : ^3.0.0-alpha.2

#XD to Flutter

adobe_xd : ^2.0.1

flutter_svg : ^1.0.3

#APPBAR背景色渐变

new_gradient_app_bar : ^0.2.0

#音频播放

flame_audio : ^1.0.0

#入门介绍页

intro_slider : ^3.0.3

#键盘

keyboard_actions : ^3.4.5

emoji_keyboard_flutter : ^1.2.7

#单选选择框

flutter_pickers : ^2.1.9

---