ప్రొడక్షన్లో Motion: లేఅవుట్ యానిమేషన్లు మరియు యాక్సెసిబుల్ ప్యాటర్న్స్
Framer-motion మారిపోయింది. 2024 చివరి నుండి, ఈ ప్యాకేజీని ఇప్పుడు Motion అని పిలుస్తున్నారు. మీరు తప్పనిసరిగా motion/react ఇంపోర్ట్ పాత్ను ఉపయోగించాలి.
చాలా ట్యుటోరియల్స్ పాతవిగా ఉన్నాయి. అవి ఇంకా పాత ఇంపోర్ట్లను చూపుతున్నాయి మరియు యాక్సెసిబిలిటీ (accessibility) లోపించింది. ఈ గైడ్ నిజమైన ప్రాజెక్ట్లలో ఆధునిక Motionను ఉపయోగించడంలో మీకు సహాయపడుతుంది.
అప్గ్రేడ్
ఈ మార్పు చాలా సులభం. మీరు వెర్షన్ 11 ఉపయోగిస్తుంటే, వెర్షన్ 12కి మారడం అనేది కేవలం 'find-and-replace' పని మాత్రమే.
- అన్ఇన్స్టాల్ చేయండి:
npm uninstall framer-motion - ఇన్స్టాల్ చేయండి:
npm install motion - ఇంపోర్ట్లను అప్డేట్ చేయండి: 'framer-motion'ను 'motion/react'గా మార్చండి
మైగ్రేషన్ సమయంలో మీరు రెండు ప్యాకేజీలను కలిపి రన్ చేయవచ్చు. కానీ వాటిని మీ కోడ్బేస్లో శాశ్వతంగా ఉంచకండి.
లేఅవుట్ యానిమేషన్లు
layout ప్రాప్ (prop) ఎలిమెంట్ యొక్క పరిమాణం మరియు స్థానాన్ని గమనించమని Motionకు చెబుతుంది. ఇది బ్రౌజర్ నేరుగా కొత్త స్థానాలకు మారే బదులు, ఆ మార్పులను యానిమేట్ చేస్తుంది.
లిస్ట్ల కోసం layout="position" ఉపయోగించండి. ఇది ఒక ఐటెమ్ పెరిగినప్పుడు దాని పక్కన ఉన్న వాటిని (siblings) కదిలిస్తుంది, కానీ లోపల ఉన్న కంటెంట్ను నొక్కివేయదు.
మౌంటింగ్ (mounting) మరియు అన్మౌంటింగ్ (unmounting) కోసం AnimatePresence ఉపయోగించండి. ఇది లేకపోతే, ఎలిమెంట్స్ యానిమేట్ అయ్యేలోపే React వాటిని DOM నుండి తొలగిస్తుంది.
height: autoను యానిమేట్ చేయకండి. ఇది విజువల్ గ్లిచెస్ (visual glitches) కలిగిస్తుంది. దానికి బదులుగా, స్మూత్ హైట్ మార్పుల కోసం CSS గ్రిడ్ రాపర్ (0fr నుండి 1fr వరకు) ఉపయోగించండి.
యాక్సెసిబిలిటీ
సుమారు 30% మంది iOS వినియోగదారులు prefers-reduced-motionను ఎనేబుల్ చేస్తారు. కేవలం అన్ని యానిమేషన్లను ఆపివేయకండి. ఇది మీ లేఅవుట్ను దెబ్బతీస్తుంది.
తప్పు పద్ధతి: వినియోగదారు తక్కువ మోషన్ను కోరుకుంటే <motion.div>ను సాధారణ <div>తో మార్చడం. దీనివల్ల లేఅవుట్ అకస్మాత్తుగా మారి (snap), విచ్ఛిన్నమైనట్లు అనిపిస్తుంది.
సరైన పద్ధతి: కాంపోనెంట్ను కాకుండా, ట్రాన్సిషన్ను నియంత్రించండి (gate). <motion.div>ను అలాగే ఉంచి, దాని durationను 0గా సెట్ చేయండి.
దీనిని నిర్వహించడానికి ఒక కస్టమ్ హుక్ (custom hook) సృష్టించండి:
useReducedMotionహుక్ను ఉపయోగించండి.- ఒకవేళ
trueఅయితే,durationను 0గా రిటర్న్ చేయండి. - ఒకవేళ
falseఅయితే, మీ స్టాండర్డ్ స్ప్రింగ్ సెట్టింగ్లను రిటర్న్ చేయండి.
దీనివల్ల ఎలిమెంట్స్ కదలిక లేకుండానే వాటి సరైన స్థానాలకు చేరుకుంటాయి.
Motionను ఎప్పుడు ఉపయోగించాలి?
సాధారణ ఫేడ్స్ (fades) కోసం బ్రౌజర్ Web Animations APIని ఉపయోగించండి. దీనికి ఎటువంటి డిపెండెన్సీలు ఉండవు.
మీకు ఇవి అవసరమైనప్పుడు Motionను ఉపయోగించండి:
- కాంపోనెంట్ లైఫ్సైకిల్స్ను అర్థం చేసుకునే React-native APIs.
- DOM మార్పులను ట్రాక్ చేసే లేఅవుట్ యానిమేషన్లు.
- ఎగ్జిట్ యానిమేషన్ల కోసం
AnimatePresence. - సహజంగా అనిపించే స్ప్రింగ్ ఫిజిక్స్ (Spring physics).