Play particular animation of Lottie library and skip other parts in React Native

Viewed 286
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});
        });
      }
0 Answers
Related