使用react-bodymovin循环动画片段时的访问方法

2024-05-20 • 问答

我正在使用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一起工作的方式的性质，可能无法访问文件中的方法，但是如果有人知道这样做的方法，我很想听听它。谢谢。

您为什么不尝试使用react-lottie软件包？与react-bodymovin相比，它的npm下载次数更多，您可以实现所需的内容并按以下方式播放片段：

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,animationData: animation
      });

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

  return <div ref={animContainer}></div>;
}

使用react-bodymovin循环动画片段时的访问方法

uwycny 回答：使用react-bodymovin循环动画片段时的访问方法

大家都在问