Реагируйте на остановку анимации перед началом новой анимации - PullRequest
Новая
       22

Реагируйте на остановку анимации перед началом новой анимации

0 голосов
/ 16 июня 2019

Мое приложение имеет круг, размер которого определяется цикличной анимацией. Он также содержит 3 фрагмента текста, один из которых должен быть виден одновременно - с непрозрачностью, определяемой цикличной анимацией. Время анимации может быть изменено пользователем в настройках.

При изменении времени размер круга действует так, как и должен, но два бита текста отображаются одновременно, а это означает, что анимация не полностью сброшена.

Я не очень опытен в реагировании на нативном языке, и я знаю, что это всего лишь небольшая ошибка, но я хотел бы ее исправить, поэтому я прошу благотворительную организацию по охране психического здоровья, если они опубликуют мое приложение для меня!

Код анимированной последовательности: 

breathAnimation =
      Animated.loop(
        Animated.sequence([
        Animated.timing(this.state.inhaleAnimation, {toValue: 1, duration:10}),
        Animated.timing(this.state.circleAnimation, {toValue: 1, duration:this.props.in*1000}),
        Animated.timing(this.state.inhaleAnimation, {toValue: 0, duration:10}),
        Animated.timing(this.state.holdAnimation, {toValue: 1, duration:10}),
        Animated.timing(this.state.holdAnimation, {toValue: 0, duration:10, delay: this.props.hold*1000}),
        Animated.timing(this.state.exhaleAnimation, {toValue: 1, duration:10}),
        Animated.timing(this.state.circleAnimation, {toValue: 0.6, duration:this.props.out*1000}),
        Animated.timing(this.state.exhaleAnimation, {toValue: 0, duration:10}),
  ]))

А при обновлении настроек: 

  componentWillReceiveProps(nextProps){
    console.log(nextProps)
    // this.breathAnimation.stop()
    // this.breathAnimation.reset()
    console.log('restarting animation with in: ', nextProps.in, ' hold: ', nextProps.hold, ' out: ', nextProps.out)
    this.breathAnimation.stop()
    newAnimation =
      Animated.loop(
        Animated.sequence([
        Animated.timing(this.state.inhaleAnimation, {toValue: 1, duration:10}),
        Animated.timing(this.state.circleAnimation, {toValue: 1, duration:nextProps.in*1000}),
        Animated.timing(this.state.inhaleAnimation, {toValue: 0, duration:10}),
        Animated.timing(this.state.holdAnimation, {toValue: 1, duration:10}),
        Animated.timing(this.state.holdAnimation, {toValue: 0, duration:10, delay: nextProps.hold*1000}),
        Animated.timing(this.state.exhaleAnimation, {toValue: 1, duration:10}),
        Animated.timing(this.state.circleAnimation, {toValue: 0.6, duration:nextProps.out*1000}),
        Animated.timing(this.state.exhaleAnimation, {toValue: 0, duration:10}),
  ]))
    this.breathAnimation.reset()
    newAnimation.start()
  }

Полный исходный код: https://github.com/billyb1234/Breathe

Код находится под экранами / circle.js

Любая помощь будет принята с благодарностью !!

...