反应原生动画，完成事件

Question 1

Animated.spring完成时触发事件的最佳实践是什么？

Animated.spring(this.state.pan, {
    toValue: 0
}).start()

我已经搜索了很多，还没有找到一种方法来做到这一点。我可以使用addListener来检查动画是否达到了最终值或超时，但是它们都感觉很难修复，因此应该非常简单。

有人知道吗？

Question 2

半个小时的谷歌搜索之后，我发现了这一点，简直不敢相信他们没有更好地证明这一点。

https://github.com/facebook/react-native/issues/3212

.start(callback)

Question 3

这将在动画开始时触发

.start(console.log("Start Animation")

使用一个或多个箭头功能，在动画结束时将调用完成

.start(() => {console.log("Animation DONE")})

最后，这就是函数上下文中的样子。

_play(){
  Animated.timing(this.state.progress, {
     toValue: 1,
     duration: 5000,
     easing: Easing.linear,
   }).start(() => {console.log("Animation DONE")});
}

希望有帮助！

Question 4

基本上，这三种方法可以在动画结束时执行某些操作。首先：您可以使用传递给call（callback）方法的回调。第二：您可以使用stopAnimation，它也接受回调。第三：我的首选方式，包括在动画值上放置一个侦听器，并根据当前值执行某些操作。例如，您可以进行从0到150的转换，并根据您设置动画的值（例如“运动”），当运动达到某个值时，您可以执行某些操作。

let motion = Animated.Value(0);

motion.addListener(({value}) =>{
  if(value>=10){
    pos.stopAnimation((val)=>{console.log('stopped in '+val)});
  }
});

👉https：//www.youtube.com/channel/UCl5-W0A8tE3EucM7E_yS62A