React Native Animated, Complete Event

Qual é a prática recomendada para acionar um evento quando o Animated.spring terminar?

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

Eu pesquisei um pouco e não encontrei uma única maneira de fazer isso. Eu poderia usar addListener para verificar se a animação atingiu seu valor final ou um tempo limite, mas ambos parecem consertos feios para o que deveria ser super simples.

Alguém sabe?

Meia hora pesquisando no Google mais tarde e achei isso, não posso acreditar que eles não documentaram isso melhor.

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

.start(callback)

Isso será disparado no início da animação

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

Usando uma função de seta ou função, done será chamado no FIM da animação

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

E, finalmente, isso é o que parece no contexto de uma função.

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

Espero que ajude!

Basicamente, existem essas três abordagens para fazer algo quando uma animação termina. Primeiro: você pode usar o retorno de chamada passado para o método de chamada (retorno de chamada). Segundo: você pode usar stopAnimation, que também aceita um retorno de chamada. Terceiro: Minha maneira preferida, que consiste em colocar um ouvinte no valor animado e fazer algo baseado no valor atual. Por exemplo, você pode fazer uma tradução de 0 a 150 e com base em um valor que você anima, digamos 'movimento' e quando o movimento atinge um valor, você pode realizar algo.

let motion = Animated.Value(0);

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

Mais em👉https: //www.youtube.com/channel/UCl5-W0A8tE3EucM7E_yS62A