I am using react-native to build the mobile Application. Moreover, I am using lottie to show an animation (filling water glass). (Image is attached).
In the application there is a button and when that is clicked a glass will be filled 1/4 (this can vary) of the glass and next time it will fill the other 1/4 of the glass and so on. I was able to do that using following code snippet. But what I want do is after 1/4 of water filling the water level should be a straight line. (last stage of the animation) But in following code it's 1/4 of the animation. I am using adobe after effect to create the animation. So can any one suggest me a solution for this.
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> ); }}