Question

我正在尝试对动画值（运动）进行插值，以将其绑定到同时发生的另一个动画（宽度变化）。为什么输入范围不支持递减值？我是不是在想这个错误？

动画将沿向上方向移动（移至屏幕外的点），因此y值必须下降。显然，当向下（递增）方向移动时，动画效果很好。此功能是否完全不适用于我的情况？我可以使用某种解决方法吗？

谢谢。

  state = {
    movementAnimation: new Animated.ValueXY({ x: 0, y: 100 }),
  };

  animateMove = () => {
    Animated.timing(this.state.movementAnimation, {
      toValue: { x: 0, y: -50 },
      duration: 500,
    }).start();
  };

  render() {
    const interpolateMovement = this.state.movementAnimation.y.interpolate({
      inputRange: [100, 20, -50],
      outputRange: ['100%', '50%', '100%'],
    });

    return (
      <View>
        <Animated.View
          style={[styles.card, this.state.movementAnimation.getLayout(),{ width: "100%"}]}>
          <Button onPress={this.animateMove}>GO!!!!!!</Button>
        </Animated.View>
      </View>
    );
  }
}

Answer 1

我检查了您的代码很多您在这些行中有一些小问题

inputRange: [0, 1, 2], //Values should be in ascending order
outputRange: ['100', '50', '100'],// The numbers do not include percentages

您现在可以通过以下方式控制动画

toValue: {x: 0, y: 2},

现在可以正常使用

<Button title={'GO!!!!!'} onPress={this.animateMove} />

我尝试过了！

React Animated-无法插值降序值

1 个答案: