Question

当Animated.spring完成时触发事件的最佳做法是什么？

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

我已经搜索了很多，并没有找到一种方法来做到这一点。我可以使用addListener来检查动画是否已经达到它的结束值或超时，但是他们都觉得丑陋的修复应该是超级简单的。

有人知道吗？

Answer 1

半小时的谷歌搜索后来我发现了这一点，无法相信他们没有更好地记录这一点。

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

.start(callback)

Answer 2

这将在动画开始时触发

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

使用一个或多个箭头功能，完成后会在动画的 END 中调用

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

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

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

希望有帮助！

Answer 3

基本上，这三种方法可以在动画结束时执行某些操作。首先：您可以使用传递给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

React Native动画，完成事件

3 个答案: