रिएक्टिव नेटिव एनिमेटेड, पूरा इवेंट

Question

जब Animated.spring खत्म हो जाए तो किसी घटना को ट्रिगर करने के लिए सबसे अच्छा अभ्यास क्या है?

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

मैंने काफी खोज की है और इसे करने का एक भी तरीका नहीं खोजा है। मैं AddListener का उपयोग यह जांचने के लिए कर सकता हूं कि क्या एनीमेशन अंत मूल्य या टाइमआउट पर पहुंच गया है, लेकिन वे दोनों महसूस करते हैं कि सुपर फिक्स क्या होना चाहिए।

क्या कोई जानता है?

Answer 1

आधे घंटे की गुगली और बाद में मुझे यह पता चला, वे विश्वास नहीं कर सकते कि उन्होंने इसे बेहतर ढंग से प्रलेखित नहीं किया।

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

.start(callback)

Answer 2

यह एनीमेशन की शुरुआत में निकाल दिया जाएगा

.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")});
}

उम्मीद है की वो मदद करदे!

Comments

.start(console.log("Start Animation")एक साइड इफ़ेक्ट की वजह से एनीमेशन की शुरुआत में केवल "फायर" होगा। यह कार्यात्मक रूप से समान है console.log("Start Animation"); Animated.timing(...).start(..)। यह विधि का जानबूझकर उपयोग नहीं है। कृपया इसका उपयोग न करें। start()एनीमेशन समाप्त होने पर कॉलबैक लेता है और यह सब होता है।

— ज़ेह

क्या आप इस पूर्ण कॉलबैक में समान फ़ंक्शन को कॉल करके एनीमेशन को लूप कर सकते हैं?

— टॉम

Answer 3

मूल रूप से एक एनीमेशन खत्म होने पर कुछ करने के लिए ये तीन दृष्टिकोण होते हैं। पहला: आप कॉलबैक (कॉलबैक) विधि में कॉलबैक का उपयोग कर सकते हैं। दूसरा: आप स्टॉपएनीमेशन का उपयोग कर सकते हैं जो कॉलबैक को भी स्वीकार करता है तीसरा: मेरा पसंदीदा तरीका, जिसमें एक श्रोता को एनिमेटेड मूल्य पर रखने में शामिल है, और वर्तमान मूल्य के आधार पर कुछ करना है। उदाहरण के लिए, आप ० से १५० तक अनुवाद कर सकते हैं और मूल्य के आधार पर आप चेतन, 'गति' कह सकते हैं और जब गति एक मूल्य पर पहुँचती है तो आप कुछ कर सकते हैं।

let motion = Animated.Value(0);

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

अधिक on Morehttps: //www.youtube.com/channel/UCl5-W0A8tE3EucM7E_yS62A