React Native Animated, événement complet

88

Quelle est la meilleure pratique pour déclencher un événement lorsque Animated.spring se termine?

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

J'ai cherché pas mal et je n'ai pas trouvé un seul moyen de le faire. Je pourrais utiliser addListener pour vérifier si l'animation a atteint sa valeur finale ou un délai d'expiration, mais ils se sentent tous les deux comme de vilains correctifs à ce qui devrait être super simple.

Est-ce que quelqu'un sait?

react-native August Bjornberg
la source

Réponses:

14

Cela sera déclenché au début de l'animation

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

En utilisant une fonction ou une fonction de flèche, done sera appelé à la FIN de l'animation

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

Et enfin c'est à quoi cela ressemble dans le contexte d'une fonction.

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

J'espère que ça t'as aidé!

Sabba Keynejad
la source
12
.start(console.log("Start Animation")"se déclenchera" uniquement au début d'une animation à cause d'un effet secondaire. Ceci est fonctionnellement identique à console.log("Start Animation"); Animated.timing(...).start(..). Ce n'est pas l'utilisation intentionnelle de la méthode. Merci de ne pas l'utiliser. start()prend un rappel pour quand l'animation se termine et c'est tout.
zeh
Pourriez-vous boucler l'animation en appelant la même fonction dans ce rappel d'achèvement?
Tom le
0

En gros, ces trois approches permettent de faire quelque chose lorsqu'une animation se termine. Premièrement: vous pouvez utiliser le callback passé en méthode call (callback). Deuxièmement: vous pouvez utiliser stopAnimation qui accepte également un rappel Troisième: Ma méthode préférée, qui consiste à placer un écouteur sur la valeur animée, et à faire quelque chose en fonction de la valeur actuelle. Par exemple, vous pouvez faire une traduction de 0 à 150 et en fonction d'une valeur que vous animez, dites «mouvement» et lorsque le mouvement atteint une valeur, vous pouvez effectuer quelque chose.

let motion = Animated.Value(0);

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

En savoir plus sur👉https: //www.youtube.com/channel/UCl5-W0A8tE3EucM7E_yS62A

Ellson Mendes
la source