React Native Animated, Acara Lengkap

90

Apa praktik terbaik untuk memicu peristiwa saat Animated.spring selesai?

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

Saya sudah mencari cukup banyak dan belum menemukan satu cara pun untuk melakukannya. Saya dapat menggunakan addListener untuk memeriksa apakah animasi telah mencapai nilai akhir atau batas waktu, tetapi keduanya terasa seperti perbaikan jelek untuk apa yang seharusnya super sederhana.

Apakah ada yang tahu?

react-native Agustus Bjornberg
sumber

Jawaban:

16

Ini akan diaktifkan pada awal animasi

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

Menggunakan fungsi panah atau fungsi, selesai akan dipanggil di AKHIR animasi

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

Dan akhirnya seperti inilah tampilannya dalam konteks suatu fungsi.

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

Semoga membantu!

Sabba Keynejad
sumber
12
.start(console.log("Start Animation")hanya akan "menyala" di awal animasi karena efek samping. Ini secara fungsional sama dengan console.log("Start Animation"); Animated.timing(...).start(..). Ini bukanlah penggunaan metode yang disengaja. Tolong jangan gunakan ini. start()mengambil panggilan balik saat animasi selesai dan itu saja.
zeh
Bisakah Anda mengulang animasi dengan memanggil fungsi yang sama dalam callback penyelesaian ini?
Tom
0

Pada dasarnya ada tiga pendekatan untuk melakukan sesuatu saat animasi selesai. Pertama: Anda dapat menggunakan callback yang diteruskan ke metode panggilan (callback). Kedua: Anda dapat menggunakan stopAnimation yang juga menerima callback. Ketiga: Cara yang saya sukai, yang terdiri dari menempatkan pendengar pada nilai animasi, dan melakukan sesuatu berdasarkan nilai saat ini. Misalnya, Anda dapat membuat terjemahan dari 0 hingga 150 dan berdasarkan nilai yang Anda animasikan, katakan 'gerak' dan saat gerakan mencapai nilai, Anda dapat melakukan sesuatu.

let motion = Animated.Value(0);

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

Selengkapnya tentang👉https: //www.youtube.com/channel/UCl5-W0A8tE3EucM7E_yS62A

Ellson Mendes
sumber