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

Question

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

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

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

/>

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

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

640 3

javascript react-native animation

3 ответов:

Comments

Ничего не найдено.

max23_ · Accepted Answer · 2017-09-27 20:52:54

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

Nguyên Hoàng · Accepted Answer · 2017-02-10 05:30:28

Вы можете создать переменную 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 .

Ritesh Vishwakarma · Accepted Answer · 2017-08-10 17:59:50

Установите глобальную переменную
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();
        }
    })
}