React Native Animated, полное событие

Question 1

Как лучше всего запускать событие по завершении Animated.spring?

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

Я искал довольно много и не нашел ни одного способа сделать это. Я мог бы использовать addListener, чтобы проверить, достигла ли анимация конечного значения или тайм-аута, но они оба кажутся уродливыми исправлениями того, что должно быть очень простым.

Кто-нибудь знает?

Question 2

Спустя полчаса поиска в Google я нашел это, не могу поверить, что они не документировали это лучше.

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

.start(callback)

Question 3

Это сработает в начале анимации

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

Надеюсь, это поможет!

Question 4

По сути, есть эти три подхода, чтобы что-то делать после завершения анимации. Во-первых: вы можете использовать обратный вызов, переданный в метод call (обратного вызова). Во-вторых: вы можете использовать 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