0

我面临一个与使用 setState（功能组件）反应原生动画相关的特定问题，我使用 setInterval 进行了倒计时，并且每一秒我都会创建一个 setState，每当我有一个 setState 时，动画都会重置并重新启动，我不知道为什么，我也在使用这样 const opacity = new Animated.Value(0) const animatedValueRef = useRef(opacity)的 useRef ，动画是这样循环的（每个 250 毫秒）

        Animated.timing(animatedValueRef.current, {
            toValue: 1,
            duration: 220,
            easing: Easing.ease,
            useNativeDriver: true,
        }).start((event) => {
           if(event.finished) {
               opacity.setValue(0);
               second();
           }
        });
    }

谢谢！

编辑：这就是我实现倒计时的方式：

    function step1(max, onoff) {

        let intervalId;
        let varCounter = 1;
        setAnimation(true); //animation starts
        irrigation(); //animation call
        let counter = function () {
            if (varCounter < max) {
                varCounter= varCounter + 1;
                setCounter(varCounter + "  " + onoff)
            } else {
                clearInterval(intervalId);
                setCounter(" ");
                setAnimation(false);
            }
        };
        intervalId = setInterval(()=>{counter()}, 1000);
    }

（代码需要重构）

4

2 回答 2

1

基本上，每次组件状态发生变化时，组件都会重新渲染。组件获得更新的状态，React 决定是否应该重新渲染组件。默认情况下，React 会一直重新渲染所有内容。

于 2021-02-15T15:19:48.000 回答
0

您所要做的就是链接您的动画。您的动画值将从 0 变为 1，然后第二个动画将使值从 1 变为 0。您只需在计数器功能中 1 秒后再次启动动画。我建议制作useNativeDriver: false. 根本不需要 setState。

    Animated.timing(animatedValueRef.current, {
        toValue: 1,
        duration: 220,
        easing: Easing.ease,
        useNativeDriver: true,
    }).start(() => {
        Animated.timing(animatedValueRef.current, {
          toValue: 0,
          duration: 220,
          easing: Easing.ease,
          useNativeDriver: true,
        }).start(())
    });
}
于 2021-02-15T16:32:44.680 回答