React Native Animated, Complete Event

88

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?

react-native Agosto Bjornberg
fonte

Respostas:

14

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!

Sabba Keynejad
fonte
12
.start(console.log("Start Animation")só "disparará" no início de uma animação devido a um efeito colateral. Isso é funcionalmente o mesmo que console.log("Start Animation"); Animated.timing(...).start(..). Este não é o uso intencional do método. Por favor, não use isso. start()recebe um retorno de chamada para quando a animação terminar e isso é tudo.
zeh de
Você poderia repetir a animação chamando a mesma função neste retorno de chamada de conclusão?
Tom
0

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

Ellson Mendes
fonte