React Native Lott ie - анимация прогресса с использованием состояния - PullRequest
Новая
       56

React Native Lott ie - анимация прогресса с использованием состояния

0 голосов
/ 09 апреля 2020

Я использую react-native для создания мобильного приложения. Кроме того, я использую lottie, чтобы показать анимацию (заполнение жидкого стекла). (Изображение прилагается).

enter image description here

В приложении есть кнопка, и при нажатии на нее стекло заполняется на 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>
    );
  }
}
...