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

88

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

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

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

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

react-native Август Бьорнберг
источник

Ответы:

14

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

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

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

Сабба Кейнеджад
источник
12
.start(console.log("Start Animation")будет "срабатывать" только в начале анимации из-за побочного эффекта. Функционально это то же самое, что и console.log("Start Animation"); Animated.timing(...).start(..). Это не намеренное использование метода. Пожалуйста, не используйте это. start()принимает обратный вызов, когда анимация заканчивается, и все.
zeh
Не могли бы вы зациклить анимацию, вызвав ту же функцию в этом обратном вызове завершения?
Том
0

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

Эллсон Мендес
источник