vue中如何使用lottie动画

王——小喵

已于 2022-03-02 11:27:36 修改

阅读量4.4k

点赞数 6

分类专栏：动画文章标签： vue.js 动画前端

于 2022-03-02 11:26:38 首次发布

本文链接：https://blog.csdn.net/wxiao_xiao_miao/article/details/123183400

版权

动画专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue3项目中集成lottie-web库，通过AfterEffects制作动画并用Bodymovin导出JSON，然后在Vue组件中引入并播放这些动画。步骤包括安装lottie-web包，导入JSON文件，设置动画容器，初始化lottie，并展示了播放、暂停、停止等方法及动画事件监听。

摘要由CSDN通过智能技术生成

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);