React Native中状态更新后无法停止Animated循环动画如何解决

• 动画停止逻辑写法错误：代码中Animated.timing(animationRef).stop()会创建一个全新的、从未启动过的动画实例，对这个新实例调用stop()完全无法影响之前已经启动、正在递归循环的旋转动画。
• 无限循环动画缺乏终止判断：通过动画start回调递归调用rotateElement实现无限旋转时，没有在回调入口判断加载状态，就算触发了停止逻辑，已经进入队列的回调还是会在当前动画段结束后重启动画。
• 缺少副作用清理逻辑：动画作为副作用没有在依赖变更、组件卸载时做主动清理，容易出现动画意外常驻运行的问题。

• 用单独的ref存储当前正在运行的动画实例，停止操作直接针对已启动的实例执行
• 在递归旋转函数的入口加状态判断，加载状态为false时直接终止递归，不再重启动画
• 在useEffect中返回清理函数，依赖变更或组件卸载时自动停止运行中的动画

const [isLoading, setIsLoading] = useState(false);
const animationRef = useRef(new Animated.Value(0)).current;
// 存储当前激活的动画实例
const activeAnimation = useRef(null);

const loadData = () => {
  setIsLoading(true);
  setTimeout(() => {
    setIsLoading(false);
  }, 3000)
}


useEffect(() => {
  const rotateElement = () => {
    // 非加载状态直接终止，不再重启动画
    if (!isLoading) return;
    animationRef.setValue(0);
    // 将创建的动画实例存入ref
    activeAnimation.current = Animated.timing(animationRef, {
      toValue: 1,
      duration: 1500,
      easing: Easing.linear,
      useNativeDriver: true,
    });
    // 启动动画，动画结束后递归调用实现循环
    activeAnimation.current.start(rotateElement);
  };

  if (isLoading) {
    rotateElement();
  } else {
    // 停止正在运行的动画实例
    activeAnimation.current?.stop();
    // 可选：停止后重置旋转角度
    animationRef.setValue(0);
  }

  // 清理函数：依赖变更/组件卸载时自动停止动画
  return () => {
    activeAnimation.current?.stop();
  }
}, [isLoading, animationRef]);

const spin = animationRef.interpolate({
  inputRange: [0, 1],
  outputRange: ['0deg', '360deg'],
});

• React Native的Animated每次调用Animated.timing/Animated.spring等方法都会返回全新的动画实例，必须对已经调用过start的同一个实例执行stop才会生效。
• 用start回调递归实现无限动画时，必须在递归入口加终止条件，否则已经排队的回调会在动画段结束后自动重启动画，导致stop失效。
• 动画、定时器这类全局副作用必须配套清理逻辑，避免组件卸载后副作用仍在后台执行引发异常。

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