0

我将创建一个通过单击按钮运行的动画，我通过 Animated.timing 顺利完成此操作，没有任何问题，但是当我尝试通过 Animated.spring 运行动画时，它只运行一次，下次点击不会t 工作 我该如何解决这个问题？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>
  )
}
4

1 回答 1

3

这是正常行为，因为您在第一次运行时将值更新为 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

于 2019-12-28T08:42:05.023 回答