vue-lottie的使用和配置-EW帮帮网

一、vue-lottie 简介

vue-lottie 是一个 Vue 组件，用于在 Vue 项目中集成 Airbnb 的 Lottie 动画库。它通过 JSON 文件渲染 After Effects 动画，适用于复杂矢量动画的高效展示。

二、安装与基础使用

1. 安装

npm install vue-lottie@latest
# 或
yarn add vue-lottie

2. 基础示例

<template>
  <lottie :options="lottieOptions" :height="400" :width="400" @animCreated="handleAnimation" />
</template>

<script>
import Lottie from 'vue-lottie';
import * as animationData from './animation.json';//animationData.json文件找ui生成

export default {
  components: { Lottie },
  data() {
    return {
      lottieOptions: {
        animationData: animationData,
        loop: true,
        autoplay: true,
      }
    };
  },
  methods: {
    handleAnimation(anim) {
      this.animation = anim; // 保存动画实例
    }
  }
};
</script>

三、核心配置项

1. 组件 Props

Prop	类型	默认值	说明
`options`	Object	必填	Lottie 动画配置对象（见下方 `options` 详解）
`width`	Number/String	`'100%'`	动画容器的宽度（如 `300` 或 `'50%'`）
`height`	Number/String	`'100%'`	动画容器的高度
`speed`	Number	1	播放速度（1=正常速度，2=2倍速，0.5=半速）
`direction`	Number	1	播放方向（1=正向，-1=反向）
`pauseOnHover`	Boolean	false	鼠标悬停时暂停动画

2. options 对象配置

属性	类型	默认值	说明
`animationData`	Object	必填	从 JSON 文件导入的动画数据（`import animationData from './anim.json'`）
`loop`	Boolean/Number	true	`true`=无限循环，`false`=不循环，`3`=循环3次
`autoplay`	Boolean	true	是否加载后自动播放
`renderer`	String	'svg'	渲染方式（'svg'/'canvas'/'html'）
`rendererSettings`	Object	{}	高级渲染设置（如抗锯齿、缩放模式等）

3. 事件（Events）

事件名	回调参数	说明
`animCreated`	anim	动画实例创建时触发
`animationComplete`	-	动画播放完成时触发（非循环模式）
`enterFrame`	{currentTime, totalTime}	每播放一帧触发

四、常用方法

通过 animCreated 获取动画实例后，可调用以下方法：

methods: {
  //@animCreated创建实例
  handleAnimation(anim) {
    this.anim = anim;
  },
  play() {
    // 播放动画（从当前帧开始）
    //如果动画已结束，会从头开始播放
    this.anim.play();
  },
  pause() {
    //暂停动画（保持当前帧）
    //再次调用 play() 会从暂停处继续
    this.anim.pause();
  },
  stop() {
    //停止动画（重置到第一帧）
    //与 pause() 不同，stop() 会回到起始状态
    this.anim.stop();
  },
  setSpeed(speed) {
    //设置播放速度
    //@param {Number} speed - 1=正常速度，2=2倍速，0.5=半速
    this.anim.setSpeed(speed); 
  },
  goToAndPlay(frame=500) {
    //跳转到指定时间/帧并播放
    //@param {Number} frame - 时间（毫秒）或帧数
    //@param {Boolean} [isFrame=false] - true=按帧跳转，false=按时间跳转
    this.anim.goToAndPlay(frame, true); // 跳转到第500帧并播放
  },
  goToAndStop(frame) {
    //跳转到指定时间/帧并停止
    //@param {Number} frame - 时间（毫秒）或帧数
    //@param {Boolean} [isFrame=false] - 是否按帧跳转
    this.anim.goToAndStop(frame, false);
  },
  playSegments(segments) {
    //播放指定片段
    //@param {Array} segments - 片段范围 [startFrame, endFrame] 或 [[seg1], [seg2]]
    //@param {Boolean} [forceFlag=false] - true=立即跳转，false=完成当前动画后跳转
    // 播放10~20帧
    this.anim.playSegments([10, 20], true);
    
    // 多片段顺序播放
    this.anim.playSegments([[0, 10], [20, 30]], true);
  },
  setSegment() {
    //设置动画播放区间（不立即生效，需配合 play()）
    //@param {Number} startFrame - 起始帧
    //@param {Number} endFrame - 结束帧
    this.anim.setSegment(50, 100);
    this.anim.play(); // 播放50~100帧
  },
  freeze() {
    //冻结动画（停止渲染但保留进度）
    //比 pause() 更节省资源，适合隐藏时的动画
    this.anim.freeze();
  },
  unfreeze() {
    //解冻动画（恢复渲染）
    //配合 freeze() 使用，恢复时保持原有进度
    this.anim.unfreeze();
  },
  destroy() {
    //销毁动画实例，释放内存
    //组件卸载时建议调用
    this.anim.destroy();
  },
   
//属性获取
  getDuration() {
    //获取动画总时长/总帧数
    //@param {Boolean} [isFrame=false] - true=返回总帧数，false=返回总时间（毫秒）
    //@returns {Number}
    const totalFrames = this.anim.getDuration(true); // 获取总帧数
    const totalTime = this.anim.getDuration(); // 获取总时长（ms）
  },
  getCurrentTime() {
    //获取当前播放时间（毫秒）
    //@returns {Number}
    const currentTime = this.anim.getCurrentTime();
  },

//事件监听
  addEventListener() {
    //添加事件监听
    //@param {String} type - 事件类型（见下方事件列表）
    //@param {Function} callback - 回调函数
    this.anim.addEventListener('complete', () => {
      console.log('动画播放完成');
    });
  },
}

五、高级用法

1. 动态加载动画

async loadAnimation() {
  const response = await fetch('/api/get-animation');
  this.lottieOptions.animationData = await response.json();
}

2. 分段动画控制

// 播放特定片段
this.anim.playSegments([10, 20], true);

// 监听片段结束
this.anim.addEventListener('segmentStart', () => {
  console.log('Segment started');
});

3. 响应式尺寸

<lottie 
  :options="lottieOptions" 
  :width="windowWidth > 768 ? 500 : 300" 
  :height="windowWidth > 768 ? 500 : 300" 
/>

六、性能优化

减少 JSON 文件体积：
- 使用 LottieFiles 的轻量化导出选项
- 删除 JSON 中不必要的图层数据

懒加载动画：

<lottie v-if="showAnimation" :options="lottieOptions" />

使用 freeze 方法：

this.anim.freeze(); // 暂停并隐藏动画以释放资源

七、官方文档

vue-lottie GitHub：
https://github.com/chenqingspring/vue-lottie
Lottie 官方文档：
Lottie Docs
LottieFiles（免费动画资源）：
https://lottiefiles.com/

八、常见问题

1. 动画不显示？

检查 JSON 数据是否正确导入
确保容器有明确的宽高

2. 如何实现点击触发动画？

<lottie ref="lottie" :options="{ autoplay: false }" />
<button @click="$refs.lottie.play()">播放</button>

3. 如何适配暗黑模式？

// 动态修改动画颜色
this.anim.setSubframe(false);
this.anim.updateDocumentData({
  layers: [{ 
    shapes: [{ 
      c: { k: isDark ? [0,0,0] : [255,255,255] } 
    }] 
  }]
});

通过合理配置 vue-lottie，你可以轻松实现高性能、可交互的矢量动画效果。建议结合 Lottie 官方工具调试动画效果后再集成到项目中。

vue-lottie的使用和配置