React Native启动页三张图交叉淡入实现及动画异常问题咨询

常见失效原因 #

• 生命周期时序不匹配：react-native-splash-screen默认逻辑是JS Bundle加载完成后自动触发隐藏，如果你没有手动阻塞hide流程，动画还没开始逐帧渲染，Splash视图就已经被系统移除，最终只会停留在最后加载的图片资源，直接跳转主页面。
• 动画执行线程错误：安卓端如果将视图alpha动画写在子线程，不会触发UI重绘，所有动画逻辑不会实际执行；如果动画总时长大于Splash默认停留超时时间，动画没跑完就会被强制销毁。
• 视图层级配置错误：叠放三张ImageView时如果没有将后两张图初始透明度设为0，系统会直接渲染最后添加到视图树的顶层图片，前面的淡入逻辑完全不会被用户看到。
• iOS端机制限制：苹果官方禁止LaunchScreen层运行任何自定义代码/动画，只能加载静态资源，如果把动画逻辑写在LaunchScreen.storyboard里，永远不会生效。

可落地方案 #

方案1：原生层实现（动画与JS加载并行，首帧即可启动动画） #

• 安卓端配置：
  1. 关闭Splash自动隐藏逻辑，调用SplashScreen.show时传入常驻参数，阻止组件自动销毁视图。
  2. 所有视图操作、动画启动逻辑必须post到主线程执行，核心交叉淡入代码参考：

  // 三张图初始状态：img1 alpha=1，img2、img3 alpha=0
  AnimatorSet crossFadeSet = new AnimatorSet();
  // 第一阶段：图1淡出、图2淡入，时长500ms
  ObjectAnimator fadeOut1 = ObjectAnimator.ofFloat(img1, "alpha", 1f, 0f).setDuration(500);
  ObjectAnimator fadeIn2 = ObjectAnimator.ofFloat(img2, "alpha", 0f, 1f).setDuration(500);
  // 第二阶段：图2淡出、图3淡入，时长500ms
  ObjectAnimator fadeOut2 = ObjectAnimator.ofFloat(img2, "alpha", 1f, 0f).setDuration(500);
  ObjectAnimator fadeIn3 = ObjectAnimator.ofFloat(img3, "alpha", 0f, 1f).setDuration(500);
  
  crossFadeSet.play(fadeIn2).with(fadeOut1);
  crossFadeSet.play(fadeIn3).with(fadeOut2).after(500);
  // 动画全部结束后再触发Splash隐藏
  crossFadeSet.addListener(new AnimatorListenerAdapter() {
      @Override
      public void onAnimationEnd(Animator animation) {
          new Handler(Looper.getMainLooper()).postDelayed(() -> SplashScreen.hide(MainActivity.this), 300);
      }
  });
  crossFadeSet.start();
  

• iOS端配置：不要在LaunchScreen中写动画，在AppDelegate初始化RN根视图后，手动将三个UIImageView添加到window最上层，编写与安卓逻辑一致的alpha渐变动画，动画结束后再将三个视图从window上移除。

方案2：JS层控制（实现成本最低，双端逻辑统一） #

• 放弃原生Splash层的动画逻辑，先让react-native-splash-screen展示一张静态启动底图，等JS上下文加载完成、根组件挂载后立刻调用SplashScreen.hide()，同时在RN根组件最上层覆盖全屏容器，用RN动画组件实现交叉淡入效果，核心逻辑参考：

  import Animated, { useSharedValue, withTiming, Easing } from 'react-native-reanimated';
  import { useEffect, View, StyleSheet, Image } from 'react-native';
  import SplashScreen from 'react-native-splash-screen';
  
  const SplashAnimationLayer = ({ onAnimationEnd }) => {
    const img1Opacity = useSharedValue(1);
    const img2Opacity = useSharedValue(0);
    const img3Opacity = useSharedValue(0);
  
    useEffect(() => {
      SplashScreen.hide();
      const timer1 = setTimeout(() => {
        img1Opacity.value = withTiming(0, { duration: 500, easing: Easing.linear });
        img2Opacity.value = withTiming(1, { duration: 500, easing: Easing.linear });
      }, 500);
      const timer2 = setTimeout(() => {
        img2Opacity.value = withTiming(0, { duration: 500, easing: Easing.linear });
        img3Opacity.value = withTiming(1, { duration: 500, easing: Easing.linear });
      }, 1000);
      const timer3 = setTimeout(() => {
        onAnimationEnd?.();
      }, 1800);
  
      return () => {
        clearTimeout(timer1);
        clearTimeout(timer2);
        clearTimeout(timer3);
      }
    }, []);
  
    return (
      <View style={StyleSheet.absoluteFillObject}>
        <Animated.Image source={require('./assets/splash1.png')} style={[StyleSheet.absoluteFill, {opacity: img1Opacity}]} />
        <Animated.Image source={require('./assets/splash2.png')} style={[StyleSheet.absoluteFill, {opacity: img2Opacity}]} />
        <Animated.Image source={require('./assets/splash3.png')} style={[StyleSheet.absoluteFill, {opacity: img3Opacity}]} />
      </View>
    )
  }
  

• 该方案不需要编写双端原生代码，不存在系统版本兼容问题，适合绝大多数业务场景；只有需要动画在App首帧就启动的场景，才需要选择原生实现方案。

快速排查步骤 #

• 在原生动画的onAnimationStart、onAnimationEnd回调中打日志，确认动画是否真的被触发，检查是不是在动画启动前就已经调用了SplashScreen.hide。
• 临时把动画总时长改成10秒，如果能看到完整动画过程，说明是Splash隐藏时机早于动画结束时间，把hide调用移到动画结束回调里即可。
• 检查三张图片资源是否正确加载，排除前两张图资源路径错误导致透明、直接显示最上层第三张图的问题。
• iOS端优先检查是否把动画逻辑写在了LaunchScreen.storyboard里，如果是，立刻将逻辑迁移到AppDelegate中。

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