lottie-player Web Component——声明式嵌入、零 JS 代码

为什么用 lottie-player

lottie-web 需要你手动写 lottie.loadAnimation() 并管理返回的 player 对象。lottie-player 把这些封装成了一个 Web Component，声明式、零 JS 代码：

<script src="unpkg 上的 lottie-player CDN 地址"></script>

<lottie-player
  src="loading.json"
  background="transparent"
  speed="1"
  style="width: 300px; height: 300px"
  loop
  autoplay
></lottie-player>

上面这几行就是完整的嵌入——不需要写任何 JavaScript。

基本属性

属性	类型	含义
`src`	string	JSON 或 dotLottie 文件路径（本地或 URL）
`loop`	boolean / number	循环次数，属性存在 = 无限循环，或者 `count="3"`
`autoplay`	boolean	自动播放
`speed`	number	播放速度，1 = 正常，0.5 = 慢放，2 = 快进
`direction`	string	播放方向：`forward` / `backward`
`mode`	string	循环模式：`normal` / `bounce` / `reverse`
`controls`	boolean	是否显示播放控件（播放/暂停按钮）
`background`	string	背景色
`style`	CSS	内联样式（控制宽高等）

在框架里使用

React

import '@lottiefiles/lottie-player';

function MyComponent() {
  return (
    <lottie-player
      src="loading.json"
      autoplay
      loop
      speed="1"
      style={{ width: 300, height: 300 }}
    />
  );
}

Vue 3

<template>
  <lottie-player
    src="loading.json"
    autoplay
    loop
    :style="{ width: '300px', height: '300px' }"
  />
</template>

<script setup>
import '@lottiefiles/lottie-player';
</script>

原生 HTML

在 </body> 前引入脚本后直接用标签即可，见上面的示例。

手动控制（需要 JS）

虽然声明式够用，但如果你需要手动控制播放（比如点击按钮触发），可以用 ref 拿到组件实例：

React:

const playerRef = useRef();

// 播放
playerRef.current.play();
// 暂停
playerRef.current.pause();
// 跳到第 30 帧
playerRef.current.goToAndStop(30, true);

dotLottie 文件支持

lottie-player 原生支持 .lottie 文件——直接把 src 指向 .lottie 文件即可：

<lottie-player src="button.lottie" autoplay></lottie-player>

如果 .lottie 文件里包含状态机，播放器会自动识别并响应点击、悬停等事件——零代码交互。