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：

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

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

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

1 个答案: