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

可以通过手动控制动画播放时机实现延迟效果，具体步骤如下：

1. 给Lottie组件添加ref以获取组件实例
2. 将autoPlay设为false，关闭默认自动播放
3. 用useEffect配合setTimeout，在组件挂载完成后延迟0.5秒触发播放

修改后的完整代码：

import { useRef, useEffect } from 'react';
import Lottie from 'lottie-react-native';

const YourComponent = () => {
  const lottieRef = useRef(null);

  useEffect(() => {
    // 延迟500毫秒（0.5秒）后启动动画
    const timer = setTimeout(() => {
      lottieRef.current?.play();
    }, 500);

    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearTimeout(timer);
  }, []);

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

export default YourComponent;

关键说明 #

• useRef用于存储Lottie组件实例，让我们能调用其play()方法手动触发播放
• useEffect的空依赖数组确保逻辑只在组件挂载完成后执行一次
• 增加定时器清除逻辑，防止组件卸载后定时器仍运行引发潜在问题

内容的提问来源于stack exchange，提问作者BennKingy