React Native动画，完整事件

Question

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

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

我已经搜索了很多，但没有找到一种方法。我可以使用 addListener 检查动画是否达到终值或超时，但它们都感觉像是对本应该超级简单的问题进行了丑陋的修复。

有人知道吗？

- August Bjornberg

Answer 1

搜索了半小时后，我找到了这个，简直不能相信他们没有更好地记录这个。

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

.start(callback)

- August Bjornberg

Answer 2

这将在动画开始时触发

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

使用箭头函数或者函数，在动画结束时将调用done函数。

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

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

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

希望这有帮助！

- Sabba Keynejad

---

由于副作用的原因，.start(console.log("Start Animation")) 只会在动画开始时“触发”。这与 console.log("Start Animation"); Animated.timing(...).start(..) 在功能上是相同的。但这不是该方法的预期使用方式，请不要这样使用。start() 方法接受一个回调函数，在动画完成时调用它即可。 - zeh

你能否通过在完成回调函数中调用相同的函数来循环播放动画？ - NightTom

这对我不起作用，即使我在start函数内添加了箭头函数，该函数出于某种原因立即执行。 - Ayudh

Answer 3

现在有关于此的文档：https://reactnative.dev/docs/animated#working-with-animations

更新后的答案应该是：

.start(({finished}) => {
    if (finished) {
        console.log('animation ended!)
    }
})

- theneekz

Answer 4

基本上有三种方法可以在动画完成时执行某些操作。 第一种：您可以使用传递到call（callback）方法中的回调。 第二种：您可以使用stopAnimation，它也接受一个回调。 第三种：我喜欢的方式是，在动画值上放置侦听器，并根据当前值执行某些操作。 例如，您可以从0到150进行翻译，并基于您要动画的值，比如'motion'，当motion达到某个值时，您可以执行某些操作。

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

- Ellson Mendes