动画利器-lottie在懂表帝App中的实战应用

需求分析

最近公司项目需要在懂表帝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.json
  • images文件夹(如果动画是使用图层制作的就有这个文件夹)
    把这两个文件放到项目里。

lottie使用说明

因为是做H5网页,我们使用lottie-web。
基本用法:

1
2
3
4
5
6
7
const animation = lottie.loadAnimation({
container: document.getElementById('box'),
renderer: 'svg',// 渲染方式:svg、canvas
loop: true, //循环播放,默认:false
autoplay: true, //自动播放 ,默认true
path: '' // json 路径
})

常用方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
animation.play(); // 播放,从当前帧开始播放

animation.stop(); // 停止,并回到第0帧

animation.pause(); // 暂停,并保持当前帧

animation.goToAndStop(value, isFrame); // 跳到某个时刻/帧并停止isFrame(默认false)指示value表示帧还是时间(毫秒)

animation.goToAndPlay(value, isFrame); // 跳到某个时刻/帧并进行播放

animation.goToAndStop(30, true); // 跳转到第30帧并停止

animation.goToAndPlay(300); // 跳转到第300毫秒并播放

animation.playSegments(arr, forceFlag); // arr可以包含两个数字或者两个数字组成的数组,forceFlag表示是否立即强制播放该片段

animation.playSegments([10,20], false); // 播放完之前的片段,播放10-20帧

animation.playSegments([[0,5],[10,18]], true); // 直接播放0-5帧和10-18帧

animation.setSpeed(speed); // 设置播放速度,speed为1表示正常速度

animation.setDirection(direction); // 设置播放方向,1表示正向播放,-1表示反向播放

animation.destroy(); // 删除该动画,移除相应的元素标签等。在unmount的时候,需要调用该方法

常用监听事件:

1
2
3
4
5
6
7
8
9
10
11
12
13
animation.addEventListener('data_ready', () => { console.log('animation data has loaded'); });

//data_ready:动画数据加载完毕
//config_ready:完成初始配置后
//data_failed:当无法加载动画的一部分时
//loaded_images:当所有图像加载成功或错误时
//DOMLoaded:将元素添加到DOM时
//config_ready:完成初始配置后
//complete:动画执行完成
//loopComplete:动画循环周期执行完成
//destroy:动画销毁
//enterFrame
//segmentStart

使用导出的动画文件

项目H5是用vue开发的,先做一个测试页面看看lottie的效果。
安装lottie-web

1
npm install lottie-web

在页面中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import lottie from 'lottie-web';
export default {

data () {
return {
hasBg:false,
}
},
mounted(){
this.aiRobot=lottie.loadAnimation({
container: this.$refs.lottie, // the dom element that will contain the animation
renderer: 'svg',
loop: false,
autoplay: false,
path: '/lottie/chest/coin-500.json' // the path to the animation 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)
}
}
}

运行效果如下:
效果图

简直秒杀gif对吧,可以自由控制开始暂停结束,可以正放倒放动画,可以监听播放事件(比如在需求中,动画播放完成后,需要进行后续的逻辑操作和UI显示),而且背景是透明的,完全可以适应任何界面UI。
这种方法生成的动画资源体积比gif小很多:
上述动画:

  • gif:684k
  • lottie:186k

动画方案已经确定了,测试页面也证明毫无问题,那么剩下的就是繁琐的UI布局了,这里就不再赘述了,直接上成品图:
成品图

最后,请允许我在这里水一波广告:土豪程序员们有带手表玩手表的,可以下载【懂表帝】app玩一玩,羊毛党也可以来玩玩,有很多积分兑换实物奖励的,有名表哦!

文章作者: 小包子
文章链接: http://www.xbzweb.com/2020/03/18/动画利器-lottie在懂表帝App中的实战应用/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 小包子的博客
承接软件开发外包:网站开发、iOS开发、Android开发、微信小程序、桌面软件开发,效率高,价格优。点击进入小包子工作室