我正在使用react-native来构建移动应用程序。此外，我正在使用lottie来显示动画（填充水杯）。 （附有图片）。

在应用程序中有一个按钮，单击此按钮时，玻璃将填充1/4（可能会有所变化）玻璃，下一次它将填充另外1/4的玻璃，依此类推。我可以使用以下代码段来做到这一点。但是我想做的是在1/4加水后的水位应该是一条直线。 （动画的最后阶段）但是在下面的代码中，它是动画的1/4。我正在使用adobe after effect来创建动画。所以有人可以建议我解决这个问题吗？

class Screen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0,progress: new Animated.Value(0),};
  }

  handlePress = () => {
    this.setState({value: this.state.value + 0.2},() =>
      Animated.timing(this.state.progress,{
        toValue: this.state.value,duration: 1500,easing: Easing.linear,}).start(),);
  };

  render() {
    return (
      <View style={{flex: 1}}>
        <Text>History</Text>
        <Button
          title="Press"
          onPress={() => {
            this.handlePress();
          }}></Button>
        <LottieView
          source={require('../../assets/7731-water-loading.json')}
          progress={this.state.progress}
          loop={false}
          autoPlay
          autoSize
          style={{width: 400}}
        />
      </View>
    );
  }
}