ಪ್ರೊಡಕ್ಷನ್ನಲ್ಲಿ Motion: ಲೇಔಟ್ ಅನಿಮೇಷನ್ಗಳು ಮತ್ತು ಅಕ್ಸೆಸಿಬಿಲಿಟಿ ಮಾದರಿಗಳು
Framer-motion ಬದಲಾಗಿದೆ. 2024ರ ಅಂತ್ಯದಿಂದ, ಈ ಪ್ಯಾಕೇಜ್ ಅನ್ನು ಈಗ Motion ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ. ನೀವು తప్పದೇ motion/react ಇಂಪೋರ್ಟ್ ಪಾತ್ ಅನ್ನು ಬಳಸಬೇಕು.
ಹೆಚ್ಚಿನ ಟ್ಯುಟೋರಿಯಲ್ಗಳು ಹಳೆಯದಾಗಿವೆ. ಅವು ಇನ್ನೂ ಹಳೆಯ ಇಂಪೋರ್ಟ್ಗಳನ್ನು ತೋರಿಸುತ್ತವೆ ಮತ್ತು ಅಕ್ಸೆಸಿಬಿಲಿಟಿ ಕೊರತೆಯನ್ನು ಹೊಂದಿವೆ. ಈ ಮಾರ್ಗದರ್ಶಿಯು ನೈಜ ಪ್ರಾಜೆಕ್ಟ್ಗಳಲ್ಲಿ ಆಧುನಿಕ Motion ಅನ್ನು ಬಳಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.
ಅಪ್ಗ್ರೇಡ್
ಈ ಬದಲಾವಣೆ ಸರಳವಾಗಿದೆ. ನೀವು ವರ್ಷನ್ 11 ಬಳಸುತ್ತಿದ್ದರೆ, ವರ್ಷನ್ 12 ಕ್ಕೆ ಬದಲಾಯಿಸುವುದು ಕೇವಲ 'find-and-replace' ಕೆಲಸವಾಗಿದೆ.
- ಅನ್ಇನ್ಸ್ಟಾಲ್ ಮಾಡಿ:
npm uninstall framer-motion - ಇನ್ಸ್ಟಾಲ್ ಮಾಡಿ:
npm install motion - ಇಂಪೋರ್ಟ್ಗಳನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡಿ: 'framer-motion' ಅನ್ನು 'motion/react' ಗೆ ಬದಲಾಯಿಸಿ
ಮೈಗ್ರೇಶನ್ ಸಮಯದಲ್ಲಿ ನೀವು ಎರಡೂ ಪ್ಯಾಕೇಜ್ಗಳನ್ನು ಒಟ್ಟಿಗೆ ಬಳಸಬಹುದು. ಆದರೆ ಅವುಗಳನ್ನು ನಿಮ್ಮ ಕೋಡ್ಬೇಸ್ನಲ್ಲಿ ಎಂದಿಗೂ ಹಾಗೆಯೇ ಉಳಿಸಿಕೊಳ್ಳಬೇಡಿ.
ಲೇಔಟ್ ಅನಿಮೇಷನ್ಗಳು
layout ಪ್ರಾಪರ್ಟಿ ಎಲಿಮೆಂಟ್ನ ಗಾತ್ರ ಮತ್ತು ಸ್ಥಾನವನ್ನು ಗಮನಿಸಲು Motion ಗೆ ಸೂಚಿಸುತ್ತದೆ. ಇದು ಬ್ರೌಸರ್ ಅನ್ನು ಹೊಸ ಸ್ಥಳಗಳಿಗೆ ತಕ್ಷಣವೇ ಜಿಗಿಯಲು ಬಿಡುವ ಬದಲು, ಬದಲಾವಣೆಗಳನ್ನು ಅನಿಮೇಷನ್ ಮೂಲಕ ತೋರಿಸುತ್ತದೆ.
ಲಿಸ್ಟ್ಗಳಿಗಾಗಿ layout="position" ಬಳಸಿ. ಇದು ಒಂದು ಐಟಂ ಬೆಳೆದಾಗ ಅದರ ಪಕ್ಕದ ಐಟಂಗಳನ್ನು (siblings) ಚಲಿಸುತ್ತದೆ ಆದರೆ ಒಳಗಿನ ಕಂಟೆಂಟ್ ಅನ್ನು ಕುಗ್ಗಿಸುವುದಿಲ್ಲ.
ಮೌಂಟಿಂಗ್ ಮತ್ತು ಅನ್ಮೌಂಟಿಂಗ್ಗಾಗಿ AnimatePresence ಬಳಸಿ. ಇದು ಇಲ್ಲದಿದ್ದರೆ, ಅನಿಮೇಷನ್ ಮುಗಿಯುವ ಮೊದಲೇ React ಎಲಿಮೆಂಟ್ಗಳನ್ನು DOM ನಿಂದ ತೆಗೆದುಹಾಕುತ್ತದೆ.
height: auto ಅನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವುದನ್ನು ತಪ್ಪಿಸಿ. ಇದು ದೃಶ್ಯ ದೋಷಗಳನ್ನು (visual glitches) ಉಂಟುಮಾಡಬಹುದು. ಬದಲಾಗಿ, ಸುಗಮವಾದ ಎತ್ತರದ ಬದಲಾವಣೆಗಳಿಗಾಗಿ CSS grid wrapper (0fr ನಿಂದ 1fr ವರೆಗೆ) ಬಳಸಿ.
ಅಕ್ಸೆಸಿಬಿಲಿಟಿ
ಸುಮಾರು 30% iOS ಬಳಕೆದಾರರು prefers-reduced-motion ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತಾರೆ. ಎಲ್ಲಾ ಅನಿಮೇಷನ್ಗಳನ್ನು ಕೇವಲ ಆಫ್ ಮಾಡಬೇಡಿ. ಇದು ನಿಮ್ಮ ಲೇಔಟ್ ಅನ್ನು ಹಾಳು ಮಾಡುತ್ತದೆ.
ತಪ್ಪು ವಿಧಾನ: ಬಳಕೆದಾರರು ಕಡಿಮೆ ಅನಿಮೇಷನ್ ಬಯಸಿದರೆ <motion.div> ಅನ್ನು ಸಾಮಾನ್ಯ <div> ಮೂಲಕ ಬದಲಾಯಿಸುವುದು. ಇದು ಲೇಔಟ್ ಇದ್ದಕ್ಕಿದ್ದಂತೆ ಬದಲಾಗುವಂತೆ (snap) ಮಾಡುತ್ತದೆ ಮತ್ತು ಅದು ಕೆಟ್ಟ ಅನುಭವ ನೀಡುತ್ತದೆ.
ಸರಿಯಾದ ವಿಧಾನ: ಕಾಂಪೊನೆಂಟ್ ಬದಲಿಗೆ ಟ್ರಾನ್ಸಿಶನ್ ಅನ್ನು ನಿಯಂತ್ರಿಸಿ. <motion.div> ಅನ್ನು ಹಾಗೆಯೇ ಇರಿಸಿ ಆದರೆ ಅದರ duration ಅನ್ನು 0 ಗೆ ಹೊಂದಿಸಿ.
ಇದನ್ನು ನಿರ್ವಹಿಸಲು ಒಂದು ಕಸ್ಟಮ್ ಹುಕ್ (custom hook) ರಚಿಸಿ:
useReducedMotionಹುಕ್ ಬಳಸಿ.- ಒಂದು ವೇಳೆ
trueಆಗಿದ್ದರೆ,durationಅನ್ನು 0 ಎಂದು ರಿಟರ್ನ್ ಮಾಡಿ. - ಒಂದು ವೇಳೆ
falseಆಗಿದ್ದರೆ, ನಿಮ್ಮ ಸ್ಟ್ಯಾಂಡರ್ಡ್ spring ಸೆಟ್ಟಿಂಗ್ಗಳನ್ನು ರಿಟರ್ನ್ ಮಾಡಿ.
ಇದು ಎಲಿಮೆಂಟ್ಗಳು ಚಲನೆಯಿಲ್ಲದೆಯೇ ತಮ್ಮ ಸರಿಯಾದ ಸ್ಥಾನಗಳನ್ನು ತಲುಪುವಂತೆ ಖಚಿತಪಡಿಸುತ್ತದೆ.
ಯಾವಾಗ Motion ಅನ್ನು ಬಳಸಬೇಕು
ಸರಳವಾದ ಫೇಡ್ಗಳಿಗಾಗಿ (fades) ಬ್ರೌಸರ್ Web Animations API ಬಳಸಿ. ಇದಕ್ಕೆ ಯಾವುದೇ ಡಿಪೆಂಡೆನ್ಸಿಗಳಿಲ್ಲ.
ಈ ಕೆಳಗಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ Motion ಬಳಸಿ:
- ಕಾಂಪೊನೆಂಟ್ ಲೈಫ್ಸೈಕಲ್ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ React-native APIs ಬೇಕಾದಾಗ.
- DOM ಬದಲಾವಣೆಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುವ ಲೇಔಟ್ ಅನಿಮೇಷನ್ಗಳು ಬೇಕಾದಾಗ.
- ಎಕ್ಸಿಟ್ ಅನಿಮೇಷನ್ಗಳಿಗಾಗಿ
AnimatePresenceಬೇಕಾದಾಗ. - ನೈಸರ್ಗಿಕವಾಗಿ ಕಾಣುವ spring physics ಬೇಕಾದಾಗ.