动画和状态问题：在 useEffect 中使用 Animated.spring

Question

我是 React-Native 应用程序开发的新手。
https://snack.expo.io/RjmfLhFYg
如果我取消注释链接的博览会小吃中的第 11 行setTest(false) ，我试图了解为什么动画会停止工作。

谢谢！

相关代码拷贝：

export default function App() {
  const element1 = useRef(new Animated.ValueXY()).current;
  const element2 = new Animated.ValueXY();
  const [test, setTest] = useState(true);

  useEffect(() => {
    // setTest(false);

    setTimeout(() => {
      Animated.spring(
        element2,
        {
          toValue: {x: -10, y: -100},
          useNativeDriver: true
        }
      ).start();
    }, 2000);
  }, []);

  return (
    <View style={styles.container}>
      <Animated.View
        style={[styles.element, {backgroundColor: "blue"}, {
          transform: [
            {translateX: element2.x}, {translateY: element2.y}
          ]
        }]}>
      </Animated.View>
      <Animated.View
        style={[styles.element, {backgroundColor: "red"}, {
          transform: [{translateX: element1.x}, {translateY: element1.y}]
        }]}
        >
      </Animated.View>
    </View>
  );
}

Answer 1

使用状态文档

setState 函数用于更新状态。 它接受一个新的状态值并将组件的重新渲染排入队列。

请记住，当您更改组件的状态时，它会导致“重新渲染”，因此您的 element2 变量会恢复到其初始值。 要解决它，就像使用 element1 一样，在 element2 变量上使用“useRef”钩子。

const element2 = useRef(new Animated.ValueXY()).current;

“useRef”钩子将使变量在整个组件生命周期中保持不变，因此如果组件被重新渲染，它不会受到影响

使用参考文档

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传递的参数 (initialValue)。 返回的对象将在组件的整个生命周期内持续存在。