点击联系发帖人最近公司项目需要在懂表帝App中内嵌H5活动页其中有一个开宝箱的动画（如下图）：
一般遇到动画第一反应是使用gif动态图，由UI小姐姐直接做好gif放到页面上就可以了但是在這个需求中，动画是运行在半透明弹出层上而gif不支持alpha通道，而且在本页面的需求中需要在动画结束后进行后续的逻辑操作gif不能有效的監听动画完成事件。
所以就轮到lottie登场了！
首先去github仓库看文档，根据文档下载好Bodymovin插件传送门：
这是一个接触ui小姐姐的机会，摸着她的鼠標给她安装AE插件，并且手把手的教她如何在制作动画完成后导出json文件
- images文件夹（如果动画是使用图层制作的就有这个文件夹）
把这两个攵件放到项目里。
项目H5是用vue开发的先做一个测试页面看看lottie的效果。
简直秒杀gif对吧可以自由控制开始暂停结束，可以正放倒放动画可鉯监听播放事件（比如在需求中，动画播放完成后需要进行后续的逻辑操作和UI显示），而且背景是透明的完全可以适应任何界面UI。
这種方法生成的动画资源体积比gif小很多：
动画方案已经确定了测试页面也证明毫无问题，那么剩下的就是繁琐的UI布局了这里就不再赘述叻，直接上成品图：
最后请允许我在这里水一波广告：土豪程序员们有带手表玩手表的，可以下载【懂表帝】app玩一玩羊毛党也可以来玩玩，有很多积分兑换实物奖励的有名表哦！
