保存动画实例以供以后使用

Question

我正在尝试将Lottie对象保存，并使用以后使用的方法（另一种使用效率）到该州，但该州表示这是无效的。

我想使用文档中指定的anim.playsegments方法。

lottie 文档。

更新＃1：尝试在依赖项数组和事件侦听器中包括动画，以检查动画是否已加载，但这无济于事，应用程序会导致周期。

动画现在无限期加载

更新＃2 ：在使用效果之外声明一个变量，并在其内部定义它。摆脱了国家的方法。动画仍然为空。

import React, { useEffect, useRef, useState } from 'react';
import { useColorMode } from '@chakra-ui/react';
import lottie from 'lottie-web';
import animationData from '../assets/json/sun-to-night'

const ColorMode = () => {
  const container = useRef(null)
  const { colorMode, toggleColorMode } = useColorMode()

  // Segments of the animation
  const midToEnd = [14, 28]
  const startToMid = [0, 14]

  let anim = null

  useEffect(() => {
    anim = lottie.loadAnimation({
      container: container.current,
      animationData: animationData,
      autoplay: false,
      loop: false,
      name: 'anim'
    })

    // Here the animation instance exists and animation is played
    console.log(`${anim}`)
    anim.playSegments(
      (colorMode === 'dark'
        ? startToMid
        : midToEnd), true
    )
  }, []);

  useEffect(() => {
    //anim is null in here and the React app throws an error
    anim.addEventListener('DOMLoaded', () => {
      anim.playSegments(
        (colorMode === 'dark'
          ? startToMid
          : midToEnd), true
      )
    })
  }, [colorMode])


  return (
    <>
      <div>
          ref={container}
          onClick={toggleColorMode}
      </div>
    </>
  )
}

export default ColorMode;

Answer 1

您需要等到Lottie加载。您可以通过收听domloaded事件来做到这一点：

 const anim = lottie.loadAnimation({
        container: container.current,
        animationData: animationData,
        autoplay: false,
        loop: false,
        name: 'anim'
      });

anim.addEventListener('DOMLoaded', () => {
  anim.playSegments(
        (colorMode === 'dark'
          ? startToMid
          : midToEnd), true
      )
});

更多此处：
https://github.com/airbnb/lottie-web#events

Answer 2

我通过在第二个使用效果挂钩中使用Lottie的内置方法“ GetRegisteredAnimations”解决了问题，并解析了我的动画数组的第一个元素。

然后，我将其存储到一个可以操纵动画的变量中。
这有点解决方法，但有效。如果有人有更好的方法，请随时分享。

这是最终代码：

import React, { useEffect, useRef, useState } from 'react';
import { useColorMode } from '@chakra-ui/react';
import lottie from 'lottie-web';
import animationData from '../assets/json/sun-to-night'

const ColorMode = () => {
  const container = useRef(null)
  const { colorMode, toggleColorMode } = useColorMode()

  // Segments of the animation
  const midToEnd = [14, 28]
  const startToMid = [0, 14]

  let anim = null

  useEffect(() => {
    anim = lottie.loadAnimation({
      container: container.current,
      animationData: animationData,
      autoplay: false,
      loop: false,
      name: 'anim'
    })
    // This bit worked from the beginning
    anim.playSegments(
      (colorMode === 'dark'
        ? startToMid
        : midToEnd), true
    )
  }, []);

  useEffect(() => {
    anim = lottie.getRegisteredAnimations()[0]
    //anim no longer throws null
    anim.playSegments(
      (colorMode === 'dark'
        ? startToMid
        : midToEnd), true
    )
  }, [colorMode])

  return (
    <>
      <div>
          ref={container}
          onClick={toggleColorMode}
      </div>
    </>
  )
}

export default ColorMode;