సుమారు 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ప్రతి నిష్క్రమణ ముగిసిన తర్వాతే కొత్త పిల్లలను రెండర్ చేస్తుంది.ఉదాహరణ సిద్ధమవుతోంది…
తీసివేసిన సందేశాలు అదృశ్యమయ్యే ముందు ఎంచుకున్న మోషన్‌తో నిష్క్రమిస్తాయి.
మొత్తం నమూనా ఇప్పుడు మీ దగ్గర ఉంది
విలువలు, గమ్యాలు, ఇన్‌పుట్, నిష్క్రమణలు అవే కంట్రోలర్‌లు, అంతరాయ నియమాలు, శుభ్రతను పంచుకుంటాయి. గైడ్‌లు ప్రతిదాన్ని లోతుగా వివరిస్తాయి.