返回

React native-停止动画

发布时间:2022-06-13 15:54:02 189

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

  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/@荒地时间/计时器

特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(0)
按点赞数排序
用户头像
相关帖子