Reagiere auf ein animiertes, vollständiges Ereignis

86

Was ist die beste Vorgehensweise, um ein Ereignis auszulösen, wenn Animated.spring beendet ist?

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

Ich habe ziemlich viel gesucht und keinen einzigen Weg gefunden, dies zu tun. Ich könnte addListener verwenden, um zu überprüfen, ob die Animation ihren Endwert oder eine Zeitüberschreitung erreicht hat, aber beide fühlen sich wie hässliche Korrekturen an dem, was super einfach sein sollte.

Weiß jemand?

react-native

— August Björnberg
quelle

250

Eine halbe Stunde später googeln und ich fand das, kann nicht glauben, dass sie das nicht besser dokumentiert haben.

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

.start(callback)

— August Björnberg
quelle

14

Dies wird zu Beginn der Animation ausgelöst

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

Wenn Sie eine Pfeilfunktion oder -funktion verwenden, wird done am Ende der Animation aufgerufen

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

Und schließlich sieht es im Kontext einer Funktion so aus.

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

Hoffentlich hilft das!

— Sabba Keynejad
quelle

11

.start(console.log("Start Animation")wird nur zu Beginn einer Animation wegen eines Nebeneffekts "ausgelöst". Dies ist funktional das gleiche wie console.log("Start Animation"); Animated.timing(...).start(..). Dies ist nicht die absichtliche Verwendung der Methode. Bitte benutzen Sie dies nicht. start()nimmt einen Rückruf entgegen, wenn die Animation beendet ist und das ist alles.

— Zeh

Könnten Sie die Animation wiederholen, indem Sie dieselbe Funktion innerhalb dieses Abschlussrückrufs aufrufen?

— Tom