lottie-web实现酷炫动画

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

为什么要用lottie？

因为Gif图是位图，不是矢量图，放大会失真，用于复杂的动画展现体验也不太好。Svg API对于动画初学者不太友好，要实现一个自定义动画，需要了解Svg的所有的API，开发成本相对较。它是矢量图，不失真。而lottie是一个不太占体积，还原度高，对于初学者友好的库。设计师制作好动画，并且利用Bodymovin插件导出Json文件。前端直接引用lottie-web库即可，它默认的渲染方式是svg，原理就是用JS操作Svg API。但是开发完全不需要关心动画的过程，Json文件里有每一帧动画的信息，而库会帮我们执行每一帧。

这里采用的vue来举栗子：

安装 lottie-web 插件

yarn add lottie-web

代码实现

<template>
  <div class="home" ref="home" @click="start">
  </div>
</template>

<script>
  import lottie from 'lottie-web';
  import Data from '../assets/demo.json'
  export default {
    name: 'home',
    data () {
      return {
        lottie: ''
      }
    },

    mounted () {
      this.lottie = lottie.loadAnimation({
        container: this.$refs.home,
        renderer: 'svg',
        loop: false,
        autoplay: true,
        animationData: Data
      })
      setTimeout(() => {
        this.lottie.pause()
      }, 2000)
      this.lottie.addEventListener('complete', () => {
        console.log('播放完毕')
      })
    },

    methods: {
      start () {
        this.lottie.play()
      }
    }
  }
</script>

效果图

• container 当前需要渲染的DOM
• renderer，渲染方式，默认是Svg，还有Html和Canvas方案。
• loop 是否循环播放
• autoplay 是否自动播放
• animationData AE导出的Json，注意，这里不是路径
• assetsPath Json文件里资源的绝对路径，webpack项目需要配合这个参数。

常用方法

this.lottie.pause() // 暂停，并保持当前帧

this.lottie.play() // 播放，从当前帧开始播放

this.lottie.stop(); // 停止，并回到第0帧

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

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

this.lottie.goToAndStop(20, true); // 跳转到第20帧并停止

this.lottie.goToAndPlay(200); // 跳转到第200毫秒并播放

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

this.lottie.playSegments([5,30], false); // 播放完之前的片段，播放5-30帧

this.lottie.playSegments([[0,5],[15,20]], true); // 直接播放0-5帧和15-20帧

this.lottie.setSpeed(speed); // 设置播放速度，speed为1表示正常速度

this.lottie.setDirection(direction); // 设置播放方向，1表示正向播放，-1表示反向播放

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

动画执行过程中的钩子

• complete
• loopComplete
• enterFrame
• segmentStart
• config_ready(初始配置完成)
• data_ready（所有动画数据加载完成）
• DOMLoaded（元素已添加到DOM节点）
• destroy
• data_faild（无法加载动画的一部分时）
• loaded_images (当所有图像加载成功或失误时)

this.lottie.addEventListener('complete', () => {
   console.log('播放完毕')
})
this.lottie.addEventListener('loopComplete', () => {
   console.log('循环播放完毕')
})
this.lottie.addEventListener('enterFrame', () => {
   console.log('播放ing')
})

打包时图片资源路径

vue需要注意Json文件如果有图片资源（Png或者Svg），需要将文件放在项目的根目录的static下。这样打包的时候，图片会被打包，并且后缀名不会被改变，当然需要配合assetsPath这个参数，设置图片的绝对路径。