React Native Animation回飞镖风格实现录制类红色LED平滑无限闪烁问题排查

问题根因 #

你当前代码仅闪烁一次就停止的核心原因是：Animated.loop仅会循环传入的首个动画（也就是透明度从1变0的单段动画），你在回调函数里写的透明度回1的动画不在loop的管控范围内，因此完整闪烁一次后就没有后续执行逻辑了。

修复后代码 #

import { useRef } from 'react';
import { Animated } from 'react-native';

// 首先用useRef存储动画实例，保证全局唯一，避免重复触发useEffect
const fadeAnim = useRef(new Animated.Value(1)).current;

useEffect(() => {
  // 用Animated.sequence串联两段动画，组成单次完整闪烁周期
  const fullBlink = Animated.sequence([
    // 第一段：1s内透明度从1降到0（熄灭）
    Animated.timing(fadeAnim, {
      toValue: 0,
      duration: 1000,
      useNativeDriver: true // 开启原生驱动，动画更流畅不卡JS线程
    }),
    // 第二段：1s内透明度从0升到1（点亮）
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true
    })
  ]);

  // 启动无限循环动画
  const loopAnimation = Animated.loop(fullBlink).start();

  // 组件卸载时停止动画，避免内存泄漏
  return () => loopAnimation.stop();
}, [fadeAnim])

// 渲染逻辑保持不变
<Animated.View style={[styles.recordingLed, {opacity: fadeAnim}]} />

关键调整说明 #

• 用Animated.sequence把两段动画组合为一个完整的闪烁周期，交给Animated.loop后就会无限重复整个流程
• 开启useNativeDriver后动画走原生渲染线程，不会受JS侧逻辑卡顿影响
• 新增卸载时的动画清理逻辑，规避内存泄漏风险

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