vue中如何使用lottie动画

lottie是一个跨平台的动画库，通过AE（After Effects）制作动画，再通过 AE 插件 Bodymovin 导出 json 文件，最终各个终端解析这个Json文件，还原动画。 

下面以vue3为例进行说明：

1. 安装 lottie-web 包

 npm i lottie-web -S

2. 将 ui 设计师给的 lottie 动画的 json 文件放入 src 文件夹中

 

3. 若为本地动画则在需要使用的 vue 文件中引入 json 文件（网络动画则不需要引入）

import * as anData from '@/lottie.json'

4. 为 lottie 动画指定一个装载容器

 5. 定义用来承载 lottie 对象的变量

let animation = {};

6. 在 onMounted 生命周期时初始化 lottie

onMounted(() => {
  animation = lottie.loadAnimation({
    container: document.getElementById("lottie_box"),//当前需要渲染的DOM
    renderer: "svg",//渲染方式，默认为svg,还可以渲染为html和canvas
    loop: true,//循环播放
    autoplay: true,//自动播放
    // animationData和path二选一
    1. animationData: anData.default,//本地动画
    2. path:''//网络json地址
  });
});

7.常用方法

animation.pause();//暂停
animation.play();//播放
animation.stop();//停止
animation.destroy();//销毁

8. 动画执行过程中的钩子，可以对动画有一定的控制权

• complete
• loopComplete
• enterFrame
• segmentStart
• config_ready(初始配置完成)
• data_ready（所有动画数据加载完成）
• DOMLoaded（元素已添加到DOM节点）
• destroy

  // 动画播放完成触发
  anm.addEventListener('complete', anmLoaded);
  
  // 当前循环播放完成触发 
  anm.addEventListener('loopComplete', anmComplete);
  
  // 播放一帧动画的时候触发 
  anm.addEventListener('enterFrame', enterFrame);