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

效果图

效果图

一样平常碰着动画第一反应是利用gif动态图，由UI小姐姐直接做好gif放到页面上就可以了。
但是在这个需求中，动画是运行在半透明弹出层上，而gif不支持alpha通道，而且在本页面的需求中须要在动画结束后进行后续的逻辑操作，gif不能有效的监听动画完成事宜。

以是就轮到lottie登场了！

Lottie一个适用于Web，Android，iOS，React Native和Windows 的移动库，它可以利用Bodymovin解析以json 格式导出的Adobe After Effects动画，并在设备上进行本地渲染！
(如下图)

传送门：lottie官网

上手安装 Bodymovin AE插件

首先，去github仓库看文档，根据文档下载好Bodymovin插件。

传送门：github这是一个打仗ui小姐姐的机会，摸着她的鼠标，给她安装AE插件，并且手把手的教她如何在制作动画完成后导出json文件。

动画导出后得到：

由于是做H5网页，我们利用lottie-web。
基本用法：

const animation = lottie.loadAnimation({ container: document.getElementById('box'), renderer: 'svg',// 渲染办法:svg、canvas loop: true, //循环播放，默认：false autoplay: true, //自动播放 ，默认true path: '' // json 路径})

常用方法：

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的时候，须要调用该方法

常用监听事宜：

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

npm install lottie-web

在页面中利用

<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>

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小很多：上述动画：

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

终极效果图

成品图

末了，请许可我在这里水一波广告：土豪程序员们有带腕表玩腕表的，可以下载【懂表帝】app玩一玩，羊毛党也可以来玩玩，有很多积分兑换实物褒奖的，有名表哦！