I am using Lottie React Native node package for animations. I have loaded my json file and lottie is working accordingly. Now, in the frontend I have to show 1 picture with animation then second one and third one in loop. Right now everything is working in the loop. Means 1st image then 2nd image and then 3rd image. I tried to control it with the progress but still unable to find out the solution.
<LottieView
source={lottieState.data.animation}
//autoPlay
//loop
style={{width:'100%'}}
//speed={0}
progress={lottieState.progress}
/>
I was implementing it in this way. I set up the state and I was adding the progress into the state. So, on the basis of progress check I think I can leave some animation part. The below function is used to play the animation by loading the json file.
I am not getting any way to achieve the same kind of functionality. Also, in web no any example found related to this.
const play = () => {
//this.setState( { ...lottieState, progressCount: })
Animated.timing(lottieState.progress, {
toValue: props.finalOffset,
duration: 3000,
}).start((value) => {
if( lottieState.progress > 0.5 && lottieState.progress < 0.75 ){
pause();
}
console.log( lottieState.progress,value,'play function')
//co
//this.setState({...lottieState, isAnimating: false});
});
}