ตอบสนอง Native Animated เหตุการณ์ที่สมบูรณ์

แนวทางปฏิบัติที่ดีที่สุดในการทริกเกอร์เหตุการณ์เมื่อ Animated.spring เสร็จสิ้นคืออะไร

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

ฉันค้นหามาพอสมควรแล้วและยังไม่พบวิธีเดียวที่จะทำได้ ฉันสามารถใช้ addListener เพื่อตรวจสอบว่าภาพเคลื่อนไหวถึงค่าสิ้นสุดหรือหมดเวลาหรือไม่ แต่ทั้งคู่รู้สึกเหมือนเป็นการแก้ไขที่น่าเกลียดสำหรับสิ่งที่ควรจะง่ายมาก

มีใครรู้บ้าง?

ครึ่งชั่วโมงของ googling ต่อมาและฉันพบสิ่งนี้ไม่น่าเชื่อว่าพวกเขาไม่ได้บันทึกเรื่องนี้ไว้ดีกว่า

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

.start(callback)

สิ่งนี้จะเริ่มทำงานเมื่อเริ่มภาพเคลื่อนไหว

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

การใช้ฟังก์ชันลูกศรหรือฟังก์ชันเสร็จสิ้นจะถูกเรียกเมื่อสิ้นสุดภาพเคลื่อนไหว

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

และสุดท้ายนี่คือสิ่งที่ดูเหมือนในบริบทของฟังก์ชัน

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

หวังว่าจะช่วยได้!

โดยพื้นฐานแล้วสามวิธีนี้ในการทำบางสิ่งเมื่อภาพเคลื่อนไหวเสร็จสิ้น ขั้นแรก: คุณสามารถใช้วิธีการโทรกลับที่ส่งผ่านเข้าสู่การโทร (โทรกลับ) ประการที่สอง: คุณสามารถใช้ stopAnimation ซึ่งยอมรับการเรียกกลับได้เช่นกันที่สาม: วิธีที่ฉันต้องการซึ่งประกอบด้วยการวางผู้ฟังตามค่าที่เคลื่อนไหวและทำบางอย่างตามค่าปัจจุบัน ตัวอย่างเช่นคุณสามารถแปลค่าได้ตั้งแต่ 0 ถึง 150 และตามค่าที่คุณเคลื่อนไหวโดยพูดว่า "การเคลื่อนไหว" และเมื่อการเคลื่อนไหวถึงค่าคุณสามารถดำเนินการบางอย่างได้

let motion = Animated.Value(0);

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

เพิ่มเติมได้ที่👉https: //www.youtube.com/channel/UCl5-W0A8tE3EucM7E_yS62A