React Native Animated, Complete Event

88

Jaka jest najlepsza metoda wyzwalania zdarzenia po zakończeniu Animated.spring?

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

Szukałem sporo i nie znalazłem ani jednego sposobu, żeby to zrobić. Mógłbym użyć addListener, aby sprawdzić, czy animacja osiągnęła wartość końcową lub limit czasu, ale oba wydają się brzydkimi poprawkami tego, co powinno być super proste.

Czy ktoś wie?

react-native August Bjornberg
źródło

Odpowiedzi:

14

To zostanie uruchomione na początku animacji

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

Korzystanie z funkcji strzałek lub funkcji, sporządzona zostanie sprawdzony na KONIEC animacji

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

I w końcu tak to wygląda w kontekście funkcji.

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

Mam nadzieję, że to pomoże!

Sabba Keynejad
źródło
12
.start(console.log("Start Animation")będzie "odpalać" tylko na początku animacji z powodu efektu ubocznego. Działa to tak samo, jak console.log("Start Animation"); Animated.timing(...).start(..). To nie jest celowe użycie metody. Proszę tego nie używać. start()pobiera wywołanie zwrotne po zakończeniu animacji i to wszystko.
zeh
Czy możesz zapętlić animację, wywołując tę ​​samą funkcję w ramach tego wywołania zwrotnego?
Tom
0

Zasadniczo istnieją te trzy podejścia do zrobienia czegoś po zakończeniu animacji. Po pierwsze: możesz użyć wywołania zwrotnego przekazanego do metody call (callback). Po drugie: możesz użyć stopAnimation, który również akceptuje wywołanie zwrotne. Trzeci: mój preferowany sposób, który polega na umieszczeniu detektora na animowanej wartości i zrobieniu czegoś na podstawie bieżącej wartości. Na przykład możesz wykonać tłumaczenie od 0 do 150 i na podstawie animowanej wartości, powiedzieć „ruch”, a gdy ruch osiągnie wartość, możesz coś wykonać.

let motion = Animated.Value(0);

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

Więcej na👉https: //www.youtube.com/channel/UCl5-W0A8tE3EucM7E_yS62A

Ellson Mendes
źródło