需求分析
最近公司项目需要在懂表帝App中内嵌H5活动页，其中有一个开宝箱的动画（如下图）：
效果图
效果图
一般遇到动画第一反应是使用gif动态图，由UI小姐姐直接做好gif放到页面上就可以了。但是在这个需求中，动画是运行在半透明弹出层上，而gif不支持alpha通道，而且在本页面的需求中需要在动画结束后进行后续的逻辑操作，gif不能有效的监听动画完成事件。
所以就轮到lottie登场了！
lottie简介
Lottie一个适用于Web，Android，iOS，React Native和Windows 的移动库，它可以使用Bodymovin解析以json 格式导出的Adobe After Effects动画，并在设备上进行本地渲染！(如下图)
传送门：lottie官网
上手
安装 Bodymovin AE插件
首先，去github仓库看文档，根据文档下载好Bodymovin插件。
传送门：github这是一个接触ui小姐姐的机会，摸着她的鼠标，给她安装AE插件，并且手把手的教她如何在制作动画完成后导出json文件。
动画导出后得到：
data.jsonimages文件夹（如果动画是使用图层制作的就有这个文件夹）把这两个文件放到项目里。
lottie使用说明
因为是做H5网页，我们使用lottie-web。基本用法：
<code>
const
animation = lottie.loadAnimation({container
:document
.getElementById('box'
),renderer
:'svg'
,loop
:true
,autoplay
:true
,path
:''
}) /<code>常用方法：
<code>
animation
.play
();animation
.stop
();animation
.pause
();animation
.goToAndStop
(value, isFrame);animation
.goToAndPlay
(value, isFrame);animation
.goToAndStop
(30, true);animation
.goToAndPlay
(300);animation
.playSegments
(arr, forceFlag);animation
.playSegments
([10,20]
, false);animation
.playSegments
([[0,5]
,[10,18]
], true);animation
.setSpeed
(speed);animation
.setDirection
(direction
);animation
.destroy
(); /<code>常用监听事件：
<code>animation.addEventListener(
'data_ready'
,()
=> {console
.log('animation data has loaded'
); }); /<code>使用导出的动画文件
项目H5是用vue开发的，先做一个测试页面看看lottie的效果。安装lottie-web
<code>
npm
install lottie-web /<code>在页面中使用
<code>
<
template
>
div
class
="share-ai"
:class
="{bg:hasBg}"
><
div
ref
="lottie"
class
="lottie"
>div
><
button
@click
="play"
>播放button
><
button
@click
="pause"
>button
><
button
@click
="stop"
>停止button
><
button
@click
="hasBg=!hasBg"
>测试透明动画button
><
button
@click
="changeSpeed(1.5)"
>1.5倍速button
><
button
@click
"changeSpeed(2)"
>2倍速button
><
button
@click
="changeSpeed(0.5)"
>0.5倍速button
><
button
@click
="goToAndStop()"
>直接到最后一帧button
>div
>template
> /<code><code>
import
lottie from'lottie-web'
; exportdefault
{data
() {return
{ hasBg:false
, } }, mounted(){this
.aiRobot=lottie.loadAnimation({ container:this
.$refs.lottie, renderer:'svg'
, loop:false
, autoplay:false
, path:'/lottie/chest/coin-500.json'
}); }, methods: { play(){this
.aiRobot.stop()this
.aiRobot.play() }, stop(){this
.aiRobot.stop() }, pause(){this
.aiRobot.pause() }, changeSpeed(value){this
.aiRobot.setSpeed(value)this
.aiRobot.stop()this
.aiRobot.play() }, goToAndStop(){this
.aiRobot.goToAndStop(3920
) } } } /<code>运行效果如下：
效果图
效果图
简直秒杀gif对吧，可以自由控制开始暂停结束，可以正放倒放动画，可以监听播放事件（比如在需求中，动画播放完成后，需要进行后续的逻辑操作和UI显示），而且背景是透明的，完全可以适应任何界面UI。这种方法生成的动画资源体积比gif小很多：上述动画：
动画方案已经确定了，测试页面也证明毫无问题，那么剩下的就是繁琐的UI布局了，这里就不再赘述了，直接上成品图：
最终效果图
成品图
最后，请允许我在这里水一波广告：土豪程序员们有带手表玩手表的，可以下载【懂表帝】app玩一玩，羊毛党也可以来玩玩，有很多积分兑换实物奖励的，有名表哦！