vue-lottie实现前端动画

Lottie简介

官方文档：https://lottiefiles.com/
Lottie是一个库，可以解析使用AE制作的动画（需要用bodymovin导出为json格式），支持web、ios、android和react native。在web侧，lottie-web库可以解析导出的动画json文件，并将其以svg或者canvas的方式将动画绘制到我们页面中。
交互性非常好，动画支持倍速播放，倒放，暂停等功能，能熟练使用的话，交互性能提升很多。
其优点：

• 动画由设计使用专业的动画制作工具Adobe After Effects来实现，使动画实现更加方便，动画效果也更好；
• 前端可以方便的调用动画，并对动画进行控制，减少前端动画工作量；
• 设计制作动画，前端展现动画，专业人做专业事，分工合理；
• 卖家秀即买家秀，还原程度百分之百；
• 使用lottie方案，json文件大小会比gif文件小很多，性能也会更好

不足：

• lottie-web文件本身仍然比较大，lottie.js大小为513k，轻量版压缩后也有144k，经过gzip后，大小为39k。所以，需要注意lottie-web的加载。目前H5项目有离线包，PC项目也会上PWA，会对其进行缓存，保证加载速度。
• lottie动画其实可以理解为svg动画/canvas动画，不能给已存在的html添加动画效果；
• 动画json文件的导出，目前是将AE里面的参数一一导出成json内容，如果设计师建了很多的图层，可能仍然有json文件比较大（20kb）的问题。需要设计师遵循一定的规范。
• 有很少量的AE动画效果，lottie无法实现，有些是因为性能问题，有些是没有做。比如：描边动画等

vue-lottie

官方github:https://github.com/chenqingspring/vue-lottie
示例demo:https://chenqingspring.github.io/vue-lottie
vue-lottie是将lottie封装后支持vue框架，简单易行。下面介绍使用步骤

使用前的准备

准备好动画 json 文件。可以让 UI 处理好:

1. UI 使用 AE–安装 bodymovin 插件 - 将 AE 中的动画工程文件通过 bodymovin 转换为.json 文件–发给开发 - 开发集成 Lottie 框架 - 直接在项目中使用。
2. 或者是在官方库里找:链接。

安装

npm install --save vue-lottie

组件引入

import lottie from 'vue-lottie';
Vue.component('lottie', lottie)

文件中使用

下面是基本使用

<template>
    <div ref="animArea">
        <Lottie :options="defaultOptions" v-on:animCreated="handleAnimation" />
    </div>
</template>
<script>

import * as animeData from '../assets/anime.json'//引入动画资源文件
export default {
  name: 'animate',
  data () {
    return {
        // ... some code
        defaultOptions: { container: this.$refs.animArean, animationData: animationData.default, loop: false, autoplay: false },
      	anim: {},
    }
  },
  methods: {
    //
    handleAnimation: function (anim) {
      console.log('动画', anim) // 这里可以看到 lottie 对象的全部属性
      this.anim = anim
    },
    // 动画开始
    animPlay () {
      console.log('animPlay')
      this.anim.play()
    },
    // 动画结束
    animStop () {
      console.log('animStop')
      this.anim.stop()
    },
    // 动画暂停
    animPause () {
      console.log('animPause')
      this.anim.pause()
    },
  }
}
</script>

其他常用配置及API

下面列一些常用的配置属性，更多配置项请看：https://github.com/airbnb/lottie-web

• animationData: 动画 json
• path: 可直接指定动画 json // 路径
• loop: true / false / number //循环
• autoplay: true / false // 自动播放
• name: // 给动画取名字,方便方法调用
• renderer: ‘svg’ / ‘canvas’ / ‘html’ //渲染方式
• container: the dom element on which to render the animation // 可直接指定 dom 节点渲染

方法：

• play: 播放动画
• stop: 停止播放动画
• pause: 暂停动画
• goToAndStop: 跳到某一帧动画，并停止
• setDirection: 设置播放方向
• setSpeed: 设置播放速度

监听事件：

• complete: 播放完成后触发（循环播放下不会触发）
• loopComplete: 当前循环下播放（循环播放/非循环播放）结束时触发
• onEnterFrame: 播放一帧动画的时候触发
• enterFrame: 每进入一帧就会触发，播放时每一帧都会触发一次，stop方法也会触发
• data_ready:动画json文件加载完毕触发
• destroy: 将在动画删除时触发
• onSegmentStart: 开始播放一个动画片段的时候触发