# @aarsteinmedia/dotlottie-player-light 中文文档

规范地址：https://npmcn.com/package/%40aarsteinmedia/dotlottie-player-light/

版本：6\.0\.0
npm 元数据更新时间：2025-06-22T10:03:40.886Z
中文译文更新时间：2026-11-06T11:17:47.375Z
软件包许可：GPL-2\.0-or-later

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40aarsteinmedia/dotlottie-player-light
原文对照：https://npmcn.com/package/%40aarsteinmedia/dotlottie-player-light/?lang=original
项目主页：https://www.aarstein.media/en/dotlottie-player
源码仓库：https://github.com/aarsteinmedia/dotlottie-player-light

弃用说明：Package is deprecated\. Use @aarsteinmedia/dotlottie-player/light instead\.

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：371 kB，8 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>= 12\.17\.0
- 运行依赖：2 个
- peer 依赖：@types/react \>= 16\.0\.0
- 首次发布：2023-09-17T14:17:57.151Z
- 最新版本发布：2025-06-22T10:01:22.426Z
- 近 30 天下载量：3402（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：120（近 12 个月 0 个）

## 中文简介

被否决。 使用@aarsteinmedia/ dotlottie- player/ light 代替 .

## 安装

```sh
npm install @aarsteinmedia/dotlottie-player-light
```

也可以使用：`pnpm add @aarsteinmedia/dotlottie-player-light`、`yarn add @aarsteinmedia/dotlottie-player-light`、`bun add @aarsteinmedia/dotlottie-player-light`

## README

# 被否决

