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

NguyênHoàngの答えに基づいています。

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 === 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

設定するグローバル変数変数（dataloaded）をオーバーライドアニメーションを停止するには

let dataloaded = false; 

あなたがをいつでも：ここでは、this.state.angle.stopAnimation()を呼び出す場合、ループアニメーションを停止する別の方法があります

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(); 
     } 
    }) 
}