vue-lottie的使用和配置

一、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" 
/>

六、性能优化

1. 减少 JSON 文件体积：

   • 使用 LottieFiles 的轻量化导出选项

   • 删除 JSON 中不必要的图层数据

2. 懒加载动画：

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

3. 使用 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 官方工具调试动画效果后再集成到项目中。