React native-停止动画

我正在尝试在加载数据后停止动画。为了测试，我使用计时器模拟状态变化（数据已加载）来中断动画。问题是，状态更改后，动画会继续运行。

  const [isLoading, setIsLoading] = useState(false);
  const animationRef = useRef(new Animated.Value(0)).current;

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

  useEffect(() => {
    const rotateElement = () => {
      animationRef.setValue(0);
      Animated.timing(animationRef, {
        toValue: 1,
        duration: 1500,
        easing: Easing.linear,
        useNativeDriver: true,
      }).start(rotateElement);
    };

    if (isLoading) {
      rotateElement();
    } else {
      Animated.timing(animationRef).stop();
        }
  }, [isLoading, animationRef]);

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

小吃：https://snack.expo.dev/@荒地时间/计时器