Доступ к методам при использовании response-bodymovin для зацикливания сегментов анимации

Я использую пакет response-bodymovin (https://www.npmjs.com/package/react-bodymovin), чтобы встроить анимацию Bodymovin, но я хотел зациклить часть анимации после того, как она проигралась один раз.

Я вижу, что использовать HTML-версию Bodymovin просто, поскольку вы просто используете для этого соответствующие методы, например (при условии, что div имеет идентификатор 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, может быть невозможно получить доступ к методам в файле, но если кто-то знает способ сделать это, я хотел бы это услышать. Спасибо.


reactjs lottie bodymovin
person Oli C    schedule 25.11.2019    source источник
comment
это выглядит интересно, можете ли вы, чтобы stackblitz HTML ТОЛЬКО не реагировал, никогда не использовал bodymovin, поэтому я действительно не знаю, что вы ищете   -  person Renaldo Balaj    schedule 29.11.2019

Ответы (1)


arrow_upward
3
arrow_downward

Почему бы вам не попробовать вместо этого пакет react-lottie? У него намного больше npm-загрузок, чем у 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. Однако вы можете использовать пакет lottie-web так же, как и в обычном javascript, так же, как вы показали. Вот пример того, как вы должны это делать при помощи хуков:

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>;
}
person oemera    schedule 01.12.2019
comment
Спасибо за ответ, я действительно перешел на плагин Lottie, но даже с атрибутом сегментов, установленным, как в вашем примере, анимация воспроизводится от начала до конца, а не зацикливается на определенном разделе. - person Oli C; 01.12.2019
comment
Хм, жаль, работает ли другой пример с lottie-web? Существует проблема, которая уже отчасти связана с этим: github.com/chenqingspring/react- lottie / issues / 82 Если хотите, вы можете создать новый выпуск для решения этой проблемы. - person oemera; 01.12.2019
comment
Нет, это тоже не сработало, поэтому я постараюсь сделать так, чтобы команда Лотти знала. Спасибо за помощь oemera. - person Oli C; 02.12.2019