2017-04-13 109 views
0

我想在屏幕上製作一系列動畫,其中一秒會無限循環。我有一個問題,正確調用它們。我試圖從componentDidmount中刪除.start()並執行.start((()=> this.animate2),但它弄亂了整個動畫。我無法弄清楚如何正確地做到這一點。動畫的循環序列

在此先感謝!

爲了簡化它看起來像這樣的代碼:

animate1(){Animated.sequence([...])} 
animate2(){Animated.sequence([...])} 

在componentDidmount我叫他們兩個:

componentDidMount() { 
     Animated.sequence([ 
     this.animate1(), 
     Animated.delay(3000), 
     this.animate2() 
     ]).start(); 

回答

0

你只想animate2循環下去嗎?如果你試圖分離這些動畫呢?

componentDidMount() { 
    Animated.sequence([ 
    this.animate1(), 
    Animated.delay(3000), 
    ]).start(() => this.animate2()); 
} 

animate2 =() => { 
//not sure what this does but you would put that logic here 
//for example 
    Animated.timing(
    this.state.fadeAnim, 
    { 
    toValue: 1, 
    } 
).start(() => this.animate2()); // recursively call this.animate2 
} 
+0

我試過這樣做,但問題是,然後animate2()幾乎立即開始動畫,不尊重componentDidMount()中的順序。此外,在函數運行一次後,我得到一個錯誤:undefined不是一個對象(評估'動畫[current] .start') – misi06

0

@Matt Aft 謝謝!您的回覆實際上是雙重檢查後解決我的問題!非常感謝! 祝你有美好的一天:)