如何将启动动画延迟添加到lottie-react-native

5t7ly7z5 于 2023-02-05 发布在 React

关注(0)|答案(1)|浏览(146)

这是我的组件，我希望动画在页面登陆后0.5s开始。我该如何实现呢？

此处无延迟支持：https://github.com/lottie-react-native/lottie-react-native/

<Lottie
  style={[
    {
      position: 'relative',
      height: 160,
      width: 160,
    },
    spacing.gbMt1,
  ]}
  autoPlay={true}
  loop={false}
  source={require('../assets/lottie/Coach001.json')}
/>

react-native

来源：https://stackoverflow.com/questions/75326060/how-to-add-starting-animation-delay-to-lottie-react-native

1条答案

按热度按时间

n6lpvg4x1#

没有添加时间延迟的属性，但是您可以使用这些API方法来播放、暂停、恢复和重置动画。您需要将autoplay设置为false，并在5秒的超时时间内调用"play"方法以实现所需的延迟。

useEffect(() => {
  setTimeout(() => {
    ref?.current?.play();
  }, 500)
}, [])

<Lottie
  ref={ref}
  style={[
    {
      position: 'relative',
      height: 160,
      width: 160,
    },
    spacing.gbMt1,
  ]}
  autoPlay={false}
  loop={false}
  source={require('../assets/lottie/Coach001.json')}
/>

赞(0）回复(0）举报 2023-02-05

我来回答

如何将启动动画延迟添加到lottie-react-native

1条答案

相关问题

热门标签

最新问答