vue中lottie的使用和配置详解

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

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

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('动画播放完成');
    });
  },
}

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

// 播放特定片段
this.anim.playSegments([10, 20], true);
// 监听片段结束
this.anim.addEventListener('segmentStart', () => {
  console.log('Segment started');
});

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

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

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

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

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