功能组件中的 Animated.spring 不适用于 onPress？

Question

我将创建一个通过单击按钮运行的动画，我通过 Animated.timing 顺利完成了此操作，并且没有任何问题，但是当我尝试通过 Animated.spring 运行动画时，它只运行一次，下次单击不t work 我该如何解决这个问题？ Animated.spring 在功能组件中是否可以顺利运行？ 这是我的代码

const BoxShape = () => {
  const jumpValue = new Animated.Value(0);
  const ActiveAnim = () => {
    Animated.spring(jumpValue, {
      toValue: 1,
      friction: 1,
    }).start();
  }

  return (
    <View>
      <Animated.Image
        style={{ transform: [{ scale: jumpValue }], width: 120, height: 120, marginBottom: 30 }}
        source={require('.././images/ball.png')}
      >
      </Animated.Image>
      <Button
        title='Active Ball'
        onPress={ActiveAnim}
      />
    </View>
  )
}

Answer 1

这是正常行为，因为您在第一次运行时将值更新为 1，但从未将其重置为 0，以便动画再次运行。

我建议您在每次运行后将该值重置为 0，方法是将以下代码段添加到您的代码中：p：

const ActiveAnim = () => {
    Animated.spring(jumpValue, {
      toValue: 1,
      friction: 1,
    }).start(() => jumpValue.setValue(0));
  };

start() 接受一个函数作为参数，在动画结束后调用， https://facebook.github.io/react-native/docs/animated#configuring-animations