சுமார் 5 நிமிடங்கள் · React 16.8+ · React DOM
தொடக்கம்
நிறுவுதலிலிருந்து சைகைகள், நுழைவு/வெளியேற்ற மோஷன் வரை ஆறு படிகளில். ஒவ்வொரு படியும் இயங்கும் சிறிய கம்போனென்ட்.
நிறுவுதல்
Animated-க்கு இயக்கநேரச் சார்புகள் இல்லை. React 16.8+ ஒரு peer dependency.
தொகுப்பின் நுழைவு 'use client' எனக் குறிக்கப்பட்டுள்ளது. Next.js App Router-இல் சர்வர் layout
AnimatedProvider-ஐ ரெண்டர் செய்யலாம்; ஹூக்குகளையும்Animated.<tag>-ஐயும் Client Component-களுக்குள் பயன்படுத்துங்கள்.npm install @kkwaenggwari/animated@kkwaenggwari/animatedimport உங்கள் எடிட்டரில் தீர்க்கப்படுகிறது.உங்கள் முதல் மதிப்பை நகர்த்துங்கள்
useAnimatedValue(1)கம்போனென்டின் வாழ்நாள் முழுவதும் ஒரு நேரடி எண்ணை வைத்திருக்கிறது. அதை நேரடியாகstyle-இல் வையுங்கள்: அது CSS மாறியாகிறது, அதனால் அது மாறும்போது React ரெண்டர் ஆவதில்லை.timing(value, { toValue, duration }).start()அதை நகர்த்துகிறது. பாதியில் மீண்டும் அழுத்தினால் தற்போதைய opacity-இலிருந்து தொடங்குகிறது.எடுத்துக்காட்டு தயாராகிறது…
பெட்டி மங்கி மீண்டும் தோன்றுகிறது; பாதியில் இரண்டாவது அழுத்தம் இருக்கும் இடத்திலிருந்து திசை மாற்றுகிறது.
ஒரே மதிப்பிலிருந்து பல வெளியீடுகளைப் பெறுங்கள்
interpolateமதிப்பை நீளங்கள், கோணங்கள் அல்லது எண்களுக்கு மாற்றுகிறது. easing இல்லாமல் அது அதே மாறியின் துல்லியமானcalc()ஆகிறது; அதனால் ஐந்து தடங்களின் செலவு ஒன்றின் செலவே.அதே மதிப்பில் வெவ்வேறு உள்ளீட்டு வரம்புகள், ஐந்து தனி அனிமேஷன்கள் இல்லாமல் அடுக்கு விளைவை உருவாக்குகின்றன.
எடுத்துக்காட்டு தயாராகிறது…
ஒரே அழுத்தம் ஐந்து தடங்களை அடுக்காக நகர்த்துகிறது; இடைவெளியை மாற்றினால் வரம்புகள் மட்டுமே மாறுகின்றன.
இலக்கை விவரியுங்கள்
Animated.buttonசாதாரண பொத்தானை ரெண்டர் செய்கிறது.seedமுதல் ஃப்ரேம்,poseஇப்போது அது இருக்க வேண்டிய இடம்,tempoஅது எப்படி அங்கே செல்கிறது.பயணத்தின் நடுவில்
poseமாறும்போது, உறுப்பு திரையில் இருக்கும் இடத்திலிருந்து திரும்புகிறது; spring உடன் தன் வேகத்தை வைத்திருக்கிறது.எடுத்துக்காட்டு தயாராகிறது…
அட்டைகளை வேகமாகக் கிளிக் செய்தாலும் எதுவும் தாவுவதில்லை.
உள்ளீட்டை இணையுங்கள்
input(ref, moveInput(...))சுட்டியின் ஆயங்களை மதிப்புகளில் எழுதுகிறது.follow(target, source)ஒரு மதிப்பை இன்னொன்றின் பின் spring மூலம் செல்ல வைக்கிறது.useAnimatedfactory-இல் அறிவிக்கப்பட்ட அனைத்தும் கம்போனென்டுக்குச் சொந்தம்: அது அன்மவுன்ட் ஆகும்போதோ சார்பு மாறும்போதோ listener-களும் spring-களும் நிற்கின்றன.எடுத்துக்காட்டு தயாராகிறது…
அட்டை சுட்டியை நோக்கிச் சாய்ந்து, சுட்டி விலகும்போது மீண்டும் அமைதியடைகிறது.
வெளியேற்றத்தை அனிமேட் செய்யுங்கள்
React குழந்தையை அகற்றினால் வழக்கமாக உடனே அகற்றப்படும்.
Animated.Keepkey கொண்ட குழந்தைகளை அவற்றின்departpose முடியும்வரை வைத்திருக்கிறது.waitஒவ்வொரு வெளியேற்றமும் முடிந்த பிறகே புதிய குழந்தைகளை ரெண்டர் செய்கிறது.எடுத்துக்காட்டு தயாராகிறது…
நிராகரிக்கப்பட்ட செய்திகள் மறையும் முன் தேர்ந்தெடுத்த மோஷனுடன் வெளியேறுகின்றன.
முழு மாதிரியும் இப்போது உங்களிடம்
மதிப்புகள், இலக்குகள், உள்ளீடு, வெளியேற்றங்கள் ஆகியவை அதே கட்டுப்படுத்திகள், இடையூறு விதிகள், சுத்தத்தைப் பகிர்கின்றன. வழிகாட்டிகள் ஒவ்வொன்றையும் ஆழமாக விளக்குகின்றன.