vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue lottie使用

vue中lottie的使用和配置详解

作者：孩子 你要相信光

vue-lottie是一个用于在Vue项目中集成Lottie动画库的组件,它通过 JSON 文件渲染 AfterEffects 动画,适用于复杂矢量动画的高效展示,本文介绍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类型默认值说明
optionsObject必填Lottie 动画配置对象（见下方 options 详解）
widthNumber/String'100%'动画容器的宽度（如 300 或 '50%'）
heightNumber/String'100%'动画容器的高度
speedNumber1播放速度（1=正常速度，2=2倍速，0.5=半速）
directionNumber1播放方向（1=正向，-1=反向）
pauseOnHoverBooleanfalse鼠标悬停时暂停动画

2.options 对象配置

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

3.事件（Events）

事件名回调参数说明
animCreatedanim动画实例创建时触发
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" 
/>

六、性能优化

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

使用 freeze 方法：

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

七、官方文档

八、常见问题

1. 动画不显示？

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的使用和配置的文章就介绍到这了,更多相关vue lottie使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文