Question

我试图将以下动画置于无限循环中，直到出现特定状态：

class MyModal extends Component {
    constructor() {
        super()
        this.springValue = new Animated.Value(0.3)
    }

    spring = () => {
        this.springValue.setValue(0.3)
        Animated.spring(
            this.springValue,
            {
                toValue: 1,
                friction: 1,
                tension: 1,
                duration:5000

            }
        ).start()
    }

    componentDidMount() {
        this.spring()
    }

    render() {
        return (
            <View>
                <Modal
                    animationType="none"
                    transparent={false}
                    visible={this.state.modalVisible}
                    onRequestClose={() => null}
                >
                    <View style={styles.backgroundStyle}>                       
                        <Animated.Image 
                            source={require("./my-awesome-image.png")} 
                            style={{ width: 143, height: 125, top: 100, transform: [{scale: this.springValue}]}}
                        />
                    </View>
                </Modal>
            </View>
        );
    }
}

这里的一切都很棒，动画完成一次（因为我没有在任何地方循环）。

在达到特定状态之前，如何保持Animated.Image循环？我只想要它无限循环，能够在我准备好时停止动画或启动另一个动画。

Answer 1

将动画存储在您可以访问的变量中，然后使用.start()包装动画。然后，您可以随意使用.stop()和this.springAnimation = Animated.loop( Animated.spring( this.springValue, { toValue: 1, friction: 1, tension: 1, duration:5000 } ).start() )保存动画的变量。

所以这样的事情应该做：

{{1}}

您可以在此处找到有关此内容的更多信息：

https://facebook.github.io/react-native/docs/animated.html#loop

Answer 2

将回调传递给start函数以检查是否重新启动动画。你可以把它分解成这样的东西：

onSpringCompletion = () => {
  if (arbitraryCondition) {
    this.spring();
  }
}

spring = () => {
      this.springValue.setValue(0.3)
      Animated.spring(
          this.springValue,
          {
              toValue: 1,
              friction: 1,
              tension: 1,
              duration:5000

          }
      ).start(this.onSpringCompletion);
  }

Answer 3

您可以使用setInterval来保持播放动画，并随时删除间隔。我会这样做：

componentDidMount() {
   this.interval = setInterval(() => this.spring(), 5000) // Set this time higher than your animation duration
}

... 
// Some where in your code that changes the state
clearInterval(this.interval)
...

循环反应原生动画动画

3 个答案: