React Animated -无法插入降值

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} />

我试过了！