ಸುಮಾರು 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ಪ್ರತಿ ನಿರ್ಗಮನ ಮುಗಿದ ನಂತರವೇ ಹೊಸ ಮಕ್ಕಳನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.ಉದಾಹರಣೆ ಸಿದ್ಧವಾಗುತ್ತಿದೆ…
ತೆಗೆದ ಸಂದೇಶಗಳು ಮರೆಯಾಗುವ ಮೊದಲು ಆರಿಸಿದ ಮೋಷನ್‌ನೊಂದಿಗೆ ನಿರ್ಗಮಿಸುತ್ತವೆ.
ಇಡೀ ಮಾದರಿ ಈಗ ನಿಮ್ಮದು
ಮೌಲ್ಯಗಳು, ಗಮ್ಯಸ್ಥಾನಗಳು, ಇನ್‌ಪುಟ್ ಮತ್ತು ನಿರ್ಗಮನಗಳು ಅದೇ ಕಂಟ್ರೋಲರ್‌ಗಳು, ಅಡಚಣೆ ನಿಯಮಗಳು ಮತ್ತು ಸ್ವಚ್ಛತೆಯನ್ನು ಹಂಚಿಕೊಳ್ಳುತ್ತವೆ. ಮಾರ್ಗದರ್ಶಿಗಳು ಪ್ರತಿಯೊಂದನ್ನೂ ಆಳವಾಗಿ ವಿವರಿಸುತ್ತವೆ.