React Native Animated, Complete Event

90

Qual è la best practice per attivare un evento al termine di Animated.spring?

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

Ho cercato un bel po 'e non ho trovato un solo modo per farlo. Potrei usare addListener per verificare se l'animazione ha raggiunto il valore finale o un timeout, ma entrambi sembrano brutte correzioni a ciò che dovrebbe essere super semplice.

Qualcuno sa?

react-native

— August Bjornberg
fonte

265

Mezz'ora di ricerca su Google più tardi e ho trovato questo, non posso credere che non abbiano documentato meglio.

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

.start(callback)

— August Bjornberg
fonte

16

Questo verrà attivato all'inizio dell'animazione

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

Utilizzando una funzione o una funzione freccia, done verrà chiamato alla FINE dell'animazione

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

E alla fine questo è ciò che sembra nel contesto di una funzione.

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

Spero possa aiutare!

— Sabba Keynejad
fonte

12

.start(console.log("Start Animation")"si attiva" solo all'inizio di un'animazione a causa di un effetto collaterale. Questo è funzionalmente lo stesso di console.log("Start Animation"); Animated.timing(...).start(..). Questo non è l'uso intenzionale del metodo. Per favore non usarlo. start()accetta una richiamata per quando l'animazione finisce e questo è tutto.

— zeh

Potresti ripetere l'animazione chiamando la stessa funzione all'interno di questo callback di completamento?

— Tom

0

Fondamentalmente ci sono questi tre approcci per fare qualcosa quando finisce un'animazione. Primo: puoi usare il callback passato al metodo call (callback). Secondo: puoi usare stopAnimation che accetta anche un callback Terzo: Il mio modo preferito, che consiste nel posizionare un ascoltatore sul valore animato e fare qualcosa in base al valore corrente. Ad esempio, puoi effettuare una traduzione da 0 a 150 e in base a un valore che animi, dì "movimento" e quando il movimento raggiunge un valore puoi eseguire qualcosa.

let motion = Animated.Value(0);

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

Altro su👉https: //www.youtube.com/channel/UCl5-W0A8tE3EucM7E_yS62A

— Ellson Mendes
fonte