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

Question

我将创建一个通过单击按钮运行的动画，我通过 Animated.timing 顺利完成此操作，没有任何问题，但是当我尝试通过 Animated.spring 运行动画时，它只会运行一次又一次点击不起作用 我怎样才能解决这个问题？ 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，方法是在您的代码中添加如下 sn-p :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