lottie动画

lottie实现GIF到JSON的转变

安装依赖

npm install lottie-web

 animationData由UI提供的JSON数据

<template>
    <div>
      <span id="lottie"></span>
    </div>
</template>

<script>
 import lottie from "lottie-web";
 import { animationData } from "./config";
 
  export default {
   methods: {
       initAnimation() {
			const params = {
                    container: document.getElementById('lottie'), // 要包含该动画的dom元素
                    renderer: 'svg', // 渲染方式，svg、canvas、html（轻量版仅svg渲染）
                    loop: true,// 是否循环播放
                    autoplay: true,// 是否自动播放
                    animationData: animationData // 动画json文件
                };
            const animation = lottie.loadAnimation(params);
       }
   }
  }
</script>

 lottie常用方法

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

 lottie常用的监听事件

//加载完动画json文件时
animation.addEventListener('data_ready', () => {
  console.log('animation data has loaded');
});

除了data_ready事件，下面还有一些其他常用的事件可以监听：
* complete: 播放完成（循环播放下不会触发）
* loopComplete: 当前循环下播放（循环播放/非循环播放）结束时触发
* enterFrame: 每进入一帧就会触发，播放时每一帧都会触发一次，stop方法也会触发
* segmentStart: 播放指定片段时触发，playSegments、resetSegments等方法刚开始播放指定片段时会发出，如果playSegments播放多个片段，多个片段最开始都会触发。
* data_ready: 动画json文件加载完毕触发
* DOMLoaded: 动画相关的dom已经被添加到html后触发
* destroy: 将在动画删除时触发