React Native（动画和 setState）

Question

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

（代码需要重构）

Answer 1

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

Answer 2

您所要做的就是链接您的动画。您的动画值将从 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(())
    });
}