4

我正在使用 react-bodymovin 包（https://www.npmjs.com/package/react-bodymovin）嵌入 Bodymovin 动画，但我想在动画播放一次后循环播放一段动画。

我可以看到使用 HTML 版本的 Bodymovin 很简单，因为您只需使用相关方法来执行此操作，例如（假设 div 具有 ID bodymovin：

const params = {
    container: document.getElementById('bodymovin'),
    renderer: 'svg',
    loop: false,
    autoplay: false,
    animationData: animationData,
}

const anim = bodymovin.loadAnimation(params)

anim.playSegments([[0, 65]], true)

但是，我不确定在使用 React 组件时如何访问这些相同的方法。这是我的组件：

import React from 'react'
import ReactBodymovin from 'react-bodymovin'
import animation from './animation.json'

const App = () => {
  const bodymovinOptions = {
    loop: true,
    autoplay: true,
    prerender: true,
    animationData: animation
  }

  return (
    <div>
      <ReactBodymovin options={bodymovinOptions} />
    </div>
  )
}

我有一种感觉，由于这个 React 包装器与 Bodymovin 一起工作的方式的性质，可能无法访问文件中的方法，但如果有人知道这样做的方法，我很想听听。谢谢。

4

1 回答 1

3

你为什么不试试react-lottie包呢？它有更多的 npm-downloads react-bodymovin，你可以实现你想要的并播放如下片段：

import React from 'react'
import animation from './animation.json'

import Lottie from 'react-lottie';

const App = () => {
  const options= {
    loop: true,
    autoplay: true,
    prerender: true,
    animationData: animation
  }

  return (
    <div>
      <Lottie options={options} segments={[0, 65]} />
    </div>
  )
}

但是，对于这两个包，您将无法完全控制lottie对象，因此无法调用loadAnimation或loadSegments手动调用方法。但是，您可以像在普通 javascript 中那样使用lottie-web包，正如您所展示的那样。这是一个示例，您应该如何使用钩子做出反应：

import React, { useEffect, useRef } from "react";
import lottie from "lottie-web";
import animation from "./animation.json";

const App = () => {
 const animContainer = useRef<HTMLDivElement>(null);

 useEffect(() => {
    if (ref.current) {
      const anim = lottie.loadAnimation({
        container: animContainer.current,
        renderer: "svg",
        loop: true,
        autoplay: true,
        animationData: animation
      });

     anim.playSegments([[0, 65]], true);
    }
  });

  return <div ref={animContainer}></div>;
}
于 2019-12-01T14:13:50.777 回答