Animated1.0.0

सुमारे 5 मिनिटे · React 16.8+ · React DOM

सुरुवात

इन्स्टॉलेशनपासून हावभाव आणि प्रवेश/बाहेर पडण्याच्या मोशनपर्यंत सहा पायऱ्यांत. प्रत्येक पायरी एक छोटा, चालणारा कंपोनंट आहे.

  1. इन्स्टॉलेशन

    Animated ला रनटाइम अवलंबित्वे नाहीत. React 16.8+ हे peer dependency आहे.

    पॅकेज प्रवेश 'use client' म्हणून चिन्हांकित आहे. Next.js App Router मध्ये सर्व्हर layout AnimatedProvider रेंडर करू शकतो; हुक आणि Animated.<tag> Client Component मध्ये वापरा.

    npm install @kkwaenggwari/animated

    @kkwaenggwari/animated import तुमच्या एडिटरमध्ये सापडतो.

  2. तुमचे पहिले मूल्य हलवा

    useAnimatedValue(1) कंपोनंटच्या संपूर्ण आयुष्यभर एक जिवंत संख्या धरते. ती थेट style मध्ये ठेवा: ती CSS व्हेरिएबल बनते, त्यामुळे ती बदलताना React रेंडर होत नाही.

    timing(value, { toValue, duration }).start() ती हलवते. मध्येच पुन्हा दाबल्यास सध्याच्या opacity पासून सुरू होते.

    उदाहरण तयार होत आहे…

    पेटी फिकट होऊन पुन्हा दिसते, आणि मध्येच दुसरे दाबणे जिथे आहे तिथून दिशा बदलते.

  3. एका मूल्यातून अनेक आउटपुट मिळवा

    interpolate मूल्याला लांबी, कोन किंवा संख्यांमध्ये रूपांतरित करते. easing नसल्यास ते त्याच व्हेरिएबलचे अचूक calc() बनते, त्यामुळे पाच रांगांचा खर्च एका रांगेइतकाच.

    त्याच मूल्यावर वेगवेगळ्या इनपुट श्रेणी पाच स्वतंत्र ॲनिमेशनशिवाय कॅस्केड तयार करतात.

    उदाहरण तयार होत आहे…

    एका दाबण्याने पाच रांगा कॅस्केडमध्ये हलतात; प्रसार बदलल्यास फक्त श्रेणी बदलतात.

  4. गंतव्य वर्णन करा

    Animated.button साधे बटण रेंडर करते. seed पहिली फ्रेम आहे, pose आत्ता ते कुठे असावे, आणि tempo ते तिथे कसे पोहोचते.

    प्रवासाच्या मध्येच pose बदलल्यास, एलिमेंट स्क्रीनवर जिथे आहे तिथून वळतो आणि spring सह आपला वेग राखतो.

    उदाहरण तयार होत आहे…

    कार्डवर पटकन क्लिक केले तरी काहीही उडी घेत नाही.

  5. इनपुट जोडा

    input(ref, moveInput(...)) पॉइंटरचे निर्देशांक मूल्यांमध्ये लिहिते. follow(target, source) एका मूल्याला दुसऱ्याच्या मागे spring ने जायला लावते.

    useAnimated factory मध्ये घोषित केलेले सर्व कंपोनंटच्या मालकीचे आहे: तो अनमाउंट झाल्यावर किंवा अवलंबित्व बदलल्यावर listener आणि spring थांबतात.

    उदाहरण तयार होत आहे…

    कार्ड पॉइंटरकडे झुकते आणि पॉइंटर गेल्यावर पुन्हा स्थिरावते.

  6. बाहेर पडणे ॲनिमेट करा

    React चाइल्ड काढल्यास तो सहसा लगेच काढला जातो. Animated.Keep key असलेल्या मुलांना त्यांचा depart pose संपेपर्यंत ठेवतो.

    wait प्रत्येक बाहेर पडणे संपल्यानंतरच नवीन मुले रेंडर करते.

    उदाहरण तयार होत आहे…

    काढलेले संदेश अदृश्य होण्यापूर्वी निवडलेल्या मोशनसह बाहेर पडतात.

संपूर्ण मॉडेल आता तुमच्याकडे आहे

मूल्ये, गंतव्ये, इनपुट आणि बाहेर पडणे हे तेच कंट्रोलर, व्यत्यय नियम आणि स्वच्छता सामायिक करतात. मार्गदर्शक प्रत्येकाचे सखोल स्पष्टीकरण देतात.

शोधा

दस्तऐवजांमध्ये शोधण्यासाठी टाइप करा.