反應原生動畫重複無窮

Question

我有以下動畫。

componentWillMount(){ 
    this.animatedValue = new Animated.Value(300); 
    } 

    componentDidMount(){ 
    Animated.timing(this.animatedValue , { 
     toValue: -100, 
     duration: 3000, 

    }).start(); 
    } 

    render() { 
    const animatedStyle = { marginLeft: this.animatedValue, marginRight: - this.animatedValue }; 

    return (
     <View style={{flexDirection: 'row', height: 100,}}> 
     <Animated.View style={[ animatedStyle,{backgroundColor: 'blue', width:100}]} /> 
     </View> 
    ); 
    } 

我想重複無盡的時間。任何人有任何建議？

Answer 1

將回調傳遞給Animated.start()，重置Animated值並再次啓動動畫。例如：

componentDidMount(){ 
    this.runAnimation(); 
} 

runAnimation() { 
    this.animatedValue.setValue(300); 
    Animated.timing(this.animatedValue, { 
    toValue: -100, 
    duration: 3000, 
    }).start(() => this.runAnimation()); 
} 

如果您需要在任何時候停止動畫，請查看this question/answer。