Как остановить анимацию цикла в React Native?

Question

У меня есть простая анимация в захвате петли моего компонента, как это:

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')} 
/> 

Как бы остановить эту анимацию? Например, при переходе на другой экран или после нажатия пользователем кнопки.

Я попытался с помощью this.state.angle.stopAnimation() но заметил запустить анимацию еще напечатанный в консоли. Есть ли другой метод остановки, который я должен вызывать, чтобы предотвратить запуск обратного вызова?

Answer 1

Основываясь на моем комментарии в ответе Нгуена Хоанга. Вот еще один способ, чтобы остановить циклическую анимацию, если вы звоните 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(); 
    } 
    }); 
} 

Answer 2

Вы можете создать переменную stopAnimation, чтобы остановить анимацию, когда захотите, только когда stopAnimation === false, а затем обратный вызов runAnimation. Как пример:

this.state = { stopAnimation: false } 

runAnimation() { 
    this.state.spinValue.setValue(0); 
    Animated.timing(
    this.state.spinValue, 
    { 
     toValue: 1, 
     duration: 3000, 
     easing: Easing.linear 
    } 
).start(() => { 
    if(this.state.stopAnimation === false) { 
     this.runAnimation(); 
    } 
    }); 
} 

Так что вам просто нужно создать кнопку, которая вызывать функцию this.state = { stopAnimation: true }, чтобы остановить анимацию.

Пример: https://rnplay.org/apps/Lpmh8A.

Answer 3

Установить глобальную переменную

let dataloaded = false; 

Чтобы остановить анимацию переопределить переменную (DataLoaded) всякий раз, когда вы хотите

componentWillUnmount() { 
    dataloaded = true; 
} 

onPress={() => { 
    dataloaded = true; 
}} 

Окончательный код будет выглядеть так:

runAnimation() { 
    console.log('run animation'); 
    this.state.angle.setValue(0); 
    Animated.timing(this.state.angle, { 
     toValue: 360, 
     duration: 8000, 
     easing: Easing.linear 
    }) 
    .start(() => { 
     if (! dataloaded) { 
      this.runAnimation(); 
     } 
    }) 
}