Reaccionar nativo animado, evento completo

88

¿Cuál es la mejor práctica para activar un evento cuando termina Animated.spring?

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

He buscado bastante y no he encontrado una sola forma de hacerlo. Podría usar addListener para verificar si la animación ha alcanzado su valor final o un tiempo de espera, pero ambos se sienten como soluciones desagradables para lo que debería ser súper simple.

¿Alguien sabe?

react-native Agosto Bjornberg
fuente

Respuestas:

14

Esto se disparará al comienzo de la animación.

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

Usando una función o función de flecha, se llamará a done al FINAL de la animación

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

Y finalmente esto es lo que parece en el contexto de una función.

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

¡Espero que ayude!

Sabba Keynejad
fuente
12
.start(console.log("Start Animation")sólo se "disparará" al comienzo de una animación debido a un efecto secundario. Funcionalmente es lo mismo que console.log("Start Animation"); Animated.timing(...).start(..). Este no es el uso intencional del método. Por favor, no use esto. start()recibe una devolución de llamada para cuando finaliza la animación y eso es todo.
zeh
¿Podría repetir la animación llamando a la misma función dentro de esta devolución de llamada de finalización?
Tom
0

Básicamente existen estos tres enfoques para hacer algo cuando termina una animación. Primero: puede usar la devolución de llamada pasada al método de llamada (devolución de llamada). Segundo: puede usar stopAnimation, que también acepta una devolución de llamada. Tercero: Mi forma preferida, que consiste en colocar un oyente en el valor animado y hacer algo en función del valor actual. Por ejemplo, puede hacer una traslación de 0 a 150 y, según un valor que anime, diga "movimiento" y cuando el movimiento alcance un valor, podrá realizar algo.

let motion = Animated.Value(0);

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

Más sobre👉https: //www.youtube.com/channel/UCl5-W0A8tE3EucM7E_yS62A

Ellson Mendes
fuente