Question

68

How to stop a looping animation in React Native?

rated 0 times [ 70] [ 2] / answers: 1 / hits: 19195 / 7 Years ago, fri, february 10, 2017, 12:00:00

I have a simple looping animation in my component like this:

runAnimation() {

    console.log('run animation');

    this.state.angle.setValue(0);

    Animated.timing(this.state.angle, {

        toValue: 360,

        duration: 8000,

        easing: Easing.linear

    }).start(() => this.runAnimation());

}



...



<Animated.Image

    style={[

        styles.rotate,

        { transform: [

            { rotate: this.state.angle.interpolate({

                inputRange: [0, 360],

                outputRange: ['0deg', '360deg']

            })},

        ]}

    ]}

    source={require('./spinning_ball.png')}

/>

How would I stop this animation? For example, when navigating away to another screen or after a user clicks on a button.

I tried using this.state.angle.stopAnimation() but noticed run animation still being printed in the console. Is there a different stop method I should be calling to prevent the start callback from being executed?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

pierre

Add To Favorites

Follow

Total Points: 716

Total Questions: 128

Total Answers: 102

Location: Djibouti

Member since Sun, Feb 27, 2022

2 Years ago

answered 7 Years ago brookelynshaem · Accepted Answer

Based on my comment in Nguyên Hoàng's answer. Here is another way to stop the looping animation if you call this.state.angle.stopAnimation():

runAnimation() {

  this.state.angle.setValue(0);

  Animated.timing(this.state.angle, {

    toValue: 360,

    duration: 8000,

    easing: Easing.linear

  }).start((o) => {

    if(o.finished) {

      this.runAnimation();

    }

  });

}