循环反应原生动画答案

【问题标题】：Looping a react native animated animation循环反应原生动画
【发布时间】：2018-05-16 14:45:15
【问题描述】：

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

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 循环直到我达到特定状态？我只希望它无限循环，并且能够在我准备好时停止动画或启动另一个动画。

【问题讨论】：

标签： react-native

【解决方案1】：

将您的动画存储在您可以访问的变量中，然后使用Animated.loop() 包装您的动画。然后你就可以随意使用.start() 和.stop() 来保存动画了。

所以应该这样做：

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

【讨论】：

这绝对应该选为正确答案。

【解决方案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);
      }

【讨论】：

也许值得考虑的是，传递给 .start 方法的回调函数采用这样的对象：{ finished: Boolean }，它允许您确保下一次调用 animate 将在没有任何动画的情况下完成正在进行中或计划中或其他任何情况下，它还允许您随时停止动画，因为调用 AnimatedValue.stopAnimation() 方法会将 o.finished 更改为 false 从而不会重新启动动画（如果您需要控制它当然（：）

【解决方案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)
...

【讨论】：

setInterval 可能有无意的延迟，会在动画循环中显示给用户