vue中使用Lottie动画

Lottie优势

• 兼容多个平台
• 操作简单
• 动画流畅，百分百还原动效
• 无需担心屏幕尺寸适配问题
• 文件小，json文件大小会比gif文件小很多，性能更好
• 可以通过网络Json地址加载

一. 安装vue-lottie包

npm install --save vue-lottie

二. 在main.js文件中引入vue-lottie插件

• 全局引入

// main.js
import lottie from 'vue-lottie'
Vue.component('lottie',lottie)

• 局部引入

import lottie from 'vue-lottie'
export default{
components: { lottie },
}

三. 文件中引入lottie资源

import * as animationData from "../assets/lottie.json";

四. 使用组件

<lottie
  :options="defaultOptions"
  :width="60"
  :height="60"
  v-on:animCreated="handleAnimation"
/>

//data里面添加相应属性
data(){
    return {
        defaultOptions: { animationData: animationData, loop: false },
        defaultAnim: ""
    }
}

//定义方法
methods: {
    handleAnimation: function(anim) {
        console.log(anim); //这里可以看到 lottie 对象的全部属性
        this.defaultAnim = anim;
    },
}

lottie的参数options

  container: element, //要包含该动画的dom元素
  renderer: 'svg',    //渲染方式，svg、canvas、html（轻量版仅svg渲染）
  loop: true,    //是否循环播放，true表示循环，false表示不循环
  autoplay: true,   //是否自动播放，true表示自动播放
  animationData: animationData,   //需要引入的json动画对象

lottie方法

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

监听事件

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

lottie动画图片资源显示不存在问题

1.把图片资源放到static文件下

2.去除"u"，图片改为网络地址

文章总结

设计师需要的工具：
PhotoShop或Sketch，Adobe Illustrator，Adobe After Effects和Bodymovin
安装Bodymovin插件主要用于后面导出Json格式

动画资源：https://lottiefiles.com/popular
lottie源码分析—svg渲染：http://test.imweb.io/topic/5b2b129e61340cbe5576ca44
lottie的Github:https://github.com/lottie-react-native/lottie-react-native/blob/master/docs/api.md
Lottie-前端实现AE动效：https://segmentfault.com/a/1190000018577416