React native 循环本机动画

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

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

类MyModal扩展组件{
构造函数（）{
超级（）
this.springValue=新的动画.Value（0.3）
}
春天=（）=>{
此.springValue.setValue（0.3）
春天(
这个价值观，
{
toValue:1，
摩擦:1,，
紧张局势：1，
持续时间：5000
}
).start（）
}
componentDidMount（）{
今年春天
}
render（）{
返回(
空}
>
);
}
}

这里的一切都很好，动画完成一次（因为我不会在任何地方循环）

---

我如何保持我的

动画。图像

循环，直到达到特定状态？我只希望它能够无限循环，并且能够在我准备好的时候停止动画或启动另一个动画。

您可以使用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)
...

---

将回调传递给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);
  }  

---

将动画存储在您可以访问的变量中，只需使用

Animated.loop（）

包装动画即可。然后，您可以在该变量上自由使用

.start（）

和

.stop（）

，该变量可以随意保存动画

这样做应该可以：

this.springAnimation = Animated.loop(
  Animated.spring(
    this.springValue,
    {
      toValue: 1,
      friction: 1,
      tension: 1,
      duration:5000
    }
  ).start()
)

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

---

可能值得考虑的是，传递给.start方法的回调函数采用如下对象：

{finished:Boolean}

，它允许您确保下一次调用animate时不会进行任何动画或安排任何动画，此外，它还允许您随时停止动画，因为调用AnimatedValue.stopAnimation（）方法会将o.finished更改为false，从而不会重新启动动画（当然，如果您需要控制它（：）setInterval可能会出现意外延迟，用户会在动画循环中看到这些延迟。这绝对应该被选为正确答案。