React Native Lottie - 在 Animation 结束反向

Question

Context

I am new to lottie-react-native and have managed to implement my first animation:

constructor(props) {
    super(props);
    this.state = {
        progress: new Animated.Value(0),
        loop: true
    }
}
componentDidMount() {
    this.animation.play();
}
render() {
const { progress, loop } = this.state;
return (
    <View style={{display:'flex',height:'auto', alignItems: 'center',justifyContent:'center'}}>
    <LottieView
    ref={animation => {
        this.animation = animation;
      }}
    speed={1}
    autoPlay
    source={NOACTIVITY}
    progress={progress}
    loop={loop}
    height={300}
    width={300}
    style={{margin:0,}}
  />
  </View>
)

}

The Problem

I am now trying to create a loop with this animation that plays it forwards, then plays it backwards and then starts the process again.

I have done some research and concluded that this must be completed using the animated values and timing? I have found many examples ( in the react native docs! ) of playing forwards and backwards but not together.

Can this be completed on component did mount? or does it have to be a separate function?

Thanks in advance!

Answer 1

The solution I came up with was using a sequence inside a loop as follows:

AnimateFunction = () => {
    Animated.loop(
        Animated.sequence([
            Animated.timing(
                this.state.progress,
                {
                  toValue: 1,
                  duration: (5000),
                  //easing: Easing.linear()
                }
              ),
              Animated.timing(
                this.state.progress,
                {
                  toValue: 0,
                  duration: (5000),
                  //easing: Easing.linear()
                }
              )
        ])

    ).start();
  }

I found that adding easing made the animation jump a little when the application restarted at 0 so it is commented out for now.

Answer 2

So one thing you can do is use Animated.loop() for this.state.progress and then reverse the speed of the animation every iteration.

AnimateFunction = () => {
  Animated.loop(
    Animated.timing(
      this.state.progress,
      {
        toValue: 1,
        duration: (your duration of anim),
        easing: Easing.linear()
      }
    )
  ).start(
    () => {
      this.animation.setSpeed(this.animation.speed * -1);
    }
  );
}

and then change your componentDidMount to:

componentDidMount() {
  this.AnimateFunction();
}

I am not sure without testing but it is possible you may need to reset this.state.progress.setValue(0) at the same time you set speed after each loop. Keep that in mind in case it doesnt work at first.

Although I am interested to see if you have the same following issue as I do. When I loop lottie animations in React Native for some reason they pause in between loops... anyways hope this works for you

Answer 3

onAnimationFinish you can use when animatation is finished

<LottieView
          ref={(el) => {
            lottie = el;
          }}
          autoPlay={false}
          loop={false}
          style={styles.lottie}
          source={animationFile}
          enableMergePathsAndroidForKitKatAndAbove
          onAnimationFinish={onAnimationFinish}
        />

Answer 4

Better and clean solution

const defaultEvent = {
    eventName: 'complete',
    callback: () => {
        alert("loopComplete")
       /*Insert your handlers here*/
    },
};

And then on your Lottie component:

<Lottie
    options={defaultOptions}
    height={400}
    width={400}
    eventListeners={[defaultEvent]}
/>

Event names you can use: complete , loopComplete , enterFrame , segmentStart , config_ready , data_ready , loaded_images , DOMLoaded , destroy

(Edit) I read later that this is for react-native, unforturnately, and I apologize, this is a react-js solution