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

2019解决方案：

Animated.loop(Animated.timing(this.animatedValue , {
    toValue: -100,
    duration: 3000,
})).start();

Answer 2

将回调传递给重置动画值的Animated.start()并再次启动动画。例如：

componentDidMount(){
  this.runAnimation();
}

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

如果您需要在任何时候停止动画，请查看this question/answer。

反应原生动画重复无限

2 个答案: