¿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?
Respuestas:
Media hora buscando en Google más tarde encontré esto, no puedo creer que no lo hayan documentado mejor.
https://github.com/facebook/react-native/issues/3212
.start(callback)
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!
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
.start(console.log("Start Animation")sólo se "disparará" al comienzo de una animación debido a un efecto secundario. Funcionalmente es lo mismo queconsole.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.