循环反应原生动画动画 [英] Looping a react native animated animation

问题描述

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

I am attempting to put the following animation in an infinite loop until a particular state occurs:

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

这里的一切都很好，动画完成一次(因为我没有在任何地方循环播放).

Everything here works great, the animation completes once (as I'm not looping anywhere).

如何保持我的 Animated.Image 循环直到达到特定状态?我只是希望它无限循环，并且能够在我准备好时停止动画或开始另一个动画.

How do I keep my Animated.Image looping until I reach a particular state? I just want it infinite looping and the ability to either stop the animation or start another animation when I'm ready to.

推荐答案

向 start 函数传递一个回调来检查是否重新启动动画.你可以把它分解成这样:

Pass a callback to the start function to check whether to restart the animation. You could break it down to something like this:

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

这篇关于循环反应原生动画动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！