Lottie 动画库

初始化参数

创建 Lottie 实例时的关键配置项（lottie-web）：

| 参数 | 类型 | 说明 |

|------|------|------|

| container | HTMLElement | 必选，承载动画的 DOM 元素 |

| path | string | 动画 JSON 文件的外部路径（与 animationData 二选一） |

| animationData | object | 直接传递 JSON 动画数据（避免 HTTP 请求） |

| loop | boolean | 是否循环播放（默认 true） |

| autoplay | boolean | 是否自动播放（默认 false） |

| renderer | string | 渲染模式'svg''canvas''html'，默认 'svg'） |

| name | string | 动画实例名称（用于多动画控制） |

const anim = lottie.loadAnimation({
  container: document.getElementById('lottie-container'),
  path: 'data.json',
  renderer: 'svg',
  loop: true,
  autoplay: false,
});

核心控制方法

控制动画播放和状态的方法：

| 方法 | 说明 |

|------|------|

| play() | 开始/继续播放动画 |

| pause() | 暂停动画 |

| stop() | 停止动画（重置到第 0 帧） |

| destroy() | 销毁动画实例并释放资源 |

| setSpeed(speed: number) | 设置播放速度1 为正常速度） |

| goToAndPlay(value: number) | 跳转到指定时间（秒）或帧并播放 |

| goToAndStop(value: number) | 跳转到指定时间（秒）或帧并暂停 |

事件监听

绑定动画生命周期事件：

| 事件 | 说明 |

|------|------|

| complete | 动画播放完成（非循环模式下触发） |

| loopComplete | 完成一次循环（每次循环结束触发） |

| enterFrame | 每进入新一帧时触发 |

| data_ready | 动画 JSON 数据加载完成 |

| DOMLoaded | SVG/CANVAS 元素加载完成 |

| error | 加载或解析失败时触发 |

anim.addEventListener('complete', () => {
  console.log('Animation completed!');
});

属性与状态

| 属性 | 类型 | 说明 |

|------|------|------|

| currentFrame | number | 当前帧数（可读写） |

| totalFrames | number | 动画总帧数（只读） |

| isPaused | boolean | 动画是否暂停中（只读） |

| isStopped | boolean | 动画是否已停止（只读） |

安装

# with npm
npm install lottie-web

主要逻辑

lottie.loadAnimation({
  container: element, // the dom element that will contain the animation
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // the path to the animation json
});

组件封装

<template>
  <div class="LottieAnimate">
    <div ref="lottieContainer" :style="style" width="300px" height="200px"></div>
  </div>
</template>

import lottie from "lottie-web";

export default {
  name: "LottieAnimate",
  props: {
    // 动画数据，可以是对象或URL
    animationData: {
      type: [Object, String],
      required: true,
    },
    // 宽度
    width: {
      type: String,
      default: "100%",
    },
    // 高度
    height: {
      type: String,
      default: "100%",
    },
    // 是否循环播放
    loop: {
      type: Boolean,
      default: true,
    },
    // 是否自动播放
    autoplay: {
      type: Boolean,
      default: true,
    },
    // 渲染方式：'svg' | 'canvas' | 'html'
    renderer: {
      type: String,
      default: "svg",
    },
  },
  computed: {
    style() {
      return {
        width: this.width,
        height: this.height,
        overflow: "hidden",
        margin: "0 auto",
      };
    },
  },

  data() {
    return {
      anim: null,
    };
  },
  mounted() {
    this.initAnimation();
  },
  beforeDestroy() {
    if (this.anim) {
      this.anim.destroy();
    }
  },
  methods: {
    initAnimation() {
      let animationData = this.animationData;
      this.anim = lottie.loadAnimation({
        container: this.$refs.lottieContainer,
        renderer: this.renderer,
        loop: this.loop,
        autoplay: this.autoplay,
        animationData: animationData,
      });

      // 将动画实例暴露给父组件
      this.$emit("animation-created", this.anim);
    },
    // 播放动画
    play() {
      if (this.anim) {
        this.anim.play();
      }
    },
    // 暂停动画
    pause() {
      if (this.anim) {
        this.anim.pause();
      }
    },
    // 停止动画
    stop() {
      if (this.anim) {
        this.anim.stop();
      }
    },
    // 跳转到特定帧并播放
    goToAndPlay(value, isFrame = false) {
      if (this.anim) {
        this.anim.goToAndPlay(value, isFrame);
      }
    },
    // 跳转到特定帧并停止
    goToAndStop(value, isFrame = false) {
      if (this.anim) {
        this.anim.goToAndStop(value, isFrame);
      }
    },
    // 设置播放速度
    setSpeed(speed) {
      if (this.anim) {
        this.anim.setSpeed(speed);
      }
    },
    // 设置播放方向
    setDirection(direction) {
      if (this.anim) {
        this.anim.setDirection(direction);
      }
    },
  },
};