Dot LottiePlayer 反应组件

这是一个反应组件,用于在您的反应项目中轻而易举地嵌入和播放点Lottie动画.

什么是多特罗蒂?

dot Lottie是一种开源文件格式,将一个或多个 Lottie 文件及其相关资源合并为一个文件. 这些文件是使用Deflate压缩方法压缩的ZIP档案并有文件扩展".lottie".

更多关于洛蒂点的信息!

文档

查看全部文档

安装

您可以安装 @dotlottie/react-player 使用 npm :

npm install @dotlottie/react-player

线条 :

yarn add @dotlottie/react-player

使用量

用于 @dotlottie/react-player 在反应工程中,导入组件如下:

import React from 'react';
import { DotLottiePlayer, Controls } from '@dotlottie/react-player';
import '@dotlottie/react-player/dist/index.css';

const App = () => {
  return (
    <div>
      <DotLottiePlayer
        src="/path-to-lottie.lottie"
        autoplay
        loop
      >
        <Controls />
      </DotLottiePlayer>
    </div>
  );
};

export default App;

道具

这个 DotLottiePlayer 组件接受下列道具:

活动

以下事件通过互联网曝光: onEvent 函数 :

实例

倾听事件:

import React, { useState } from 'react';
import { DotLottiePlayer, Controls, PlayerEvents } from '@dotlottie/react-player';
import '@dotlottie/react-player/dist/index.css';

const App = () => {
  const [loading, setLoading] = useState(true);

  return (
    <div>
      {loading ? (
        <div>loading....</div>
      ) : (
        <DotLottiePlayer
          src="/path-to-lottie.lottie"
          onEvent={(event: PlayerEvents) => {
            if (event === PlayerEvents.Ready) {
              setLoading(false);
            }
          }}
          autoplay
          loop
        >
          <Controls />
        </DotLottiePlayer>
      )}
    </div>
  );
};

export default App;

获取玩家实例和调用方法 :

import React, { useRef } from 'react';
import { DotLottiePlayer, Controls, PlayerEvents } from '@dotlottie/react-player';
import '@dotlottie/react-player/dist/index.css';

const App = () => {
  const lottieRef = useRef<DotLottieRefProps>();

  return (
    <div>
      <DotLottiePlayer
        lottieRef={lottieRef}
        src="/path-to-lottie.lottie"
        onEvent={(event: PlayerEvents) => {
          if (event === PlayerEvents.Ready) {
            // Play next animation.
            lottieRef.current?.next();
          }
        }}
        autoplay
        loop
      >
        <Controls />
      </DotLottiePlayer>
    </div>
  );
};

export default App;

方法

您可以使用玩家实例访问这些方法 :

• getLottie(): AnimationItem | undefined 返回 乐天网 举个例子.

• getManifest(): Manifest | undefined 返回 .lottie 现相.

• next(getOptions?: (currPlaybackOptions?: PlaybackOptions, manifestPlaybackOptions?: PlaybackOptions) => PlaybackOptions): void 播放列表中的下个动画.

• play(indexOrId?: string | number, getOptions?: (currPlaybackOptions?: PlaybackOptions, manifestPlaybackOptions?: PlaybackOptions) => PlaybackOptions): void 播放当前动画或带有经过的回放选项的指定动画.

• previous(getOptions?: (currPlaybackOptions?: PlaybackOptions, manifestPlaybackOptions?: PlaybackOptions) => PlaybackOptions): void 在列表中播放上一个动画.

• reset(): void 重新设置或返回默认/初始动画 .

• resize(): void 如果画布渲染器调整画布大小 .

• seek(frame: number): void 寻找特定框架.

• setBackground(background: string): void 设置容器背景 .

• setDefaultTheme(defaultTheme: string): void 设置默认主题( 应用所有动画) .

• setDirection(direction: AnimationDirection): void 设置玩家方向。 (应用所有动画)

• setHover(hover: boolean): void 设定是否在悬浮上玩( 适用于所有动画) .

• setIntermission(intermission: number): void 设置循环之间的暂停( 适用于所有动画) .

• setLoop(loop: number | boolean): void 设置循环行为(适用于所有动画).

• setPlayMode(mode: PlayMode): void 设定玩家对所有动画的玩法模式(如弹出或正常).

• setSpeed(speed: number): void 设置播放速度( 应用所有动画) .

• togglePlay(): void 切换游戏状态 .

• pause(): void 暂停动画.

• stop(): void 停止动画.

• getContainer(): HTMLDivElement | undefined 得到动画容器.

捐款

我们使用更改器来维护此寄存器的更改日志 。 在对代码库做任何会影响功能或性能的修改时,我们要求显示一个更改器.

要添加更改列表, 运行 :

pnpm changeset add

选择您想要的版本缓冲类型(主要,次要,补丁).

您可以通过打开“. changerset”文件夹中创建的“. mdm”命令所创建的“. md”文件来记录细节变化,并正确使用Markdown格式。 打开文件,它应该看起来像这样:

---
"@dotlottie/common": minor
"@dotlottie/react-player": major
---

This is where you document your **changes** using Markdown.

- You can write
- However you'd like
- In as much detail as you'd like

Aim to provide enough details so that teammates and future you can understand the changes and the context of

 the change.

将您的更改和更改列表提交您的分支, 然后在开发分支上创建拉动请求 .

我们其他乐天图书馆

以下是我们其他与洛蒂有关的图书馆:

• lottie 反应: Lottie Web 播放器的回放组件.
• 洛特维:洛蒂玩家的Vue组件.
• 斯维特-洛特-玩家: Lottie 玩家组件用于斯维尔特.
• j 罗蒂: j Lottie作为通用乐天玩家是合适的,尽管它执行核心玩家中的一个子集特征. 这种做法导致一个很小的足迹和出色的业绩.
• 乐蒂互动: 这是一个小库,用于在您 Lottie 动画中添加滚动,光标交互和交互链.
• 劳蒂 -js:库由将Lottie JSON映射到对象模型并和属性相互作用的方法组成,以及操纵它们的方法.

许可证

麻省理工学院许可证 ^ LottieFiles.com