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

需求分析

最近公司项目须要在懂表帝App中内嵌H5活动页，其中有一个开宝箱的动画（以下图）： javascript

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

因此就轮到lottie登场了！vue

lottie简介

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

传送门： lottie官网

上手

安装 Bodymovin AE插件

首先，去github仓库看文档，根据文档下载好Bodymovin插件。传送门：github 这是一个接触ui小姐姐的机会，摸着她的鼠标，给她安装AE插件，而且手把手的教她如何在制做动画完成后导出json文件。动画导出后获得：git

data.json
images文件夹（若是动画是使用图层制做的就有这个文件夹）把这两个文件放到项目里。

lottie使用说明

由于是作H5网页，咱们使用lottie-web。基本用法：程序员

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

经常使用方法：github

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

经常使用监听事件：web

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

npm install lottie-web
复制代码

在页面中使用json

<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小不少：上述动画：

gif:684k
lottie:186k

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

最后，请容许我在这里水一波广告：土豪程序员们有带手表玩手表的，能够下载【懂表帝】app玩一玩，羊毛党也能够来玩玩，有不少积分兑换实物奖励的，有名表哦！