[![No Maintenance Intended](http://unmaintained.tech/badge.svg)](http://unmaintained.tech/) ![Awesome Vector Animations](https://npmcn.com/.github/readmeBanner.svg)

此软件包的功能已内移 `@aarsteinmedia/dotlottie-player`。要使用轻型版本,请导入 `@aarsteinmedia/dotlottie-player/light`。此软件包将不再更新 .

这是轻取版本 [@aarsteinmedia/dotlotie-player (英语)](https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player)。如果您只需要 SVG 渲染器(不是 HTML 或 Canvas ) , 并且不需要转换 JSON 来点Lottie 或者在苍蝇上结合动画, 这个是给你的 。 这个版本支持dot Lottie格式以及JSON格式,可以在一个文件中的多个动画之间切换.

该组件与服务器侧渲染兼容,像任何好的网络组件一样,它是框架不可知论的.

## 安装

### 在 HTML 中

-   从 CDN 导入 :

```html
<script src="https://unpkg.com/@aarsteinmedia/dotlottie-player-light@latest/dist/index.js"></script>
```

-   从节点模块目录导入 :

```html
<script src="/node_modules/@aarsteinmedia/dotlottie-player-light/dist/index.js"></script>
```

### 在 Java 脚本或类型脚本中

1.  使用 npm 或纱线安装 :

```shell
npm install --save @aarsteinmedia/dotlottie-player-light
```

2.  在您的应用程序中导入 :

```javascript
import '@aarsteinmedia/dotlottie-player-light'
```

## 使用量

添加元素 `dotlottie-player` 标记和点 `src` 你选的洛蒂动画.

```html
<dotlottie-player
  autoplay
  controls
  subframe
  loop
  src="https://storage.googleapis.com/aarsteinmedia/am.lottie"
  style="width: 320px; margin: auto;"
>
</dotlottie-player>
```

要设定动画程序,请使用 `load()` 方法.

```javascript
const lottiePlayer = document.querySelector('dotlottie-player')
lottiePlayer.load('https://storage.googleapis.com/aarsteinmedia/am.lottie')
```

### 在一个文件中控制多个动画的回放

使用 [全文](https://github.com/aarsteinmedia/dotlottie-player) 中,将多个动画组合为一个文件。 要控制回放,您可以使用 `next()` 财务报告和审定财务报表 `prev()` 方法、控件或参数中的导航按钮 `multiAnimationSettings` 在标记.

在下面的例子中,第一个动画会播放一次,然后下一个动画会循环:

```html
<dotlottie-player
  id="find-me"
  subframe
  src="/path/to/combined-animations.lottie"
>
</dotlottie-player>  
```

```javascript
  const player = document.querySelector('#find-me')
  player?.setMultiAnimationSettings(
    [
      {
        autplay: true
      },
      {
        autoplay: true,
        loop: true
      }
    ]
  )
```

### 角质

1.  导入组件为 `app.component.ts`。 。 。 .

```typescript
import { Component } from '@angular/core'
import '@aarsteinmedia/dotlottie-player-light'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'your-app-name';
}
```

2.  将玩家添加到您的 html 模板中 .

### React.js / Next.js (英语)

如果您已经导入了父组件的库, 您不需要再次导入该组件的子组件 。 如果您想要指定元素需要使用的 CSS 类注释 `class` 名称空间,而不是 `className`。 。 。 .

```tsx
import '@aarsteinmedia/dotlottie-player-light'

function App() {
  return (
    <dotlottie-player
      class="your-class-name"
      src="https://storage.googleapis.com/aarsteinmedia/am.lottie"
      autoplay
      controls
      subframe
      loop
      style={{
        width: '320px',
        margin: 'auto'
      }}
    />
  )
}

export default App
```

如果您正在使用 TypeScript 并想要指定组件 a `ref`你可以这样

```tsx
import { useRef } from 'react'
import '@aarsteinmedia/dotlottie-player-light'
import type DotLottiePlayer from '@aarsteinmedia/dotlottie-player-light'

function App() {
  const animation = useRef<DotLottiePlayer | null>(null)
  return (
    <dotlottie-player
      ref={animation}
      src="https://storage.googleapis.com/aarsteinmedia/am.lottie"
    />
  )
}

export default App
```

### Vue.js / Nuxt.js (使用vite.js) 互联网档案馆的存檔,存档日期2013-12-02

相较于React和Angular,还有一对额外的台阶,但肯定没有什么过于令人生畏.

1.  宣布dotlottie-player标签为自定义元素,以阻止Vue试图解决.

#### 在Vue.js语中

`vite.config.ts`数字 :

```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag: string) => ['dotlottie-player'].includes(tag),
        }
      }
    })
  ]
})
```

#### 在 Nuxt.js 中

`nuxt.config.ts`数字 :

```typescript
export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: (tag: string) => ['dotlottie-player'].includes(tag),
    }
  }
})
```

2.  导入/启动组件.

#### 在Vue.js语中

`main.ts`数字 :

```typescript
import { createApp } from 'vue'
import DotLottiePlayer from '@aarsteinmedia/dotlottie-player-light'
import App from './App.vue'

const app = createApp(App)
app.component('DotLottiePlayer', DotLottiePlayer)
```

#### 在 Nuxt.js 中

创建一个 `plugins` 如果根中不存在文件夹, 请添加一个名为文件 `dotlottie-player-light.js`数字 :

```javascript
import DotLottiePlayer from '@aarsteinmedia/dotlottie-player-light'

export default defineNuxtPlugin(({ vueApp }) => {
  vueApp.component('DotLottiePlayer', DotLottiePlayer)
})
```

3.  该组件现在可以在您的页面或组件模板标签中使用.

```vue
<template>
  <dotlottie-player
    src="https://storage.googleapis.com/aarsteinmedia/am.lottie"
    autoplay
    controls
    subframe
    loop
    style="width: 320px; margin: auto;"
  />
</template>
```

## 属性

| 属性/ 属性 | 说明 | 类型 | 默认 |
| --- | --- | --- | --- |
| `autoplay` | 装入时播放动画 | `boolean` | `false` |
| `background` | 背景颜色 | `string` | `undefined` |
| `controls` | 显示控件 | `boolean` | `false` |
| `count` | 循环动画的次数 | `number` | `undefined` |
| `direction` | 动画的方向 | `1` | `-1` | `1` |
| `hover` | 是否在鼠标徘徊时播放 | `boolean` | `false` |
| `loop` | 是否循环动画 | `boolean` | `false` |
| `mode` | 播放模式 | `normal` | `bounce` | `normal` |
| `objectfit` | 调整容器中的动画大小 | `contain` | `cover` | `fill` | `none` | `contain` |
| `speed` | 动画速度 | `number` | `1` |
| `src` _(必须)_ | 给 LottieJSON 或 Dot Lottie 的 URL 地址 | `string` | `undefined` |
| `subframe` | 当启用时,这可以帮助减少一些动画的闪烁,特别是在Safari和iOS设备上. | `boolean` | `false` |

## 方法

| 方法 | 函数 |
| --- | --- |
| `destroy() => void` | 将动画化并去除DOM中的元素. |
| `getLottie() => AnimationItem | null` | 返回组件中使用的Lottie-web实例 |
| `load(src: string) => void` | 通过 URL 或 JSON 对象装入动画 |
| `next() => void` | 下个动画( 如果在文件中有多个) |
| `pause() => void` | 暂停 |
| `prev() => void` | 前一个动画( 如果在文件中有多个) |
| `play() => void` | 播放 |
| `reload() => void` | 重新装入 |
| `seek(value: number | string) => void` | 去装帧。 可以是数字或百分比字符串(例如50%). |
| `setCount(value: number) => void` | 动态设定环数 |
| `setDirection(value: 1 | -1) => void` | 设置方向 |
| `setLooping(value: boolean) => void` | 设置循环 |
| `setMultiAnimationSettings(value: AnimationSettings[]) => void` | 设置多动设置 |
| `setSegment(value: AnimationSegment) => void` | 只播放动画的一部分. 从框架10到框架60 `[10, 60]` |
| `setSpeed(value?: number) => void` | 设定速度 |
| `setSubframe(value: boolean) => void` | 设置子框架 |
| `snapshot() => string` | 抓取当前框架为 SVG 。 触发浏览器中的下载. |
| `stop() => void` | 停下来 |
| `toggleBoomerang() => void` | 切换到 `bounce` 财务报告和审定财务报表 `normal` |
| `toggleLooping() => void` | 切换循环 |
| `togglePlay() => void` | 切换播放 |

## 活动

以下事件已曝光,可通过下列方式收听: `addEventListener` 打电话.

| 名称 | 说明 |
| --- | --- |
| `complete` | 动画完成 — 包括所有循环 |
| `destroyed` | 动画毁灭 |
| `error` | 源无法解析、 无法装入或格式错误 |
| `frame` | 输入新框架 |
| `freeze` | 动画因玩家出镜而暂停 |
| `load` | 动画已装入 |
| `loop` | 循环完成 |
| `play` | 动画已经开始播放 |
| `pause` | 动画已暂停 |
| `ready` | 动画已装入, 玩家已准备好 |
| `stop` | 动画停止了 |

## 文字新闻插件

![](https://npmcn.com/.github/wpIcon.svg)

我们做了一个免费的WordPress插件,它与Gutenberg Blocks, Elementor, Divi Builder 和 Flatsome UX Builder 合作: [AM Lottie Player 文字新闻](https://www.aarstein.media/en/am-lottieplayer)。它具有这个软件包的所有功能,有一个有用的用户界面.

它的超轻量级——并且只在使用动画的页面上加载.

我们还制作了一个溢价WordPress插件,用于购买: [AM LottiePlayer PRO 文字新闻](https://www.aarstein.media/en/am-lottieplayer/pro)。它有一个易于使用的GUI,用于将多个Lottie动画合并到一个文件中并进行控制,将JSON转换为带有拖放功能的DotLottie,以及许多更独有的功能.

## 许可证

GPL-2.0-或-后期

## 常见问题

### @aarsteinmedia/dotlottie-player-light 是什么？

被否决。 使用@aarsteinmedia/ dotlottie- player/ light 代替 \.注意：该包已被作者标记为弃用——Package is deprecated\. Use @aarsteinmedia/dotlottie-player/light instead\.

### 如何安装 @aarsteinmedia/dotlottie-player-light？

在项目目录运行 npm install @aarsteinmedia/dotlottie-player-light，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@types/react（\>= 16\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @aarsteinmedia/dotlottie-player-light 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @aarsteinmedia/dotlottie-player-light 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @aarsteinmedia/dotlottie-player-light 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>= 12\.17\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @aarsteinmedia/dotlottie-player-light 可以商用吗？

@aarsteinmedia/dotlottie-player-light 使用 GPL-2\.0-or-later 许可。强 Copyleft：分发包含该代码的软件时，整个作品需以兼容的 GPL 许可开源。仅在内部使用、不对外分发时不触发此义务。以上为概括，不构成法律意见，请以许可原文为准。

### @aarsteinmedia/dotlottie-player-light 的下载量有多少？

根据 npm 官方下载统计，@aarsteinmedia/dotlottie-player-light 在 2026/10/05 – 2026/11/03 这 30 天内被下载 3,402 次，日均约 113 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @aarsteinmedia/dotlottie-player-light 还在维护吗？

最新版本 6\.0\.0 发布于 2025/06/22（1\.4 年前）；至今共发布 120 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/09/17。作者已将其标记为弃用，新项目建议寻找替代方案。