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

256

Pół godziny później googlowałem i znalazłem to, nie mogę uwierzyć, że nie udokumentowali tego lepiej.

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

.start(callback)

— August Bjornberg
źródło

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