ಇದನ್ನು ಚಿತ್ರಿಸಿಕೊಳ್ಳಿ: ನೀವು ಹೊಸ ಪ್ರಾಜೆಕ್ಟ್ಗೆ ಸೇರುತ್ತೀರಿ, ಕೋಡ್ಬೇಸ್ಗೆ ಧುಮುಕುತ್ತೀರಿ ಮತ್ತು ಮೊದಲ ಕೆಲವು ಗಂಟೆಗಳಲ್ಲಿ, ನಿರಾಶಾದಾಯಕವಾಗಿ ಪರಿಚಿತವಾಗಿರುವದನ್ನು ನೀವು ಕಂಡುಕೊಳ್ಳುತ್ತೀರಿ. ಸ್ಟೈಲ್ಶೀಟ್ಗಳಾದ್ಯಂತ ಹರಡಿಕೊಂಡಿದೆ, ಒಂದೇ ಮೂಲ ಅನಿಮೇಷನ್ಗಳಿಗಾಗಿ ನೀವು ಬಹು @keyframes ವ್ಯಾಖ್ಯಾನಗಳನ್ನು ಕಾಣುತ್ತೀರಿ. ಮೂರು ವಿಭಿನ್ನ ಫೇಡ್-ಇನ್ ಪರಿಣಾಮಗಳು, ಎರಡು ಅಥವಾ ಮೂರು ಸ್ಲೈಡ್ ವ್ಯತ್ಯಾಸಗಳು, ಬೆರಳೆಣಿಕೆಯಷ್ಟು ಜೂಮ್ ಅನಿಮೇಷನ್ಗಳು ಮತ್ತು ಕನಿಷ್ಠ ಎರಡು ವಿಭಿನ್ನ ಸ್ಪಿನ್ ಅನಿಮೇಷನ್ಗಳು ಏಕೆಂದರೆ, ಏಕೆ ಅಲ್ಲ? @keyframes ನಾಡಿ { { ನಿಂದ ಪ್ರಮಾಣ: 1; } ಗೆ { ಪ್ರಮಾಣ: 1.1; } }
@keyframes ದೊಡ್ಡದು-ನಾಡಿ { 0%, 20%, 100% { ಪ್ರಮಾಣ: 1; } 10%, 40% { ಪ್ರಮಾಣ: 1.2; } }
ಈ ಸನ್ನಿವೇಶವು ಪರಿಚಿತವಾಗಿದ್ದರೆ, ನೀವು ಒಬ್ಬಂಟಿಯಾಗಿಲ್ಲ. ವಿವಿಧ ಯೋಜನೆಗಳಾದ್ಯಂತ ನನ್ನ ಅನುಭವದಲ್ಲಿ, ನಾನು ನೀಡಬಹುದಾದ ಅತ್ಯಂತ ಸ್ಥಿರವಾದ ತ್ವರಿತ ಗೆಲುವುಗಳೆಂದರೆ ಕೀಫ್ರೇಮ್ಗಳನ್ನು ಕ್ರೋಢೀಕರಿಸುವುದು ಮತ್ತು ಪ್ರಮಾಣೀಕರಿಸುವುದು. ಇದು ಅಂತಹ ವಿಶ್ವಾಸಾರ್ಹ ಮಾದರಿಯಾಗಿದೆ, ಯಾವುದೇ ಹೊಸ ಕೋಡ್ಬೇಸ್ನಲ್ಲಿ ನನ್ನ ಮೊದಲ ಕಾರ್ಯಗಳಲ್ಲಿ ಒಂದಾಗಿ ಈ ಸ್ವಚ್ಛಗೊಳಿಸುವಿಕೆಯನ್ನು ನಾನು ಈಗ ಎದುರು ನೋಡುತ್ತಿದ್ದೇನೆ. ದಿ ಲಾಜಿಕ್ ಬಿಹೈಂಡ್ ದಿ ಚೋಸ್ ನೀವು ಅದರ ಬಗ್ಗೆ ಯೋಚಿಸಿದಾಗ ಈ ಪುನರಾವರ್ತನೆಯು ಪರಿಪೂರ್ಣ ಅರ್ಥವನ್ನು ನೀಡುತ್ತದೆ. ನಾವೆಲ್ಲರೂ ನಮ್ಮ ದಿನನಿತ್ಯದ ಕೆಲಸದಲ್ಲಿ ಒಂದೇ ರೀತಿಯ ಮೂಲಭೂತ ಅನಿಮೇಷನ್ಗಳನ್ನು ಬಳಸುತ್ತೇವೆ: ಫೇಡ್ಗಳು, ಸ್ಲೈಡ್ಗಳು, ಜೂಮ್ಗಳು, ಸ್ಪಿನ್ಗಳು ಮತ್ತು ಇತರ ಸಾಮಾನ್ಯ ಪರಿಣಾಮಗಳು. ಈ ಅನಿಮೇಷನ್ಗಳು ಬಹಳ ಸರಳವಾಗಿರುತ್ತವೆ ಮತ್ತು ಕೆಲಸವನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು ತ್ವರಿತ @keyframes ವ್ಯಾಖ್ಯಾನವನ್ನು ವಿಪ್ ಮಾಡುವುದು ಸುಲಭವಾಗಿದೆ. ಕೇಂದ್ರೀಕೃತ ಅನಿಮೇಷನ್ ಸಿಸ್ಟಮ್ ಇಲ್ಲದೆ, ಡೆವಲಪರ್ಗಳು ಸ್ವಾಭಾವಿಕವಾಗಿ ಈ ಕೀಫ್ರೇಮ್ಗಳನ್ನು ಮೊದಲಿನಿಂದ ಬರೆಯುತ್ತಾರೆ, ಇದೇ ರೀತಿಯ ಅನಿಮೇಷನ್ಗಳು ಈಗಾಗಲೇ ಕೋಡ್ಬೇಸ್ನಲ್ಲಿ ಬೇರೆಡೆ ಅಸ್ತಿತ್ವದಲ್ಲಿವೆ ಎಂದು ತಿಳಿದಿರುವುದಿಲ್ಲ. ಘಟಕ-ಆಧಾರಿತ ಆರ್ಕಿಟೆಕ್ಚರ್ಗಳಲ್ಲಿ ಕೆಲಸ ಮಾಡುವಾಗ ಇದು ವಿಶೇಷವಾಗಿ ಸಾಮಾನ್ಯವಾಗಿದೆ (ಈ ದಿನಗಳಲ್ಲಿ ನಮ್ಮಲ್ಲಿ ಹೆಚ್ಚಿನವರು ಇದನ್ನು ಮಾಡುತ್ತಾರೆ), ಏಕೆಂದರೆ ತಂಡಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಅಪ್ಲಿಕೇಶನ್ನ ವಿವಿಧ ಭಾಗಗಳಲ್ಲಿ ಸಮಾನಾಂತರವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ. ಫಲಿತಾಂಶ? ಅನಿಮೇಷನ್ ಅವ್ಯವಸ್ಥೆ. ದಿ ಸ್ಮಾಲ್ ಪ್ರಾಬ್ಲಮ್ ಕೀಫ್ರೇಮ್ಗಳ ನಕಲುಗಳೊಂದಿಗಿನ ಅತ್ಯಂತ ಸ್ಪಷ್ಟವಾದ ಸಮಸ್ಯೆಗಳೆಂದರೆ ಅಭಿವೃದ್ಧಿ ಸಮಯ ವ್ಯರ್ಥ ಮತ್ತು ಅನಗತ್ಯ ಕೋಡ್ ಉಬ್ಬುವುದು. ಬಹು ಕೀಫ್ರೇಮ್ ವ್ಯಾಖ್ಯಾನಗಳು ಅಗತ್ಯತೆಗಳು ಬದಲಾದಾಗ ನವೀಕರಿಸಲು ಬಹು ಸ್ಥಳಗಳನ್ನು ಅರ್ಥೈಸುತ್ತವೆ. ನಿಮ್ಮ ಫೇಡ್ ಅನಿಮೇಷನ್ನ ಸಮಯವನ್ನು ಸರಿಹೊಂದಿಸಬೇಕೇ? ನಿಮ್ಮ ಕೋಡ್ಬೇಸ್ನಾದ್ಯಂತ ನೀವು ಪ್ರತಿ ನಿದರ್ಶನವನ್ನು ಬೇಟೆಯಾಡಬೇಕಾಗುತ್ತದೆ. ಸರಾಗಗೊಳಿಸುವ ಕಾರ್ಯಗಳನ್ನು ಪ್ರಮಾಣೀಕರಿಸಲು ಬಯಸುವಿರಾ? ಎಲ್ಲಾ ಮಾರ್ಪಾಡುಗಳನ್ನು ಕಂಡುಹಿಡಿಯುವಲ್ಲಿ ಅದೃಷ್ಟ. ನಿರ್ವಹಣಾ ಬಿಂದುಗಳ ಈ ಗುಣಾಕಾರವು ಸರಳವಾದ ಅನಿಮೇಷನ್ ನವೀಕರಣಗಳನ್ನು ಸಹ ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುವ ಕಾರ್ಯವನ್ನಾಗಿ ಮಾಡುತ್ತದೆ. ದೊಡ್ಡ ಸಮಸ್ಯೆ ಈ ಕೀಫ್ರೇಮ್ಗಳ ನಕಲು ಮೇಲ್ಮೈ ಕೆಳಗೆ ಸುಪ್ತವಾಗಿರುವ ಹೆಚ್ಚು ಕಪಟ ಸಮಸ್ಯೆಯನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ: ಜಾಗತಿಕ ವ್ಯಾಪ್ತಿಯ ಬಲೆ. ಘಟಕ-ಆಧಾರಿತ ಆರ್ಕಿಟೆಕ್ಚರ್ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗಲೂ, CSS ಕೀಫ್ರೇಮ್ಗಳನ್ನು ಯಾವಾಗಲೂ ಜಾಗತಿಕ ವ್ಯಾಪ್ತಿಯಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗುತ್ತದೆ. ಇದರರ್ಥ ಎಲ್ಲಾ ಕೀಫ್ರೇಮ್ಗಳು ಎಲ್ಲಾ ಘಟಕಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತವೆ. ಯಾವಾಗಲೂ. ಹೌದು, ನಿಮ್ಮ ಅನಿಮೇಷನ್ ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ನಲ್ಲಿ ನೀವು ವ್ಯಾಖ್ಯಾನಿಸಿದ ಕೀಫ್ರೇಮ್ಗಳನ್ನು ಅಗತ್ಯವಾಗಿ ಬಳಸುವುದಿಲ್ಲ. ಇದು ಜಾಗತಿಕ ವ್ಯಾಪ್ತಿಗೆ ಲೋಡ್ ಮಾಡಲಾದ ಅದೇ ಹೆಸರಿಗೆ ಹೊಂದಿಕೆಯಾಗುವ ಕೊನೆಯ ಕೀಫ್ರೇಮ್ಗಳನ್ನು ಬಳಸುತ್ತದೆ. ನಿಮ್ಮ ಎಲ್ಲಾ ಕೀಫ್ರೇಮ್ಗಳು ಒಂದೇ ಆಗಿರುವವರೆಗೆ, ಇದು ಚಿಕ್ಕ ಸಮಸ್ಯೆಯಂತೆ ಕಾಣಿಸಬಹುದು. ಆದರೆ ನಿರ್ದಿಷ್ಟ ಬಳಕೆಯ ಸಂದರ್ಭಕ್ಕಾಗಿ ನೀವು ಅನಿಮೇಷನ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಬಯಸುವ ಕ್ಷಣದಲ್ಲಿ, ನೀವು ತೊಂದರೆಯಲ್ಲಿದ್ದೀರಿ ಅಥವಾ ಕೆಟ್ಟದಾಗಿ, ನೀವು ಅವುಗಳನ್ನು ಉಂಟುಮಾಡುವಿರಿ. ಒಂದೋ ನಿಮ್ಮ ಅನಿಮೇಷನ್ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ ಏಕೆಂದರೆ ನಿಮ್ಮ ನಂತರ ಲೋಡ್ ಆಗುವ ಮತ್ತೊಂದು ಘಟಕ, ನಿಮ್ಮ ಕೀಫ್ರೇಮ್ಗಳನ್ನು ಓವರ್ರೈಟ್ ಮಾಡುವುದು ಅಥವಾ ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ ಲೋಡ್ ಕೊನೆಯದಾಗಿ ಮತ್ತು ಆ ಕೀಫ್ರೇಮ್ನ ಹೆಸರನ್ನು ಬಳಸಿಕೊಂಡು ಪ್ರತಿಯೊಂದು ಇತರ ಘಟಕಗಳಿಗೆ ಅನಿಮೇಷನ್ ನಡವಳಿಕೆಯನ್ನು ಆಕಸ್ಮಿಕವಾಗಿ ಬದಲಾಯಿಸುತ್ತದೆ, ಮತ್ತು ನೀವು ಅದನ್ನು ಅರಿತುಕೊಳ್ಳದಿರಬಹುದು. ಸಮಸ್ಯೆಯನ್ನು ಪ್ರದರ್ಶಿಸುವ ಸರಳ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ: .ಘಟಕ-ಒಂದು { /* ಘಟಕ ಶೈಲಿಗಳು */ ಅನಿಮೇಷನ್: ನಾಡಿ 1s ಈಸ್-ಇನ್-ಔಟ್ ಅನಂತ ಪರ್ಯಾಯ; }
/* ಈ @keyframes ವ್ಯಾಖ್ಯಾನವು ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ */ @keyframes ನಾಡಿ { { ನಿಂದ ಪ್ರಮಾಣ: 1; } ಗೆ { ಪ್ರಮಾಣ: 1.1; } }
/* ನಂತರ ಕೋಡ್ನಲ್ಲಿ... */
.ಘಟಕ-ಎರಡು { /* ಘಟಕ ಶೈಲಿಗಳು */ ಅನಿಮೇಷನ್: ನಾಡಿ 1s ಈಸ್-ಇನ್-ಔಟ್ ಅನಂತ; }
/* ಈ ಕೀಫ್ರೇಮ್ಗಳು ಎರಡೂ ಘಟಕಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತವೆ */ @keyframes ನಾಡಿ { 0%, 20%, 100% { ಪ್ರಮಾಣ: 1; } 10%, 40% { ಪ್ರಮಾಣ: 1.2; } }
ಎರಡೂ ಘಟಕಗಳು ಒಂದೇ ಅನಿಮೇಷನ್ ಹೆಸರನ್ನು ಬಳಸುತ್ತವೆ, ಆದರೆ ಎರಡನೆಯ @keyframes ವ್ಯಾಖ್ಯಾನವು ಮೊದಲನೆಯದನ್ನು ತಿದ್ದಿ ಬರೆಯುತ್ತದೆ. ಈಗ ಕಾಂಪೊನೆಂಟ್-ಒನ್ ಮತ್ತು ಕಾಂಪೊನೆಂಟ್-ಎರಡೂ ಎರಡನೇ ಕೀಫ್ರೇಮ್ಗಳನ್ನು ಬಳಸುತ್ತದೆ, ಯಾವ ಘಟಕವು ಯಾವ ಕೀಫ್ರೇಮ್ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿದೆ ಎಂಬುದನ್ನು ಲೆಕ್ಕಿಸದೆ. ಅಮಿತ್ ಶೀನ್ ಅವರ ಪೆನ್ ಕೀಫ್ರೇಮ್ಗಳ ಟೋಕನ್ಗಳನ್ನು ನೋಡಿ - ಡೆಮೊ 1 [ಫೋರ್ಕ್ಡ್]. ಕೆಟ್ಟ ಭಾಗ? ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಸ್ಥಳೀಯ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಆದರೆ ನಿರ್ಮಾಣ ಪ್ರಕ್ರಿಯೆಗಳು ನಿಮ್ಮ ಸ್ಟೈಲ್ಶೀಟ್ಗಳ ಲೋಡಿಂಗ್ ಕ್ರಮವನ್ನು ಬದಲಾಯಿಸಿದಾಗ ಉತ್ಪಾದನೆಯಲ್ಲಿ ನಿಗೂಢವಾಗಿ ಒಡೆಯುತ್ತದೆ. ಯಾವ ಘಟಕಗಳನ್ನು ಲೋಡ್ ಮಾಡಲಾಗಿದೆ ಮತ್ತು ಯಾವ ಅನುಕ್ರಮದಲ್ಲಿ ವಿಭಿನ್ನವಾಗಿ ವರ್ತಿಸುವ ಅನಿಮೇಷನ್ಗಳೊಂದಿಗೆ ನೀವು ಕೊನೆಗೊಳ್ಳುತ್ತೀರಿ. ಪರಿಹಾರ: ಏಕೀಕೃತ ಕೀಫ್ರೇಮ್ಗಳು ಈ ಗೊಂದಲಕ್ಕೆ ಉತ್ತರವು ಆಶ್ಚರ್ಯಕರವಾಗಿ ಸರಳವಾಗಿದೆ: ಪೂರ್ವನಿರ್ಧರಿತ ಡೈನಾಮಿಕ್ ಕೀಫ್ರೇಮ್ಗಳನ್ನು ಹಂಚಿಕೊಂಡ ಸ್ಟೈಲ್ಶೀಟ್ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಲಾಗಿದೆ. ಪ್ರತಿಯೊಂದು ಘಟಕವು ತನ್ನದೇ ಆದ ಅನಿಮೇಷನ್ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಬಿಡುವ ಬದಲು, ನಾವು ಉತ್ತಮವಾಗಿ ದಾಖಲಿಸಲಾದ, ಸುಲಭವಾದ ಕೇಂದ್ರೀಕೃತ ಕೀಫ್ರೇಮ್ಗಳನ್ನು ರಚಿಸುತ್ತೇವೆನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ನ ನಿರ್ದಿಷ್ಟ ಅಗತ್ಯಗಳಿಗೆ ಬಳಸಿ, ನಿರ್ವಹಿಸಬಹುದಾದ ಮತ್ತು ಅನುಗುಣವಾಗಿ. ಕೀಫ್ರೇಮ್ಗಳ ಟೋಕನ್ಗಳೆಂದು ಯೋಚಿಸಿ. ನಾವು ಬಣ್ಣಗಳು ಮತ್ತು ಅಂತರಕ್ಕಾಗಿ ಟೋಕನ್ಗಳನ್ನು ಬಳಸುವಂತೆಯೇ ಮತ್ತು ನಮ್ಮಲ್ಲಿ ಹಲವರು ಈಗಾಗಲೇ ಅನಿಮೇಷನ್ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ ಟೋಕನ್ಗಳನ್ನು ಬಳಸುತ್ತೇವೆ, ಅವಧಿ ಮತ್ತು ಸರಾಗಗೊಳಿಸುವ ಕಾರ್ಯಗಳಂತಹ, ಕೀಫ್ರೇಮ್ಗಳಿಗಾಗಿ ಟೋಕನ್ಗಳನ್ನು ಏಕೆ ಬಳಸಬಾರದು? ಸಣ್ಣ ಸಮಸ್ಯೆ (ಕೋಡ್ ನಕಲು) ಮತ್ತು ದೊಡ್ಡ ಸಮಸ್ಯೆ (ಜಾಗತಿಕ ವ್ಯಾಪ್ತಿಯ ಸಂಘರ್ಷಗಳು) ಎರಡನ್ನೂ ಒಂದೇ ಸಮಯದಲ್ಲಿ ಪರಿಹರಿಸುವಾಗ ಈ ವಿಧಾನವು ನೀವು ಬಳಸುತ್ತಿರುವ ಯಾವುದೇ ಪ್ರಸ್ತುತ ವಿನ್ಯಾಸದ ಟೋಕನ್ ವರ್ಕ್ಫ್ಲೋನೊಂದಿಗೆ ಸ್ವಾಭಾವಿಕವಾಗಿ ಸಂಯೋಜಿಸಬಹುದು. ಕಲ್ಪನೆಯು ಸರಳವಾಗಿದೆ: ನಮ್ಮ ಎಲ್ಲಾ ಸಾಮಾನ್ಯ ಅನಿಮೇಷನ್ಗಳಿಗೆ ಸತ್ಯದ ಒಂದೇ ಮೂಲವನ್ನು ರಚಿಸಿ. ಈ ಹಂಚಿದ ಸ್ಟೈಲ್ಶೀಟ್ ನಮ್ಮ ಯೋಜನೆಯು ನಿಜವಾಗಿ ಬಳಸುವ ಅನಿಮೇಷನ್ ಮಾದರಿಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಎಚ್ಚರಿಕೆಯಿಂದ ರಚಿಸಲಾದ ಕೀಫ್ರೇಮ್ಗಳನ್ನು ಒಳಗೊಂಡಿದೆ. ಫೇಡ್ ಅನಿಮೇಷನ್ ಈಗಾಗಲೇ ನಮ್ಮ ಕೋಡ್ಬೇಸ್ನಲ್ಲಿ ಎಲ್ಲೋ ಅಸ್ತಿತ್ವದಲ್ಲಿದೆಯೇ ಎಂದು ಇನ್ನು ಮುಂದೆ ಊಹಿಸಬೇಕಾಗಿಲ್ಲ. ಇನ್ನು ಮುಂದೆ ಆಕಸ್ಮಿಕವಾಗಿ ಇತರ ಘಟಕಗಳಿಂದ ಅನಿಮೇಷನ್ಗಳನ್ನು ಓವರ್ರೈಟ್ ಮಾಡಬೇಡಿ. ಆದರೆ ಇಲ್ಲಿ ಪ್ರಮುಖವಾಗಿದೆ: ಇವು ಕೇವಲ ಸ್ಥಿರ ಕಾಪಿ-ಪೇಸ್ಟ್ ಅನಿಮೇಷನ್ಗಳಲ್ಲ. ಅವುಗಳನ್ನು CSS ಕಸ್ಟಮ್ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ ಕ್ರಿಯಾತ್ಮಕ ಮತ್ತು ಗ್ರಾಹಕೀಯಗೊಳಿಸುವಂತೆ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ, ನಿರ್ದಿಷ್ಟ ಬಳಕೆಯ ಸಂದರ್ಭಗಳಿಗೆ ಅನಿಮೇಷನ್ಗಳನ್ನು ಹೊಂದಿಕೊಳ್ಳುವ ನಮ್ಯತೆಯನ್ನು ಹೊಂದಿರುವಾಗ ಸ್ಥಿರತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ನಿಮಗೆ ಒಂದೇ ಸ್ಥಳದಲ್ಲಿ ಸ್ವಲ್ಪ ದೊಡ್ಡ "ಪಲ್ಸ್" ಅನಿಮೇಷನ್ ಅಗತ್ಯವಿದ್ದರೆ. ಮೊದಲ ಕೀಫ್ರೇಮ್ಗಳ ಟೋಕನ್ ಅನ್ನು ನಿರ್ಮಿಸುವುದು ನಾವು ನಿಭಾಯಿಸಬೇಕಾದ ಮೊದಲ ಕಡಿಮೆ-ನೇತಾಡುವ ಹಣ್ಣುಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ "ಫೇಡ್-ಇನ್" ಅನಿಮೇಷನ್. ನನ್ನ ಇತ್ತೀಚಿನ ಪ್ರಾಜೆಕ್ಟ್ಗಳಲ್ಲಿ, ನಾನು ಹನ್ನೆರಡು ಪ್ರತ್ಯೇಕ ಫೇಡ್-ಇನ್ ವ್ಯಾಖ್ಯಾನಗಳನ್ನು ಕಂಡುಕೊಂಡಿದ್ದೇನೆ ಮತ್ತು ಹೌದು, ಅವೆಲ್ಲವೂ ಅಪಾರದರ್ಶಕತೆಯನ್ನು 0 ರಿಂದ 1 ರವರೆಗೆ ಸರಳವಾಗಿ ಅನಿಮೇಟೆಡ್ ಮಾಡಿವೆ. ಆದ್ದರಿಂದ, ನಾವು ಹೊಸ ಸ್ಟೈಲ್ಶೀಟ್ ಅನ್ನು ರಚಿಸೋಣ, ಅದನ್ನು kf-tokens.css ಎಂದು ಕರೆಯೋಣ, ಅದನ್ನು ನಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ಗೆ ಆಮದು ಮಾಡಿಕೊಳ್ಳಿ ಮತ್ತು ಅದರೊಳಗೆ ಸರಿಯಾದ ಕಾಮೆಂಟ್ಗಳೊಂದಿಗೆ ನಮ್ಮ ಕೀಫ್ರೇಮ್ಗಳನ್ನು ಇರಿಸೋಣ. /* keyframes-tokens.css */
/* * ಫೇಡ್ ಇನ್ - ಫೇಡ್ ಪ್ರವೇಶ ಅನಿಮೇಷನ್ * ಬಳಕೆ: ಅನಿಮೇಷನ್: ಕೆಎಫ್-ಫೇಡ್-ಇನ್ 0.3 ಸೆ ಈಸ್-ಔಟ್; */ @keyframes kf-fade-in { { ನಿಂದ ಅಪಾರದರ್ಶಕತೆ: 0; } ಗೆ { ಅಪಾರದರ್ಶಕತೆ: 1; } }
ಈ ಏಕೈಕ @keyframes ಘೋಷಣೆಯು ನಮ್ಮ ಕೋಡ್ಬೇಸ್ನಾದ್ಯಂತ ಎಲ್ಲಾ ಚದುರಿದ ಫೇಡ್-ಇನ್ ಅನಿಮೇಷನ್ಗಳನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ. ಶುದ್ಧ, ಸರಳ ಮತ್ತು ಜಾಗತಿಕವಾಗಿ ಅನ್ವಯಿಸುತ್ತದೆ. ಮತ್ತು ಈಗ ನಾವು ಈ ಟೋಕನ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿದ್ದೇವೆ, ನಮ್ಮ ಯೋಜನೆಯ ಉದ್ದಕ್ಕೂ ಯಾವುದೇ ಘಟಕದಿಂದ ನಾವು ಇದನ್ನು ಬಳಸಬಹುದು: .ಮೋಡಲ್ { ಅನಿಮೇಷನ್: ಕೆಎಫ್-ಫೇಡ್-ಇನ್ 0.3 ಸೆ ಈಸ್-ಔಟ್; }
.ಟೂಲ್ಟಿಪ್ { ಅನಿಮೇಶನ್: ಕೆಎಫ್-ಫೇಡ್-ಇನ್ 0.2 ಸೆ ಈಸ್-ಇನ್-ಔಟ್; }
.ಅಧಿಸೂಚನೆ { ಅನಿಮೇಷನ್: ಕೆಎಫ್-ಫೇಡ್-ಇನ್ 0.5 ಸೆ ಈಸ್-ಔಟ್; }
ಅಮಿತ್ ಶೀನ್ ಅವರ ಪೆನ್ ಕೀಫ್ರೇಮ್ಗಳ ಟೋಕನ್ಗಳನ್ನು ನೋಡಿ - ಡೆಮೊ 2 [ಫೋರ್ಕ್ಡ್]. ಗಮನಿಸಿ: ನಮ್ಮ ಎಲ್ಲಾ @keyframes ಹೆಸರುಗಳಲ್ಲಿ ನಾವು kf- ಪೂರ್ವಪ್ರತ್ಯಯವನ್ನು ಬಳಸುತ್ತಿದ್ದೇವೆ. ಈ ಪೂರ್ವಪ್ರತ್ಯಯವು ನೇಮ್ಸ್ಪೇಸ್ ಆಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಅದು ಯೋಜನೆಯಲ್ಲಿ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಅನಿಮೇಷನ್ಗಳೊಂದಿಗೆ ಘರ್ಷಣೆಯನ್ನು ಹೆಸರಿಸುವುದನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ಈ ಕೀಫ್ರೇಮ್ಗಳು ನಮ್ಮ ಕೀಫ್ರೇಮ್ಗಳ ಟೋಕನ್ಗಳ ಫೈಲ್ನಿಂದ ಬಂದಿವೆ ಎಂಬುದನ್ನು ತಕ್ಷಣವೇ ಸ್ಪಷ್ಟಪಡಿಸುತ್ತದೆ. ಡೈನಾಮಿಕ್ ಸ್ಲೈಡ್ ಮಾಡುವುದು ಕೆಎಫ್-ಫೇಡ್-ಇನ್ ಕೀಫ್ರೇಮ್ಗಳು ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಏಕೆಂದರೆ ಇದು ಸರಳವಾಗಿದೆ ಮತ್ತು ವಿಷಯಗಳನ್ನು ಗೊಂದಲಗೊಳಿಸಲು ಕಡಿಮೆ ಸ್ಥಳಾವಕಾಶವಿದೆ. ಇತರ ಅನಿಮೇಷನ್ಗಳಲ್ಲಿ, ಆದಾಗ್ಯೂ, ನಾವು ಹೆಚ್ಚು ಕ್ರಿಯಾತ್ಮಕವಾಗಿರಬೇಕು ಮತ್ತು ಇಲ್ಲಿ ನಾವು CSS ಕಸ್ಟಮ್ ಗುಣಲಕ್ಷಣಗಳ ಅಗಾಧ ಶಕ್ತಿಯನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು. ಚದುರಿದ ಸ್ಥಿರ ಅನಿಮೇಷನ್ಗಳಿಗೆ ಹೋಲಿಸಿದರೆ ಕೀಫ್ರೇಮ್ಗಳ ಟೋಕನ್ಗಳು ನಿಜವಾಗಿಯೂ ಹೊಳೆಯುವುದು ಇಲ್ಲಿಯೇ. ನಾವು ಸಾಮಾನ್ಯ ಸನ್ನಿವೇಶವನ್ನು ತೆಗೆದುಕೊಳ್ಳೋಣ: "ಸ್ಲೈಡ್-ಇನ್" ಅನಿಮೇಷನ್ಗಳು. ಆದರೆ ಎಲ್ಲಿಂದ ಸ್ಲೈಡ್? ಬಲದಿಂದ 100px? ಎಡದಿಂದ 50%? ಇದು ಪರದೆಯ ಮೇಲಿನಿಂದ ಪ್ರವೇಶಿಸಬೇಕೇ? ಅಥವಾ ಕೆಳಗಿನಿಂದ ತೇಲಬಹುದೇ? ಹಲವಾರು ಸಾಧ್ಯತೆಗಳು, ಆದರೆ ಪ್ರತಿಯೊಂದು ದಿಕ್ಕು ಮತ್ತು ಪ್ರತಿ ಬದಲಾವಣೆಗೆ ಪ್ರತ್ಯೇಕ ಕೀಫ್ರೇಮ್ಗಳನ್ನು ರಚಿಸುವ ಬದಲು, ನಾವು ಎಲ್ಲಾ ಸನ್ನಿವೇಶಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ಒಂದು ಹೊಂದಿಕೊಳ್ಳುವ ಟೋಕನ್ ಅನ್ನು ನಿರ್ಮಿಸಬಹುದು: /* * ಸ್ಲೈಡ್ ಇನ್ - ಡೈರೆಕ್ಷನಲ್ ಸ್ಲೈಡ್ ಅನಿಮೇಷನ್ * ದಿಕ್ಕನ್ನು ನಿಯಂತ್ರಿಸಲು --kf-slide-from ಬಳಸಿ * ಡೀಫಾಲ್ಟ್: ಎಡದಿಂದ ಸ್ಲೈಡ್ಗಳು (-100%) * ಬಳಕೆ: * ಅನಿಮೇಷನ್: ಕೆಎಫ್-ಸ್ಲೈಡ್-ಇನ್ 0.3 ಸೆ ಈಸ್-ಔಟ್; * --kf-ಸ್ಲೈಡ್-ಇಂದ: -100px 0; // ಎಡದಿಂದ ಸ್ಲೈಡ್ * --kf-ಸ್ಲೈಡ್-ಇಂದ: 100px 0; // ಬಲದಿಂದ ಸ್ಲೈಡ್ ಮಾಡಿ * --kf-ಸ್ಲೈಡ್-ಇಂದ: 0 -50px; // ಮೇಲಿನಿಂದ ಸ್ಲೈಡ್ ಮಾಡಿ */
@keyframes kf-slide-in { { ನಿಂದ ಅನುವಾದ: var (--kf-slide-from, -100% 0); } ಗೆ { ಅನುವಾದ: 0 0; } }
ಈಗ ನಾವು ಈ ಏಕ @keyframes ಟೋಕನ್ ಅನ್ನು ಯಾವುದೇ ಸ್ಲೈಡ್ ನಿರ್ದೇಶನಕ್ಕಾಗಿ --kf-slide-from ಕಸ್ಟಮ್ ಆಸ್ತಿಯನ್ನು ಬದಲಾಯಿಸುವ ಮೂಲಕ ಬಳಸಬಹುದು: .ಸೈಡ್ಬಾರ್ { ಅನಿಮೇಶನ್: ಕೆಎಫ್-ಸ್ಲೈಡ್-ಇನ್ 0.3 ಸೆ ಈಸ್-ಔಟ್; /* ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವನ್ನು ಬಳಸುತ್ತದೆ: ಎಡದಿಂದ ಸ್ಲೈಡ್ಗಳು */ }
.ಅಧಿಸೂಚನೆ { ಅನಿಮೇಷನ್: ಕೆಎಫ್-ಸ್ಲೈಡ್-ಇನ್ 0.4 ಸೆ ಈಸ್-ಔಟ್; --kf-slide-from: 0 -50px; /* ಮೇಲಿನಿಂದ ಸ್ಲೈಡ್ */ }
.ಮೋಡಲ್ { ಅನಿಮೇಷನ್: ಕೆಎಫ್-ಫೇಡ್-ಇನ್ 0.5ಸೆ, ಕೆಎಫ್-ಸ್ಲೈಡ್-ಇನ್ 0.5ಸೆ ಕ್ಯೂಬಿಕ್-ಬೆಜಿಯರ್(0.34, 1.56, 0.64, 1); --kf-slide-from: 50px 50px; /* ಕೆಳಗಿನ ಬಲದಿಂದ ಸ್ಲೈಡ್ */ }
ಸ್ಥಿರತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳುವಾಗ ಈ ವಿಧಾನವು ನಮಗೆ ನಂಬಲಾಗದ ನಮ್ಯತೆಯನ್ನು ನೀಡುತ್ತದೆ. ಒಂದು ಕೀಫ್ರೇಮ್ ಘೋಷಣೆ, ಅನಂತ ಸಾಧ್ಯತೆಗಳು. ಅಮಿತ್ ಶೀನ್ ಅವರಿಂದ ಪೆನ್ ಕೀಫ್ರೇಮ್ಗಳ ಟೋಕನ್ಗಳನ್ನು ನೋಡಿ - ಡೆಮೊ 3 [ಫೋರ್ಕ್ಡ್]. ಮತ್ತು ನಾವು ನಮ್ಮ ಅನಿಮೇಷನ್ಗಳನ್ನು ಇನ್ನಷ್ಟು ಹೊಂದಿಕೊಳ್ಳುವಂತೆ ಮಾಡಲು ಬಯಸಿದರೆ, "ಸ್ಲೈಡ್-ಔಟ್" ಪರಿಣಾಮಗಳಿಗೂ ಅವಕಾಶ ನೀಡುತ್ತೇವೆ, ನಾವು ಮಾಡಬಹುದುಸರಳವಾಗಿ --kf-slide-ಗೆ ಕಸ್ಟಮ್ ಆಸ್ತಿಯನ್ನು ಸೇರಿಸಿ, ಮುಂದಿನ ವಿಭಾಗದಲ್ಲಿ ನಾವು ನೋಡುವಂತೆಯೇ. ದ್ವಿಮುಖ ಜೂಮ್ ಕೀಫ್ರೇಮ್ಗಳು ಯೋಜನೆಗಳಾದ್ಯಂತ ನಕಲು ಮಾಡುವ ಮತ್ತೊಂದು ಸಾಮಾನ್ಯ ಅನಿಮೇಷನ್ "ಜೂಮ್" ಪರಿಣಾಮಗಳು. ಇದು ಟೋಸ್ಟ್ ಸಂದೇಶಗಳಿಗೆ ಸೂಕ್ಷ್ಮವಾದ ಸ್ಕೇಲ್-ಅಪ್ ಆಗಿರಲಿ, ಮಾದರಿಗಳಿಗೆ ನಾಟಕೀಯ ಜೂಮ್-ಇನ್ ಆಗಿರಲಿ ಅಥವಾ ಶೀರ್ಷಿಕೆಗಳಿಗೆ ಸೌಮ್ಯವಾದ ಸ್ಕೇಲ್-ಡೌನ್ ಪರಿಣಾಮವಾಗಲಿ, ಜೂಮ್ ಅನಿಮೇಷನ್ಗಳು ಎಲ್ಲೆಡೆ ಇವೆ. ಪ್ರತಿ ಸ್ಕೇಲ್ ಮೌಲ್ಯಕ್ಕೆ ಪ್ರತ್ಯೇಕ ಕೀಫ್ರೇಮ್ಗಳನ್ನು ರಚಿಸುವ ಬದಲು, ಕೆಎಫ್-ಜೂಮ್ ಕೀಫ್ರೇಮ್ಗಳ ಒಂದು ಹೊಂದಿಕೊಳ್ಳುವ ಸೆಟ್ ಅನ್ನು ನಿರ್ಮಿಸೋಣ:
/* * ಜೂಮ್ - ಸ್ಕೇಲ್ ಅನಿಮೇಷನ್ * ಪ್ರಮಾಣದ ಮೌಲ್ಯಗಳನ್ನು ನಿಯಂತ್ರಿಸಲು --kf-zoom-from ಮತ್ತು --kf-zoom-to ಬಳಸಿ * ಡೀಫಾಲ್ಟ್: 80% ರಿಂದ 100% ವರೆಗೆ ಜೂಮ್ಗಳು (0.8 ರಿಂದ 1) * ಬಳಕೆ: * ಅನಿಮೇಷನ್: ಕೆಎಫ್-ಜೂಮ್ 0.2 ಸೆ ಈಸ್-ಔಟ್; * --kf-zoom-from: 0.5; --kf-zoom-to: 1; // 50% ರಿಂದ 100% ವರೆಗೆ ಜೂಮ್ ಮಾಡಿ * --kf-zoom-from: 1; --kf-zoom-to: 0; // 100% ರಿಂದ 0% ವರೆಗೆ ಜೂಮ್ ಮಾಡಿ * --kf-zoom-from: 1; --kf-zoom-to: 1.1; // 100% ರಿಂದ 110% ವರೆಗೆ ಜೂಮ್ ಮಾಡಿ */
@keyframes kf-zoom { { ನಿಂದ ಪ್ರಮಾಣ: var (--kf-zoom-from, 0.8); } ಗೆ { ಪ್ರಮಾಣ: var (--kf-zoom-to, 1); } }
ಒಂದು ವ್ಯಾಖ್ಯಾನದೊಂದಿಗೆ, ನಮಗೆ ಅಗತ್ಯವಿರುವ ಯಾವುದೇ ಜೂಮ್ ಬದಲಾವಣೆಯನ್ನು ನಾವು ಸಾಧಿಸಬಹುದು: .ಟೋಸ್ಟ್ { ಅನಿಮೇಷನ್: kf-slide-in 0.2s, kf-ಜೂಮ್ 0.4s ಸುಲಭ-ಔಟ್; --kf-slide-from: 0 100%; /* ಮೇಲಿನಿಂದ ಸ್ಲೈಡ್ */ /* ಡೀಫಾಲ್ಟ್ ಜೂಮ್ ಅನ್ನು ಬಳಸುತ್ತದೆ: 80% ರಿಂದ 100% ವರೆಗೆ ಮಾಪಕಗಳು */ }
.ಮೋಡಲ್ { ಅನಿಮೇಷನ್: ಕೆಎಫ್-ಜೂಮ್ 0.3 ಸೆ ಕ್ಯೂಬಿಕ್-ಬೆಜಿಯರ್(0.34, 1.56, 0.64, 1); --kf-zoom-from: 0; /* 0% ರಿಂದ 100% ವರೆಗೆ ನಾಟಕೀಯ ಜೂಮ್ */ }
.ಶೀರ್ಷಿಕೆ { ಅನಿಮೇಷನ್: kf-fade-in 2s, kf-zoom 2s ಸುಲಭ-ಇನ್; --kf-zoom-from: 1.2; --kf-zoom-to: 0.8; /* ಸೌಮ್ಯ ಪ್ರಮಾಣದ ಕೆಳಗೆ */ }
0.8 (80%) ನ ಡೀಫಾಲ್ಟ್ ಟೋಸ್ಟ್ ಸಂದೇಶಗಳು ಮತ್ತು ಕಾರ್ಡ್ಗಳಂತಹ ಹೆಚ್ಚಿನ UI ಅಂಶಗಳಿಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಆದರೆ ಇನ್ನೂ ವಿಶೇಷ ಸಂದರ್ಭಗಳಲ್ಲಿ ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಸುಲಭವಾಗಿದೆ. ಅಮಿತ್ ಶೀನ್ ಅವರ ಪೆನ್ ಕೀಫ್ರೇಮ್ಗಳ ಟೋಕನ್ಗಳನ್ನು ನೋಡಿ - ಡೆಮೊ 4 [ಫೋರ್ಕ್ಡ್]. ಇತ್ತೀಚಿನ ಉದಾಹರಣೆಗಳಲ್ಲಿ ನೀವು ಆಸಕ್ತಿದಾಯಕವಾದದ್ದನ್ನು ಗಮನಿಸಿರಬಹುದು: ನಾವು ಅನಿಮೇಷನ್ಗಳನ್ನು ಸಂಯೋಜಿಸುತ್ತಿದ್ದೇವೆ. @keyframes ಟೋಕನ್ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವ ಪ್ರಮುಖ ಪ್ರಯೋಜನವೆಂದರೆ ಅವುಗಳು ಪರಸ್ಪರ ಮನಬಂದಂತೆ ಸಂಯೋಜಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಈ ಮೃದುವಾದ ಸಂಯೋಜನೆಯು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿದೆ, ಆಕಸ್ಮಿಕವಲ್ಲ. ಅನಿಮೇಷನ್ ಸಂಯೋಜನೆಯು ಎಲ್ಲಿ ಸಮಸ್ಯಾತ್ಮಕವಾಗಬಹುದು ಎಂಬುದನ್ನು ನಾವು ನಂತರ ಹೆಚ್ಚು ವಿವರವಾಗಿ ಚರ್ಚಿಸುತ್ತೇವೆ, ಆದರೆ ಹೆಚ್ಚಿನ ಸಂಯೋಜನೆಗಳು ಸರಳ ಮತ್ತು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಸುಲಭವಾಗಿದೆ. ಗಮನಿಸಿ: ಈ ಲೇಖನವನ್ನು ಬರೆಯುವಾಗ ಮತ್ತು ಬಹುಶಃ ಅದನ್ನು ಬರೆಯುವ ಕಾರಣ, ಪ್ರವೇಶ ಅನಿಮೇಷನ್ಗಳ ಸಂಪೂರ್ಣ ಕಲ್ಪನೆಯನ್ನು ನಾನು ಮರುಚಿಂತನೆ ಮಾಡುತ್ತಿದ್ದೇನೆ. CSS ನಲ್ಲಿನ ಎಲ್ಲಾ ಇತ್ತೀಚಿನ ಪ್ರಗತಿಗಳೊಂದಿಗೆ, ನಮಗೆ ಇನ್ನೂ ಅವು ಅಗತ್ಯವಿದೆಯೇ? ಅದೃಷ್ಟವಶಾತ್, ಆಡಮ್ ಆರ್ಗೈಲ್ ಅದೇ ಪ್ರಶ್ನೆಗಳನ್ನು ಅನ್ವೇಷಿಸಿದರು ಮತ್ತು ಅವರ ಬ್ಲಾಗ್ನಲ್ಲಿ ಅದ್ಭುತವಾಗಿ ವ್ಯಕ್ತಪಡಿಸಿದ್ದಾರೆ. ಇದು ಇಲ್ಲಿ ಬರೆಯಲ್ಪಟ್ಟಿದ್ದನ್ನು ವಿರೋಧಿಸುವುದಿಲ್ಲ, ಆದರೆ ಇದು ಪರಿಗಣಿಸಲು ಯೋಗ್ಯವಾದ ವಿಧಾನವನ್ನು ಪ್ರಸ್ತುತಪಡಿಸುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ನಿಮ್ಮ ಯೋಜನೆಗಳು ಪ್ರವೇಶ ಅನಿಮೇಷನ್ಗಳ ಮೇಲೆ ಹೆಚ್ಚು ಅವಲಂಬಿತವಾಗಿದ್ದರೆ. ನಿರಂತರ ಅನಿಮೇಷನ್ಗಳು "ಫೇಡ್", "ಸ್ಲೈಡ್" ಮತ್ತು "ಜೂಮ್" ನಂತಹ ಪ್ರವೇಶ ಅನಿಮೇಶನ್ಗಳು ಒಮ್ಮೆ ಸಂಭವಿಸಿ ನಂತರ ನಿಲ್ಲುತ್ತವೆ, ನಿರಂತರ ಅನಿಮೇಷನ್ಗಳು ಗಮನ ಸೆಳೆಯಲು ಅಥವಾ ನಡೆಯುತ್ತಿರುವ ಚಟುವಟಿಕೆಯನ್ನು ಸೂಚಿಸಲು ಅನಿರ್ದಿಷ್ಟವಾಗಿ ಲೂಪ್ ಆಗುತ್ತವೆ. ನಾನು ಎದುರಿಸುವ ಎರಡು ಸಾಮಾನ್ಯ ನಿರಂತರ ಅನಿಮೇಷನ್ಗಳು "ಸ್ಪಿನ್" (ಲೋಡಿಂಗ್ ಸೂಚಕಗಳಿಗಾಗಿ) ಮತ್ತು "ಪಲ್ಸ್" (ಪ್ರಮುಖ ಅಂಶಗಳನ್ನು ಹೈಲೈಟ್ ಮಾಡಲು). ಕೀಫ್ರೇಮ್ಗಳ ಟೋಕನ್ಗಳನ್ನು ರಚಿಸುವಾಗ ಈ ಅನಿಮೇಷನ್ಗಳು ಅನನ್ಯ ಸವಾಲುಗಳನ್ನು ಪ್ರಸ್ತುತಪಡಿಸುತ್ತವೆ. ಸಾಮಾನ್ಯವಾಗಿ ಒಂದು ರಾಜ್ಯದಿಂದ ಇನ್ನೊಂದಕ್ಕೆ ಹೋಗುವ ಪ್ರವೇಶ ಅನಿಮೇಷನ್ಗಳಂತಲ್ಲದೆ, ನಿರಂತರ ಅನಿಮೇಷನ್ಗಳು ಅವುಗಳ ನಡವಳಿಕೆಯ ಮಾದರಿಗಳಲ್ಲಿ ಹೆಚ್ಚು ಗ್ರಾಹಕೀಯಗೊಳಿಸಬೇಕಾಗಿದೆ. ಸ್ಪಿನ್ ಡಾಕ್ಟರ್ ಪ್ರತಿಯೊಂದು ಯೋಜನೆಯು ಬಹು ಸ್ಪಿನ್ ಅನಿಮೇಷನ್ಗಳನ್ನು ಬಳಸುತ್ತಿರುವಂತೆ ತೋರುತ್ತಿದೆ. ಕೆಲವರು ಪ್ರದಕ್ಷಿಣಾಕಾರವಾಗಿ ತಿರುಗುತ್ತಾರೆ, ಇತರರು ಅಪ್ರದಕ್ಷಿಣಾಕಾರವಾಗಿ ತಿರುಗುತ್ತಾರೆ. ಕೆಲವರು ಒಂದೇ 360-ಡಿಗ್ರಿ ತಿರುಗುವಿಕೆಯನ್ನು ಮಾಡುತ್ತಾರೆ, ಇತರರು ವೇಗವಾದ ಪರಿಣಾಮಕ್ಕಾಗಿ ಅನೇಕ ತಿರುವುಗಳನ್ನು ಮಾಡುತ್ತಾರೆ. ಪ್ರತಿ ಬದಲಾವಣೆಗೆ ಪ್ರತ್ಯೇಕ ಕೀಫ್ರೇಮ್ಗಳನ್ನು ರಚಿಸುವ ಬದಲು, ಎಲ್ಲಾ ಸನ್ನಿವೇಶಗಳನ್ನು ನಿಭಾಯಿಸುವ ಒಂದು ಹೊಂದಿಕೊಳ್ಳುವ ಸ್ಪಿನ್ ಅನ್ನು ನಿರ್ಮಿಸೋಣ:
/* * ಸ್ಪಿನ್ - ತಿರುಗುವಿಕೆ ಅನಿಮೇಷನ್ * ತಿರುಗುವಿಕೆಯ ವ್ಯಾಪ್ತಿಯನ್ನು ನಿಯಂತ್ರಿಸಲು --kf-spin-from ಮತ್ತು --kf-spin-to ಬಳಸಿ * ತಿರುಗುವಿಕೆಯ ಪ್ರಮಾಣವನ್ನು ನಿಯಂತ್ರಿಸಲು --kf-spin-turns ಬಳಸಿ * ಡೀಫಾಲ್ಟ್: 0deg ನಿಂದ 360deg ವರೆಗೆ ತಿರುಗುತ್ತದೆ (1 ಪೂರ್ಣ ತಿರುಗುವಿಕೆ) * ಬಳಕೆ: * ಅನಿಮೇಷನ್: kf-spin 1s ರೇಖೀಯ ಅನಂತ; * --ಕೆಎಫ್-ಸ್ಪಿನ್-ತಿರುವುಗಳು: 2; // 2 ಪೂರ್ಣ ತಿರುಗುವಿಕೆಗಳು * --kf-spin-from: 0deg; --kf-spin-to: 180deg; // ಅರ್ಧ ತಿರುಗುವಿಕೆ * --kf-spin-from: 0deg; --kf-spin-to: -360deg; // ಅಪ್ರದಕ್ಷಿಣಾಕಾರವಾಗಿ */
@keyframes kf-spin { { ನಿಂದ ತಿರುಗಿಸಿ: var (--kf-spin-from, 0deg); } ಗೆ { ತಿರುಗಿಸಿ: ಕ್ಯಾಲ್ಕ್(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
ಈಗ ನಾವು ಇಷ್ಟಪಡುವ ಯಾವುದೇ ಸ್ಪಿನ್ ಬದಲಾವಣೆಯನ್ನು ನಾವು ರಚಿಸಬಹುದು:
.loading-spinner { ಅನಿಮೇಷನ್: kf-spin 1s ರೇಖೀಯ ಅನಂತ; /* ಡೀಫಾಲ್ಟ್ ಅನ್ನು ಬಳಸುತ್ತದೆ: 0deg ನಿಂದ 360deg ಗೆ ತಿರುಗುತ್ತದೆ */ }
.ಫಾಸ್ಟ್-ಲೋಡರ್ { ಅನಿಮೇಷನ್: ಕೆಎಫ್-ಸ್ಪಿನ್ 1.2 ಸೆ ಈಸ್-ಇನ್-ಔಟ್ ಇನ್ಫೈನೈಟ್ ಆಲ್ಟರ್ನೇಟ್; --ಕೆಎಫ್-ಸ್ಪಿನ್-ತಿರುವುಗಳು: 3; /* ಪ್ರತಿ ಚಕ್ರಕ್ಕೆ ಪ್ರತಿ ದಿಕ್ಕಿಗೆ 3 ಪೂರ್ಣ ತಿರುಗುವಿಕೆಗಳು*/ }
.ಹಂತ-ಹಿಮ್ಮುಖ { ಅನಿಮೇಷನ್: ಕೆಎಫ್-ಸ್ಪಿನ್ 1.5ಸೆ ಹಂತಗಳು(8) ಅನಂತ; --kf-spin-to: -360deg; /* ಅಪ್ರದಕ್ಷಿಣಾಕಾರವಾಗಿ */ }
.ಸೂಕ್ಷ್ಮ-ವಿಗ್ಲ್ { ಅನಿಮೇಷನ್: ಕೆಎಫ್-ಸ್ಪಿನ್ 2ಎಸ್ ಈಸ್-ಇನ್-ಔಟ್ ಇನ್ಫೈನೈಟ್ ಆಲ್ಟರ್ನೇಟ್; --kf-spin-from: -16deg; --kf-spin-to: 32deg; /* ವಿಗ್ಲ್ 36 ಡಿಗ್ರಿ: -18 ಡಿಗ್ರಿ ಮತ್ತು +18 ಡಿಗ್ರಿ ನಡುವೆ */ }
ಅಮಿತ್ ಶೀನ್ ಅವರ ಪೆನ್ ಕೀಫ್ರೇಮ್ಗಳ ಟೋಕನ್ಗಳನ್ನು ನೋಡಿ - ಡೆಮೊ 5 [ಫೋರ್ಕ್ಡ್]. ಈ ವಿಧಾನದ ಸೌಂದರ್ಯವೆಂದರೆ ಅದೇ ಕೀಫ್ರೇಮ್ಗಳು ಸ್ಪಿನ್ನರ್ಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು, ತಿರುಗುವ ಐಕಾನ್ಗಳು, ವಿಗ್ಲ್ ಎಫೆಕ್ಟ್ಗಳು ಮತ್ತು ಸಂಕೀರ್ಣ ಮಲ್ಟಿ-ಟರ್ನ್ ಅನಿಮೇಷನ್ಗಳಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ. ಪಲ್ಸ್ ವಿರೋಧಾಭಾಸ ಪಲ್ಸ್ ಅನಿಮೇಷನ್ಗಳು ಚಾತುರ್ಯದಿಂದ ಕೂಡಿರುತ್ತವೆ ಏಕೆಂದರೆ ಅವುಗಳು ವಿಭಿನ್ನ ಗುಣಲಕ್ಷಣಗಳನ್ನು "ನಾಡಿ" ಮಾಡಬಹುದು. ಕೆಲವರು ಸ್ಕೇಲ್ ಅನ್ನು ಪಲ್ಸ್ ಮಾಡುತ್ತಾರೆ, ಇತರರು ಅಪಾರದರ್ಶಕತೆಯನ್ನು ಪಲ್ಸ್ ಮಾಡುತ್ತಾರೆ, ಮತ್ತು ಕೆಲವು ಪಲ್ಸ್ ಬಣ್ಣದ ಗುಣಲಕ್ಷಣಗಳು ಹೊಳಪು ಅಥವಾ ಶುದ್ಧತ್ವ. ಪ್ರತಿ ಪ್ರಾಪರ್ಟಿಗೆ ಪ್ರತ್ಯೇಕ ಕೀಫ್ರೇಮ್ಗಳನ್ನು ರಚಿಸುವ ಬದಲು, ನಾವು ಯಾವುದೇ CSS ಆಸ್ತಿಯೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವ ಕೀಫ್ರೇಮ್ಗಳನ್ನು ರಚಿಸಬಹುದು. ಸ್ಕೇಲ್ ಮತ್ತು ಅಪಾರದರ್ಶಕತೆ ಆಯ್ಕೆಗಳೊಂದಿಗೆ ಪಲ್ಸ್ ಕೀಫ್ರೇಮ್ನ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:
/* * ಪಲ್ಸ್ - ಪಲ್ಸಿಂಗ್ ಅನಿಮೇಷನ್ * ಪ್ರಮಾಣದ ಶ್ರೇಣಿಯನ್ನು ನಿಯಂತ್ರಿಸಲು --kf-pulse-scale-from ಮತ್ತು --kf-pulse-scale-to ಬಳಸಿ * ಅಪಾರದರ್ಶಕತೆಯ ವ್ಯಾಪ್ತಿಯನ್ನು ನಿಯಂತ್ರಿಸಲು --kf-pulse-opacity-from ಮತ್ತು --kf-pulse-opacity-to ಬಳಸಿ * ಡೀಫಾಲ್ಟ್: ನಾಡಿ ಇಲ್ಲ (ಎಲ್ಲಾ ಮೌಲ್ಯಗಳು 1) * ಬಳಕೆ: * ಅನಿಮೇಷನ್: kf-pulse 2s ಈಸ್-ಇನ್-ಔಟ್ ಅನಂತ ಪರ್ಯಾಯ; * --ಕೆಎಫ್-ಪಲ್ಸ್-ಸ್ಕೇಲ್-ಇಂದ: 0.95; --ಕೆಎಫ್-ಪಲ್ಸ್-ಸ್ಕೇಲ್-ಟು: 1.05; // ಪ್ರಮಾಣದ ನಾಡಿ * --ಕೆಎಫ್-ಪಲ್ಸ್-ಅಪಾರದರ್ಶಕತೆ-ಇಂದ: 0.7; --kf-pulse-opacity-to: 1; // ಅಪಾರದರ್ಶಕತೆ ನಾಡಿ */
@keyframes kf-pulse { { ನಿಂದ ಪ್ರಮಾಣದ: var (--kf-pulse-scale-from, 1); ಅಪಾರದರ್ಶಕತೆ: var (--kf-pulse-opacity-from, 1); } ಗೆ { ಪ್ರಮಾಣದ: var (--kf-pulse-scale-to, 1); ಅಪಾರದರ್ಶಕತೆ: var (--kf-pulse-opacity-to, 1); } }
ಇದು ಅನೇಕ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವ ಹೊಂದಿಕೊಳ್ಳುವ ನಾಡಿಯನ್ನು ರಚಿಸುತ್ತದೆ: .ಕಾಲ್-ಟು-ಆಕ್ಷನ್ { ಅನಿಮೇಷನ್: ಕೆಎಫ್-ಪಲ್ಸ್ 0.6 ಸೆ ಅನಂತ ಪರ್ಯಾಯ; --ಕೆಎಫ್-ಪಲ್ಸ್-ಅಪಾರದರ್ಶಕತೆ-ಇಂದ: 0.5; /* ಅಪಾರದರ್ಶಕತೆ ಪಲ್ಸ್ */ }
.notification-dot { ಅನಿಮೇಷನ್: ಕೆಎಫ್-ಪಲ್ಸ್ 0.6 ಸೆ ಈಸ್-ಇನ್-ಔಟ್ ಇನ್ಫೈನೈಟ್ ಆಲ್ಟರ್ನೇಟ್; --ಕೆಎಫ್-ಪಲ್ಸ್-ಸ್ಕೇಲ್-ಇಂದ: 0.9; --kf-pulse-scale-to: 1.1; /* ಪ್ರಮಾಣದ ನಾಡಿ */ }
.ಪಠ್ಯ-ಹೈಲೈಟ್ { ಅನಿಮೇಷನ್: ಕೆಎಫ್-ಪಲ್ಸ್ 1.5 ಸೆ ಈಸ್-ಔಟ್ ಅನಂತ; --ಕೆಎಫ್-ಪಲ್ಸ್-ಸ್ಕೇಲ್-ಇಂದ: 0.8; --ಕೆಎಫ್-ಪಲ್ಸ್-ಅಪಾರದರ್ಶಕತೆ-ಇಂದ: 0.2; /* ಸ್ಕೇಲ್ ಮತ್ತು ಅಪಾರದರ್ಶಕತೆ ಪಲ್ಸ್ */ }
ಅಮಿತ್ ಶೀನ್ ಅವರ ಪೆನ್ ಕೀಫ್ರೇಮ್ಗಳ ಟೋಕನ್ಗಳನ್ನು ನೋಡಿ - ಡೆಮೊ 6 [ಫೋರ್ಕ್ಡ್]. ಈ ಸಿಂಗಲ್ ಕೆಎಫ್-ಪಲ್ಸ್ ಕೀಫ್ರೇಮ್ ಸೂಕ್ಷ್ಮ ಗಮನ ಸೆಳೆಯುವುದರಿಂದ ಹಿಡಿದು ನಾಟಕೀಯ ಮುಖ್ಯಾಂಶಗಳವರೆಗೆ ಎಲ್ಲವನ್ನೂ ನಿಭಾಯಿಸಬಲ್ಲದು, ಎಲ್ಲವನ್ನೂ ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಸುಲಭವಾಗಿದೆ. ಸುಧಾರಿತ ಸರಾಗಗೊಳಿಸುವಿಕೆ ಕೀಫ್ರೇಮ್ಗಳ ಟೋಕನ್ಗಳನ್ನು ಬಳಸುವುದರ ಬಗ್ಗೆ ಒಂದು ಉತ್ತಮವಾದ ವಿಷಯವೆಂದರೆ ನಮ್ಮ ಅನಿಮೇಷನ್ ಲೈಬ್ರರಿಯನ್ನು ವಿಸ್ತರಿಸುವುದು ಮತ್ತು ಹೆಚ್ಚಿನ ಡೆವಲಪರ್ಗಳು ಎಲಾಸ್ಟಿಕ್ ಅಥವಾ ಬೌನ್ಸ್ನಂತಹ ಮೊದಲಿನಿಂದ ಬರೆಯಲು ತೊಂದರೆಯಾಗದ ಪರಿಣಾಮಗಳನ್ನು ಒದಗಿಸುವುದು ಎಷ್ಟು ಸುಲಭ. ಜಂಪ್ ಎತ್ತರವನ್ನು ನಿಯಂತ್ರಿಸಲು --kf-bounce-from ಕಸ್ಟಮ್ ಆಸ್ತಿಯನ್ನು ಬಳಸುವ ಸರಳವಾದ "ಬೌನ್ಸ್" ಕೀಫ್ರೇಮ್ಗಳ ಟೋಕನ್ನ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ. /* * ಬೌನ್ಸ್ - ಬೌನ್ಸ್ ಪ್ರವೇಶ ಅನಿಮೇಷನ್ * ಜಂಪ್ ಎತ್ತರವನ್ನು ನಿಯಂತ್ರಿಸಲು --kf-bounce-from ಬಳಸಿ * ಡೀಫಾಲ್ಟ್: 100vh ನಿಂದ ಜಿಗಿತಗಳು (ಆಫ್ ಸ್ಕ್ರೀನ್) * ಬಳಕೆ: * ಅನಿಮೇಷನ್: ಕೆಎಫ್-ಬೌನ್ಸ್ 3 ಎಸ್ ಈಸ್-ಇನ್; * --kf-bounce-from: 200px; // 200px ಎತ್ತರದಿಂದ ಜಿಗಿಯಿರಿ */
@keyframes kf-ಬೌನ್ಸ್ { 0% { ಅನುವಾದ: 0 ಕ್ಯಾಲ್ಕ್(var(--kf-ಬೌನ್ಸ್-ಫ್ರಾಮ್, 100vh) * -1); }
34% { ಅನುವಾದ: 0 ಕ್ಯಾಲ್ಕ್ (var(--kf-ಬೌನ್ಸ್-ಫ್ರಾಮ್, 100vh) * -0.4); }
55% { ಅನುವಾದ: 0 ಕ್ಯಾಲ್ಕ್(var(--kf-ಬೌನ್ಸ್-ಫ್ರಾಮ್, 100vh) * -0.2); }
72% { ಅನುವಾದ: 0 ಕ್ಯಾಲ್ಕ್(var(--kf-ಬೌನ್ಸ್-ಫ್ರಾಮ್, 100vh) * -0.1); }
85% { ಅನುವಾದ: 0 ಕ್ಯಾಲ್ಕ್ (var(--kf-ಬೌನ್ಸ್-ಫ್ರಾಮ್, 100vh) * -0.05); }
94% { ಅನುವಾದ: 0 ಕ್ಯಾಲ್ಕ್(var(--kf-ಬೌನ್ಸ್-ಫ್ರಾಮ್, 100vh) * -0.025); }
99% { ಅನುವಾದ: 0 ಕ್ಯಾಲ್ಕ್(var(--kf-ಬೌನ್ಸ್-ಫ್ರಾಮ್, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { ಅನುವಾದ: 0 0; ಅನಿಮೇಷನ್-ಟೈಮಿಂಗ್-ಫಂಕ್ಷನ್: ಸುಲಭ-ಔಟ್; } }
ಕೀಫ್ರೇಮ್ಗಳ ಒಳಗಿನ ಲೆಕ್ಕಾಚಾರಗಳ ಕಾರಣದಿಂದಾಗಿ "ಎಲಾಸ್ಟಿಕ್" ನಂತಹ ಅನಿಮೇಷನ್ಗಳು ಸ್ವಲ್ಪ ತಂತ್ರವಾಗಿದೆ. ನಾವು --kf-elastic-from-X ಮತ್ತು --kf-elastic-from-Y ಅನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಬೇಕಾಗಿದೆ (ಎರಡೂ ಐಚ್ಛಿಕ), ಮತ್ತು ಒಟ್ಟಿಗೆ ಅವರು ಪರದೆಯ ಮೇಲೆ ಯಾವುದೇ ಬಿಂದುವಿನಿಂದ ಸ್ಥಿತಿಸ್ಥಾಪಕ ಪ್ರವೇಶವನ್ನು ರಚಿಸಲು ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತಾರೆ.
/* * ಸ್ಥಿತಿಸ್ಥಾಪಕ ಇನ್ - ಸ್ಥಿತಿಸ್ಥಾಪಕ ಪ್ರವೇಶ ಅನಿಮೇಷನ್ * ಪ್ರಾರಂಭದ ಸ್ಥಾನವನ್ನು ನಿಯಂತ್ರಿಸಲು --kf-elastic-from-X ಮತ್ತು --kf-elastic-from-Y ಬಳಸಿ * ಡೀಫಾಲ್ಟ್: ಮೇಲಿನ ಕೇಂದ್ರದಿಂದ ಪ್ರವೇಶಿಸುತ್ತದೆ (0, -100vh) * ಬಳಕೆ: * ಅನಿಮೇಷನ್: ಕೆಎಫ್-ಎಲಾಸ್ಟಿಕ್-ಇನ್ 2ಎಸ್ ಎರಡನ್ನೂ ಸುಲಭವಾಗಿಸುತ್ತದೆ; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // (-50px, -200px) ನಿಂದ ನಮೂದಿಸಿ */
@keyframes kf-elastic-in { 0% { ಅನುವಾದ: ಕ್ಯಾಲ್ಕ್(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { ಅನುವಾದಿಸಿ: ಕ್ಯಾಲ್ಕ್(var(--kf-elastic-from-X, -50vw) * -0.3227) calc(var(--kf-elastic-from-Y, 0px) * -0.3227); }
28% { ಅನುವಾದ: ಕ್ಯಾಲ್ಕ್(var(--kf-elastic-from-X, -50vw) * 0.1312)calc(var(--kf-elastic-from-Y, 0px) * 0.1312); }
44% { ಅನುವಾದ: ಕ್ಯಾಲ್ಕ್(var(--kf-elastic-from-X, -50vw) * -0.0463) calc(var(--kf-elastic-from-Y, 0px) * -0.0463); }
59% { ಅನುವಾದಿಸಿ: ಕ್ಯಾಲ್ಕ್(var(--kf-elastic-from-X, -50vw) * 0.0164) calc(var(--kf-elastic-from-Y, 0px) * 0.0164); }
73% { ಅನುವಾದ: ಕ್ಯಾಲ್ಕ್(var(--kf-elastic-from-X, -50vw) * -0.0058) calc(var(--kf-elastic-from-Y, 0px) * -0.0058); }
88% { ಅನುವಾದ: ಕ್ಯಾಲ್ಕ್(var(--kf-elastic-from-X, -50vw) * 0.0020) calc(var(--kf-elastic-from-Y, 0px) * 0.0020); }
100% { ಅನುವಾದ: 0 0; } }
ಒಂದೇ ಕಸ್ಟಮ್ ಆಸ್ತಿಯನ್ನು ಬದಲಾಯಿಸುವ ಮೂಲಕ ನಮ್ಮ ಯೋಜನೆಯಾದ್ಯಂತ ಸುಧಾರಿತ ಕೀಫ್ರೇಮ್ಗಳನ್ನು ಮರುಬಳಕೆ ಮಾಡಲು ಮತ್ತು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಈ ವಿಧಾನವು ಸುಲಭಗೊಳಿಸುತ್ತದೆ.
.ಬೌನ್ಸ್ ಮತ್ತು ಜೂಮ್ { ಅನಿಮೇಷನ್: ಕೆಎಫ್-ಬೌನ್ಸ್ 3ಎಸ್ ಈಸ್-ಇನ್, kf-zoom 3s ರೇಖೀಯ; --kf-zoom-from: 0; }
.ಬೌನ್ಸ್-ಮತ್ತು-ಸ್ಲೈಡ್ { ಅನಿಮೇಷನ್-ಸಂಯೋಜನೆ: ಸೇರಿಸಿ; /* ಎರಡೂ ಅನಿಮೇಷನ್ಗಳು ಅನುವಾದವನ್ನು ಬಳಸುತ್ತವೆ */ ಅನಿಮೇಷನ್: ಕೆಎಫ್-ಬೌನ್ಸ್ 3ಎಸ್ ಈಸ್-ಇನ್, ಕೆಎಫ್-ಸ್ಲೈಡ್-ಇನ್ 3 ಸೆ ಈಸ್-ಔಟ್; --kf-slide-from: -200px; }
.ಎಲಾಸ್ಟಿಕ್-ಇನ್ { ಅನಿಮೇಷನ್: ಕೆಎಫ್-ಎಲಾಸ್ಟಿಕ್-ಇನ್ 2ಎಸ್ ಈಸ್-ಇನ್-ಔಟ್ ಎರಡನ್ನೂ; }
ಅಮಿತ್ ಶೀನ್ ಅವರ ಪೆನ್ ಕೀಫ್ರೇಮ್ಗಳ ಟೋಕನ್ಗಳನ್ನು ನೋಡಿ - ಡೆಮೊ 7 [ಫೋರ್ಕ್ಡ್]. ಈ ಹಂತದವರೆಗೆ, ನಾವು ಕೀಫ್ರೇಮ್ಗಳನ್ನು ಸ್ಮಾರ್ಟ್ ಮತ್ತು ಪರಿಣಾಮಕಾರಿ ರೀತಿಯಲ್ಲಿ ಹೇಗೆ ಕ್ರೋಢೀಕರಿಸಬಹುದು ಎಂಬುದನ್ನು ನಾವು ನೋಡಿದ್ದೇವೆ. ಸಹಜವಾಗಿ, ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ನ ಅಗತ್ಯಗಳಿಗೆ ಉತ್ತಮವಾಗಿ ಹೊಂದಿಕೊಳ್ಳಲು ನೀವು ವಿಷಯಗಳನ್ನು ತಿರುಚಲು ಬಯಸಬಹುದು, ಆದರೆ ನಾವು ಹಲವಾರು ಸಾಮಾನ್ಯ ಅನಿಮೇಷನ್ಗಳು ಮತ್ತು ದೈನಂದಿನ ಬಳಕೆಯ ಪ್ರಕರಣಗಳ ಉದಾಹರಣೆಗಳನ್ನು ಒಳಗೊಂಡಿದ್ದೇವೆ. ಮತ್ತು ಈ ಕೀಫ್ರೇಮ್ಗಳ ಟೋಕನ್ಗಳೊಂದಿಗೆ, ಸಂಪೂರ್ಣ ಯೋಜನೆಯಾದ್ಯಂತ ಸ್ಥಿರವಾದ, ನಿರ್ವಹಿಸಬಹುದಾದ ಅನಿಮೇಷನ್ಗಳನ್ನು ರಚಿಸಲು ನಾವು ಈಗ ಶಕ್ತಿಯುತ ಬಿಲ್ಡಿಂಗ್ ಬ್ಲಾಕ್ಗಳನ್ನು ಹೊಂದಿದ್ದೇವೆ. ಇನ್ನು ನಕಲಿ ಕೀಫ್ರೇಮ್ಗಳಿಲ್ಲ, ಜಾಗತಿಕ ವ್ಯಾಪ್ತಿಯ ಸಂಘರ್ಷಗಳಿಲ್ಲ. ನಮ್ಮ ಎಲ್ಲಾ ಅನಿಮೇಷನ್ ಅಗತ್ಯಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಕೇವಲ ಒಂದು ಕ್ಲೀನ್, ಅನುಕೂಲಕರ ಮಾರ್ಗವಾಗಿದೆ. ಆದರೆ ನಿಜವಾದ ಪ್ರಶ್ನೆಯೆಂದರೆ: ನಾವು ಈ ಬಿಲ್ಡಿಂಗ್ ಬ್ಲಾಕ್ಸ್ ಅನ್ನು ಒಟ್ಟಿಗೆ ಹೇಗೆ ಸಂಯೋಜಿಸುತ್ತೇವೆ? ಎಲ್ಲವನ್ನೂ ಒಟ್ಟಿಗೆ ಸೇರಿಸುವುದು ಮೂಲಭೂತ ಕೀಫ್ರೇಮ್ ಟೋಕನ್ಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು ಸರಳವಾಗಿದೆ ಎಂದು ನಾವು ನೋಡಿದ್ದೇವೆ. ನಮಗೆ ವಿಶೇಷವಾದ ಏನೂ ಅಗತ್ಯವಿಲ್ಲ ಆದರೆ ಮೊದಲ ಅನಿಮೇಷನ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು, ಎರಡನೆಯದನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು, ಅಗತ್ಯವಿರುವಂತೆ ಅಸ್ಥಿರಗಳನ್ನು ಹೊಂದಿಸಿ, ಮತ್ತು ಅದು ಇಲ್ಲಿದೆ. /* ಫೇಡ್ ಇನ್ + ಸ್ಲೈಡ್ ಇನ್ */ .ಟೋಸ್ಟ್ { ಅನಿಮೇಷನ್: ಕೆಎಫ್-ಫೇಡ್-ಇನ್ 0.4ಸೆ, kf-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 0 40px; }
/* ಜೂಮ್ ಇನ್ + ಫೇಡ್ ಇನ್ */ .ಮೋಡಲ್ { ಅನಿಮೇಷನ್: ಕೆಎಫ್-ಫೇಡ್-ಇನ್ 0.3ಸೆ, kf-ಜೂಮ್ 0.3s ಕ್ಯೂಬಿಕ್-ಬೆಜಿಯರ್(0.34, 1.56, 0.64, 1); --kf-zoom-from: 0.7; --kf-zoom-to: 1; }
/* ಸ್ಲೈಡ್ ಇನ್ + ಪಲ್ಸ್ */ .ಅಧಿಸೂಚನೆ { ಅನಿಮೇಷನ್: ಕೆಎಫ್-ಸ್ಲೈಡ್-ಇನ್ 0.5ಸೆ, kf-pulse 1.2s ಈಸ್-ಇನ್-ಔಟ್ ಅನಂತ ಪರ್ಯಾಯ; --kf-slide-from: -100px 0; --ಕೆಎಫ್-ಪಲ್ಸ್-ಸ್ಕೇಲ್-ಇಂದ: 0.95; --ಕೆಎಫ್-ಪಲ್ಸ್-ಸ್ಕೇಲ್-ಟು: 1.05; }
ಈ ಸಂಯೋಜನೆಗಳು ಸುಂದರವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತವೆ ಏಕೆಂದರೆ ಪ್ರತಿಯೊಂದು ಅನಿಮೇಶನ್ ವಿಭಿನ್ನ ಆಸ್ತಿಯನ್ನು ಗುರಿಯಾಗಿಸುತ್ತದೆ: ಅಪಾರದರ್ಶಕತೆ, ರೂಪಾಂತರ (ಅನುವಾದ/ಪ್ರಮಾಣ), ಇತ್ಯಾದಿ. ಆದರೆ ಕೆಲವೊಮ್ಮೆ ಘರ್ಷಣೆಗಳು ಇವೆ, ಮತ್ತು ಅವುಗಳನ್ನು ಏಕೆ ಮತ್ತು ಹೇಗೆ ಎದುರಿಸಬೇಕೆಂದು ನಾವು ತಿಳಿದುಕೊಳ್ಳಬೇಕು. ಎರಡು ಅನಿಮೇಷನ್ಗಳು ಒಂದೇ ಆಸ್ತಿಯನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು ಪ್ರಯತ್ನಿಸಿದಾಗ - ಉದಾಹರಣೆಗೆ, ಅನಿಮೇಟಿಂಗ್ ಸ್ಕೇಲ್ ಅಥವಾ ಎರಡೂ ಅಪಾರದರ್ಶಕತೆ - ಫಲಿತಾಂಶವು ನೀವು ನಿರೀಕ್ಷಿಸಿದಂತೆ ಇರುವುದಿಲ್ಲ. ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಅನಿಮೇಷನ್ಗಳಲ್ಲಿ ಒಂದನ್ನು ಮಾತ್ರ ವಾಸ್ತವವಾಗಿ ಆ ಆಸ್ತಿಗೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ, ಇದು ಅನಿಮೇಷನ್ ಪಟ್ಟಿಯಲ್ಲಿ ಕೊನೆಯದು. ಒಂದೇ ಆಸ್ತಿಯಲ್ಲಿ ಬಹು ಅನಿಮೇಷನ್ಗಳನ್ನು CSS ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದರ ಮಿತಿಯಾಗಿದೆ. ಉದಾಹರಣೆಗೆ, ಇದು ಉದ್ದೇಶಿಸಿದಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ ಏಕೆಂದರೆ ಕೆಎಫ್-ಪಲ್ಸ್ ಅನಿಮೇಷನ್ ಮಾತ್ರ ಅನ್ವಯಿಸುತ್ತದೆ. .bad-combo { ಅನಿಮೇಷನ್: ಕೆಎಫ್-ಜೂಮ್ 0.5 ಸೆ ಮುಂದಕ್ಕೆ, kf-pulse 1.2s ಅನಂತ ಪರ್ಯಾಯ; --kf-zoom-from: 0.5; --kf-zoom-to: 1.2; --ಕೆಎಫ್-ಪಲ್ಸ್-ಸ್ಕೇಲ್-ಇಂದ: 0.8; --kf-pulse-scale-to: 1.1; }
ಅನಿಮೇಷನ್ ಸೇರ್ಪಡೆ ಒಂದೇ ಆಸ್ತಿಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವ ಬಹು ಅನಿಮೇಷನ್ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಸರಳವಾದ ಮತ್ತು ನೇರವಾದ ಮಾರ್ಗವೆಂದರೆ ಅನಿಮೇಷನ್-ಸಂಯೋಜನೆಯ ಆಸ್ತಿಯನ್ನು ಬಳಸುವುದು. ಮೇಲಿನ ಕೊನೆಯ ಉದಾಹರಣೆಯಲ್ಲಿ, kf-pulse animation kf-zoom ಅನಿಮೇಶನ್ ಅನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ, ಆದ್ದರಿಂದ ನಾವು ಆರಂಭಿಕ ಜೂಮ್ ಅನ್ನು ನೋಡುವುದಿಲ್ಲ ಮತ್ತು ನಿರೀಕ್ಷಿತ ಪ್ರಮಾಣವನ್ನು 1.2 ಗೆ ಪಡೆಯುವುದಿಲ್ಲ. ಸೇರಿಸಲು ಅನಿಮೇಷನ್-ಸಂಯೋಜನೆಯನ್ನು ಹೊಂದಿಸುವ ಮೂಲಕ, ಎರಡೂ ಅನಿಮೇಷನ್ಗಳನ್ನು ಸಂಯೋಜಿಸಲು ನಾವು ಬ್ರೌಸರ್ಗೆ ಹೇಳುತ್ತೇವೆ. ಇದು ನಮಗೆ ಬೇಕಾದ ಫಲಿತಾಂಶವನ್ನು ನೀಡುತ್ತದೆ. .ಘಟಕ-ಎರಡು { ಅನಿಮೇಷನ್-ಸಂಯೋಜನೆ: ಸೇರಿಸಿ; }
ಅಮಿತ್ ಶೀನ್ ಅವರ ಪೆನ್ ಕೀಫ್ರೇಮ್ಗಳ ಟೋಕನ್ಗಳನ್ನು ನೋಡಿ - ಡೆಮೊ 8 [ಫೋರ್ಕ್ಡ್]. ನಾವು ಒಂದೇ ಆಸ್ತಿಯ ಮೇಲೆ ಪರಿಣಾಮಗಳನ್ನು ಸಂಯೋಜಿಸಲು ಬಯಸುವ ಹೆಚ್ಚಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ ಈ ವಿಧಾನವು ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ನಾವು ಅನಿಮೇಷನ್ಗಳನ್ನು ಸ್ಥಿರ ಆಸ್ತಿ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಬೇಕಾದಾಗ ಸಹ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ. ಉದಾಹರಣೆಗೆ, ಅನುವಾದ ಆಸ್ತಿಯನ್ನು ನಮಗೆ ಬೇಕಾದ ಸ್ಥಳದಲ್ಲಿ ಇರಿಸಲು ನಾವು ಒಂದು ಅಂಶವನ್ನು ಹೊಂದಿದ್ದರೆ ಮತ್ತು ನಂತರ ನಾವು ಅದನ್ನು kf-ಸ್ಲೈಡ್-ಇನ್ ಕೀಫ್ರೇಮ್ಗಳೊಂದಿಗೆ ಅನಿಮೇಟ್ ಮಾಡಲು ಬಯಸಿದರೆ, ನಾವು ಅನಿಮೇಷನ್-ಸಂಯೋಜನೆಯಿಲ್ಲದೆ ಅಸಹ್ಯ ಗೋಚರ ಜಿಗಿತವನ್ನು ಪಡೆಯುತ್ತೇವೆ. ಅಮಿತ್ ಶೀನ್ ಅವರ ಪೆನ್ ಕೀಫ್ರೇಮ್ಗಳ ಟೋಕನ್ಗಳನ್ನು ನೋಡಿ - ಡೆಮೊ 9 [ಫೋರ್ಕ್ಡ್]. ಸೇರಿಸಲು ಅನಿಮೇಷನ್-ಸಂಯೋಜನೆಯೊಂದಿಗೆ, ಅನಿಮೇಷನ್ ಅನ್ನು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಜೊತೆಗೆ ಸರಾಗವಾಗಿ ಸಂಯೋಜಿಸಲಾಗಿದೆರೂಪಾಂತರ, ಆದ್ದರಿಂದ ಅಂಶವು ಸ್ಥಳದಲ್ಲಿ ಉಳಿಯುತ್ತದೆ ಮತ್ತು ನಿರೀಕ್ಷೆಯಂತೆ ಅನಿಮೇಟ್ ಮಾಡುತ್ತದೆ. ಅನಿಮೇಷನ್ ಸ್ಟಾಗರ್ ಬಹು ಅನಿಮೇಷನ್ಗಳನ್ನು ನಿರ್ವಹಿಸುವ ಇನ್ನೊಂದು ವಿಧಾನವೆಂದರೆ ಅವುಗಳನ್ನು "ತಪ್ಪಳಿಸುವುದು" - ಅಂದರೆ, ಮೊದಲನೆಯದು ಮುಗಿದ ನಂತರ ಎರಡನೇ ಅನಿಮೇಶನ್ ಅನ್ನು ಸ್ವಲ್ಪಮಟ್ಟಿಗೆ ಪ್ರಾರಂಭಿಸಿ. ಇದು ಪ್ರತಿ ಪ್ರಕರಣಕ್ಕೂ ಕೆಲಸ ಮಾಡುವ ಪರಿಹಾರವಲ್ಲ, ಆದರೆ ನಾವು ನಿರಂತರ ಅನಿಮೇಷನ್ ನಂತರ ಪ್ರವೇಶ ಅನಿಮೇಷನ್ ಹೊಂದಿರುವಾಗ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ. /* ಫೇಡ್ ಇನ್ + ಅಪಾರದರ್ಶಕತೆ ಪಲ್ಸ್ */ .ಅಧಿಸೂಚನೆ { ಅನಿಮೇಷನ್: ಕೆಎಫ್-ಫೇಡ್-ಇನ್ 2ಎಸ್ ಈಸ್-ಔಟ್, kf-pulse 0.5s 2s ಈಸ್-ಇನ್-ಔಟ್ ಇನ್ಫೈನೈಟ್ ಆಲ್ಟರ್ನೇಟ್; --kf-pulse-opacity-to: 0.5; }
ಪೆನ್ ಕೀಫ್ರೇಮ್ಸ್ ಟೋಕನ್ಗಳನ್ನು ನೋಡಿ - ಅಮಿತ್ ಶೀನ್ ಅವರಿಂದ ಡೆಮೊ 10 [ಫೋರ್ಕ್ಡ್]. ಆದೇಶದ ವಿಷಯಗಳು ನಾವು ಕೆಲಸ ಮಾಡುವ ಅನಿಮೇಷನ್ಗಳ ಹೆಚ್ಚಿನ ಭಾಗವು ಟ್ರಾನ್ಸ್ಫಾರ್ಮ್ ಆಸ್ತಿಯನ್ನು ಬಳಸುತ್ತದೆ. ಹೆಚ್ಚಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ, ಇದು ಸರಳವಾಗಿ ಹೆಚ್ಚು ಅನುಕೂಲಕರವಾಗಿರುತ್ತದೆ. ರೂಪಾಂತರ ಅನಿಮೇಷನ್ಗಳು GPU-ವೇಗವರ್ಧಿತವಾಗಿರುವುದರಿಂದ ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಪ್ರಯೋಜನವನ್ನು ಸಹ ಹೊಂದಿದೆ. ಆದರೆ ನಾವು ರೂಪಾಂತರಗಳನ್ನು ಬಳಸಿದರೆ, ನಮ್ಮ ರೂಪಾಂತರಗಳನ್ನು ನಾವು ನಿರ್ವಹಿಸುವ ಕ್ರಮವು ಮುಖ್ಯವಾಗಿದೆ ಎಂದು ನಾವು ಒಪ್ಪಿಕೊಳ್ಳಬೇಕು. ಬಹಳಷ್ಟು. ಇಲ್ಲಿಯವರೆಗೆ ನಮ್ಮ ಕೀಫ್ರೇಮ್ಗಳಲ್ಲಿ, ನಾವು ವೈಯಕ್ತಿಕ ರೂಪಾಂತರಗಳನ್ನು ಬಳಸಿದ್ದೇವೆ. ಸ್ಪೆಕ್ಸ್ ಪ್ರಕಾರ, ಇವುಗಳನ್ನು ಯಾವಾಗಲೂ ಸ್ಥಿರ ಕ್ರಮದಲ್ಲಿ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ: ಮೊದಲು, ಅಂಶವು ಭಾಷಾಂತರಗೊಳ್ಳುತ್ತದೆ, ನಂತರ ತಿರುಗಿಸಿ, ನಂತರ ಅಳೆಯಲಾಗುತ್ತದೆ. ಇದು ಅರ್ಥಪೂರ್ಣವಾಗಿದೆ ಮತ್ತು ನಮ್ಮಲ್ಲಿ ಹೆಚ್ಚಿನವರು ಇದನ್ನು ನಿರೀಕ್ಷಿಸುತ್ತಾರೆ. ಆದಾಗ್ಯೂ, ನಾವು ರೂಪಾಂತರದ ಆಸ್ತಿಯನ್ನು ಬಳಸಿದರೆ, ಕಾರ್ಯಗಳನ್ನು ಬರೆಯುವ ಕ್ರಮವು ಅವುಗಳನ್ನು ಅನ್ವಯಿಸುವ ಕ್ರಮವಾಗಿದೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ನಾವು X- ಅಕ್ಷದಲ್ಲಿ ಏನನ್ನಾದರೂ 100 ಪಿಕ್ಸೆಲ್ಗಳನ್ನು ಸರಿಸಿ ನಂತರ ಅದನ್ನು 45 ಡಿಗ್ರಿಗಳಷ್ಟು ತಿರುಗಿಸಿದರೆ, ಅದು ಮೊದಲು ಅದನ್ನು 45 ಡಿಗ್ರಿಗಳಷ್ಟು ತಿರುಗಿಸಿ ನಂತರ 100 ಪಿಕ್ಸೆಲ್ಗಳನ್ನು ಚಲಿಸುವಂತೆಯೇ ಇರುವುದಿಲ್ಲ. /* ಗುಲಾಬಿ ಚೌಕ: ಮೊದಲು ಅನುವಾದಿಸಿ, ನಂತರ ತಿರುಗಿಸಿ */ .ಉದಾಹರಣೆ-ಒಂದು { ರೂಪಾಂತರ: translateX (100px) ತಿರುಗಿಸಿ (45deg); }
/* ಹಸಿರು ಚೌಕ: ಮೊದಲು ತಿರುಗಿಸಿ, ನಂತರ ಅನುವಾದಿಸಿ */ .ಉದಾಹರಣೆ-ಎರಡು { ರೂಪಾಂತರ: ತಿರುಗಿಸಿ (45ಡಿ) ಅನುವಾದX (100px); }
ಪೆನ್ ಕೀಫ್ರೇಮ್ಸ್ ಟೋಕನ್ಗಳನ್ನು ನೋಡಿ - ಅಮಿತ್ ಶೀನ್ ಅವರಿಂದ ಡೆಮೊ 11 [ಫೋರ್ಕ್ಡ್]. ಆದರೆ ರೂಪಾಂತರ ಕ್ರಮದ ಪ್ರಕಾರ, ಎಲ್ಲಾ ವೈಯಕ್ತಿಕ ರೂಪಾಂತರಗಳು - ನಾವು ಕೀಫ್ರೇಮ್ಗಳ ಟೋಕನ್ಗಳಿಗಾಗಿ ಬಳಸಿದ ಎಲ್ಲವೂ - ರೂಪಾಂತರ ಕಾರ್ಯಗಳ ಮೊದಲು ಸಂಭವಿಸುತ್ತದೆ. ಇದರರ್ಥ ನೀವು ರೂಪಾಂತರದ ಆಸ್ತಿಯಲ್ಲಿ ಹೊಂದಿಸಿರುವ ಯಾವುದಾದರೂ ಅನಿಮೇಷನ್ಗಳ ನಂತರ ಸಂಭವಿಸುತ್ತದೆ. ಆದರೆ ನೀವು ಹೊಂದಿಸಿದರೆ, ಉದಾಹರಣೆಗೆ, ಕೆಎಫ್-ಸ್ಪಿನ್ ಕೀಫ್ರೇಮ್ಗಳೊಂದಿಗೆ ಒಟ್ಟಿಗೆ ಅನುವಾದಿಸಿ, ಅನುವಾದವು ಅನಿಮೇಷನ್ಗಿಂತ ಮೊದಲು ಸಂಭವಿಸುತ್ತದೆ. ಇನ್ನೂ ಗೊಂದಲ?! ಸ್ಥಿರ ಮೌಲ್ಯಗಳು ಒಂದೇ ಅನಿಮೇಷನ್ಗೆ ವಿಭಿನ್ನ ಫಲಿತಾಂಶಗಳನ್ನು ಉಂಟುಮಾಡುವ ಸಂದರ್ಭಗಳಿಗೆ ಇದು ಕಾರಣವಾಗುತ್ತದೆ, ಈ ಕೆಳಗಿನ ಪ್ರಕರಣದಂತೆ:
/* ಎರಡೂ ಸ್ಪಿನ್ನರ್ಗಳಿಗೆ ಸಾಮಾನ್ಯ ಅನಿಮೇಷನ್ */ .ಸ್ಪಿನ್ನರ್ { ಅನಿಮೇಷನ್: kf-spin 1s ರೇಖೀಯ ಅನಂತ; }
/* ಪಿಂಕ್ ಸ್ಪಿನ್ನರ್: ತಿರುಗಿಸುವ ಮೊದಲು ಅನುವಾದಿಸಿ (ವೈಯಕ್ತಿಕ ರೂಪಾಂತರ) */ .ಸ್ಪಿನ್ನರ್-ಗುಲಾಬಿ { ಅನುವಾದ: 100% 50%; }
/* ಹಸಿರು ಸ್ಪಿನ್ನರ್: ತಿರುಗಿಸಿ ನಂತರ ಅನುವಾದಿಸಿ (ಕಾರ್ಯ ಕ್ರಮ) */ .ಸ್ಪಿನ್ನರ್-ಹಸಿರು { ರೂಪಾಂತರ: ಅನುವಾದ (100%, 50%); }
ಅಮಿತ್ ಶೀನ್ ಅವರ ಪೆನ್ ಕೀಫ್ರೇಮ್ಗಳ ಟೋಕನ್ಗಳನ್ನು ನೋಡಿ - ಡೆಮೊ 12 [ಫೋರ್ಕ್ಡ್]. ಮೊದಲ ಸ್ಪಿನ್ನರ್ (ಗುಲಾಬಿ) ಕೆಎಫ್-ಸ್ಪಿನ್ ತಿರುಗುವ ಮೊದಲು ಅನುವಾದವನ್ನು ಪಡೆಯುವುದನ್ನು ನೀವು ನೋಡಬಹುದು, ಆದ್ದರಿಂದ ಅದು ಮೊದಲು ಅದರ ಸ್ಥಳಕ್ಕೆ ಚಲಿಸುತ್ತದೆ ಮತ್ತು ನಂತರ ತಿರುಗುತ್ತದೆ. ಎರಡನೇ ಸ್ಪಿನ್ನರ್ (ಹಸಿರು) ವೈಯಕ್ತಿಕ ರೂಪಾಂತರದ ನಂತರ ಸಂಭವಿಸುವ ಭಾಷಾಂತರ () ಕಾರ್ಯವನ್ನು ಪಡೆಯುತ್ತದೆ, ಆದ್ದರಿಂದ ಅಂಶವು ಮೊದಲು ತಿರುಗುತ್ತದೆ, ನಂತರ ಅದರ ಪ್ರಸ್ತುತ ಕೋನಕ್ಕೆ ಹೋಲಿಸಿದರೆ ಚಲಿಸುತ್ತದೆ ಮತ್ತು ನಾವು ವಿಶಾಲ ಕಕ್ಷೆಯ ಪರಿಣಾಮವನ್ನು ಪಡೆಯುತ್ತೇವೆ. ಇಲ್ಲ, ಇದು ದೋಷವಲ್ಲ. ಬಹು ಅನಿಮೇಷನ್ಗಳು ಅಥವಾ ಬಹು ರೂಪಾಂತರಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ ನಾವು CSS ಬಗ್ಗೆ ತಿಳಿದುಕೊಳ್ಳಬೇಕಾದ ಮತ್ತು ನೆನಪಿನಲ್ಲಿಟ್ಟುಕೊಳ್ಳಬೇಕಾದ ವಿಷಯಗಳಲ್ಲಿ ಇದು ಒಂದು. ಅಗತ್ಯವಿದ್ದರೆ, ರೋಟೇಟ್() ಕಾರ್ಯವನ್ನು ಬಳಸಿಕೊಂಡು ಅಂಶಗಳನ್ನು ತಿರುಗಿಸುವ ಹೆಚ್ಚುವರಿ kf-spin-alt ಕೀಫ್ರೇಮ್ಗಳನ್ನು ಸಹ ನೀವು ರಚಿಸಬಹುದು. ಕಡಿಮೆಯಾದ ಚಲನೆ ಮತ್ತು ನಾವು ಪರ್ಯಾಯ ಕೀಫ್ರೇಮ್ಗಳ ಕುರಿತು ಮಾತನಾಡುತ್ತಿರುವಾಗ, "ಅನಿಮೇಷನ್ ಇಲ್ಲ" ಆಯ್ಕೆಯನ್ನು ನಾವು ನಿರ್ಲಕ್ಷಿಸಲಾಗುವುದಿಲ್ಲ. ಕೀಫ್ರೇಮ್ಗಳ ಟೋಕನ್ಗಳನ್ನು ಬಳಸುವ ಒಂದು ದೊಡ್ಡ ಪ್ರಯೋಜನವೆಂದರೆ ಪ್ರವೇಶಿಸುವಿಕೆಯನ್ನು ಬೇಯಿಸಬಹುದು ಮತ್ತು ಅದನ್ನು ಮಾಡಲು ತುಂಬಾ ಸುಲಭ. ಪ್ರವೇಶಿಸುವಿಕೆಯನ್ನು ಗಮನದಲ್ಲಿಟ್ಟುಕೊಂಡು ನಮ್ಮ ಕೀಫ್ರೇಮ್ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವ ಮೂಲಕ, ಕಡಿಮೆ ಚಲನೆಯನ್ನು ಆದ್ಯತೆ ನೀಡುವ ಬಳಕೆದಾರರು ಹೆಚ್ಚುವರಿ ಕೆಲಸ ಅಥವಾ ಕೋಡ್ ನಕಲು ಇಲ್ಲದೆ ಸುಗಮ, ಕಡಿಮೆ ಗಮನ ಸೆಳೆಯುವ ಅನುಭವವನ್ನು ಪಡೆಯುತ್ತಾರೆ ಎಂದು ನಾವು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು. "ಕಡಿಮೆಗೊಳಿಸಿದ ಚಲನೆ" ಯ ನಿಖರವಾದ ಅರ್ಥವು ಒಂದು ಅನಿಮೇಷನ್ನಿಂದ ಇನ್ನೊಂದಕ್ಕೆ ಮತ್ತು ಪ್ರಾಜೆಕ್ಟ್ನಿಂದ ಪ್ರಾಜೆಕ್ಟ್ಗೆ ಸ್ವಲ್ಪ ಬದಲಾಗಬಹುದು, ಆದರೆ ಇಲ್ಲಿ ಕೆಲವು ಪ್ರಮುಖ ಅಂಶಗಳನ್ನು ನೆನಪಿನಲ್ಲಿಟ್ಟುಕೊಳ್ಳಬೇಕು: ಕೀಫ್ರೇಮ್ಗಳನ್ನು ಮ್ಯೂಟ್ ಮಾಡಲಾಗುತ್ತಿದೆ ಕೆಲವು ಅನಿಮೇಷನ್ಗಳನ್ನು ಮೃದುಗೊಳಿಸಬಹುದು ಅಥವಾ ನಿಧಾನಗೊಳಿಸಬಹುದು, ಕಡಿಮೆ ಚಲನೆಯನ್ನು ವಿನಂತಿಸಿದಾಗ ಇತರವುಗಳು ಸಂಪೂರ್ಣವಾಗಿ ಕಣ್ಮರೆಯಾಗುತ್ತವೆ. ಪಲ್ಸ್ ಅನಿಮೇಷನ್ಗಳು ಉತ್ತಮ ಉದಾಹರಣೆಯಾಗಿದೆ. ಈ ಅನಿಮೇಷನ್ಗಳು ಕಡಿಮೆ ಮೋಷನ್ ಮೋಡ್ನಲ್ಲಿ ರನ್ ಆಗುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ನಾವು ಅವುಗಳನ್ನು ಸೂಕ್ತವಾದ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಯಲ್ಲಿ ಸುತ್ತಿಕೊಳ್ಳಬಹುದು.
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-pulse { { ನಿಂದ ಪ್ರಮಾಣದ: var (--kf-pulse-scale-from, 1); ಅಪಾರದರ್ಶಕತೆ: var (--kf-pulse-opacity-from, 1); } ಗೆ { ಪ್ರಮಾಣದ: var (--kf-pulse-scale-to, 1); ಅಪಾರದರ್ಶಕತೆ:var (--kf-pulse-opacity-to, 1); } } }
ಕಡಿಮೆ ಮಾಡಲು ಆದ್ಯತೆ-ಕಡಿಮೆ-ಚಲನೆಯನ್ನು ಹೊಂದಿಸಿರುವ ಬಳಕೆದಾರರು ಅನಿಮೇಷನ್ ಅನ್ನು ನೋಡುವುದಿಲ್ಲ ಮತ್ತು ಅವರ ಆದ್ಯತೆಗೆ ಹೊಂದಿಕೆಯಾಗುವ ಅನುಭವವನ್ನು ಪಡೆಯುತ್ತಾರೆ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಇನ್ಸ್ಟೆಂಟ್ ಇನ್ ಪ್ರವೇಶ ಅನಿಮೇಷನ್ಗಳಂತಹ ಕೆಲವು ಕೀಫ್ರೇಮ್ಗಳನ್ನು ನಾವು ಸರಳವಾಗಿ ತೆಗೆದುಹಾಕಲು ಸಾಧ್ಯವಿಲ್ಲ. ಮೌಲ್ಯ ಬದಲಾಗಬೇಕು, ಅನಿಮೇಟ್ ಆಗಬೇಕು; ಇಲ್ಲದಿದ್ದರೆ, ಅಂಶವು ಸರಿಯಾದ ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿರುವುದಿಲ್ಲ. ಆದರೆ ಕಡಿಮೆ ಚಲನೆಯಲ್ಲಿ, ಆರಂಭಿಕ ಮೌಲ್ಯದಿಂದ ಈ ಪರಿವರ್ತನೆಯು ತ್ವರಿತವಾಗಿರಬೇಕು. ಇದನ್ನು ಸಾಧಿಸಲು, ಮೌಲ್ಯವು ತಕ್ಷಣವೇ ಅಂತಿಮ ಸ್ಥಿತಿಗೆ ಜಿಗಿಯುವ ಕೀಫ್ರೇಮ್ಗಳ ಹೆಚ್ಚುವರಿ ಸೆಟ್ ಅನ್ನು ನಾವು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ. ಇವು ನಮ್ಮ ಡೀಫಾಲ್ಟ್ ಕೀಫ್ರೇಮ್ಗಳಾಗುತ್ತವೆ. ನಂತರ, ನಾವು ಹಿಂದಿನ ಉದಾಹರಣೆಯಲ್ಲಿರುವಂತೆಯೇ ಆದ್ಯತೆ-ಕಡಿಮೆ-ಚಲನೆಯನ್ನು ಯಾವುದೇ ಆದ್ಯತೆಗೆ ಹೊಂದಿಸಲು ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಯೊಳಗೆ ಸಾಮಾನ್ಯ ಕೀಫ್ರೇಮ್ಗಳನ್ನು ಸೇರಿಸುತ್ತೇವೆ. /* ಕಡಿಮೆ ಚಲನೆಗಾಗಿ ತಕ್ಷಣ ಪಾಪ್ ಇನ್ */ @keyframes kf-zoom { ನಿಂದ, {ಗೆ ಪ್ರಮಾಣ: var (--kf-zoom-to, 1); } }
@media (prefers-reduced-motion: no-preference) { /* ಮೂಲ ಜೂಮ್ ಕೀಫ್ರೇಮ್ಗಳು */ @keyframes kf-zoom { { ನಿಂದ ಪ್ರಮಾಣ: var (--kf-zoom-from, 0.8); } ಗೆ { ಪ್ರಮಾಣ: var (--kf-zoom-to, 1); } } }
ಈ ರೀತಿಯಾಗಿ, ಕಡಿಮೆ ಚಲನೆಗೆ ಆದ್ಯತೆ ನೀಡುವ ಬಳಕೆದಾರರು ಅಂಶವು ಅದರ ಅಂತಿಮ ಸ್ಥಿತಿಯಲ್ಲಿ ತಕ್ಷಣವೇ ಕಾಣಿಸಿಕೊಳ್ಳುವುದನ್ನು ನೋಡುತ್ತಾರೆ, ಆದರೆ ಎಲ್ಲರೂ ಅನಿಮೇಟೆಡ್ ಪರಿವರ್ತನೆಯನ್ನು ಪಡೆಯುತ್ತಾರೆ. ಸಾಫ್ಟ್ ಅಪ್ರೋಚ್ ನಾವು ಕೆಲವು ಚಲನೆಯನ್ನು ಇರಿಸಿಕೊಳ್ಳಲು ಬಯಸುವ ಸಂದರ್ಭಗಳಿವೆ, ಆದರೆ ಮೂಲ ಅನಿಮೇಷನ್ಗಿಂತ ಹೆಚ್ಚು ಮೃದು ಮತ್ತು ಶಾಂತವಾಗಿರುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ನಾವು ಬೌನ್ಸ್ ಪ್ರವೇಶವನ್ನು ಸೌಮ್ಯವಾದ ಫೇಡ್-ಇನ್ನೊಂದಿಗೆ ಬದಲಾಯಿಸಬಹುದು.
@keyframes kf-ಬೌನ್ಸ್ { /* ಕಡಿಮೆ ಚಲನೆಗಾಗಿ ಸಾಫ್ಟ್ ಫೇಡ್-ಇನ್ */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-ಬೌನ್ಸ್ { /* ಮೂಲ ಬೌನ್ಸ್ ಕೀಫ್ರೇಮ್ಗಳು */ } }
ಈಗ, ಕಡಿಮೆ ಚಲನೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿದ ಬಳಕೆದಾರರು ಇನ್ನೂ ಗೋಚರಿಸುವಿಕೆಯ ಅರ್ಥವನ್ನು ಪಡೆಯುತ್ತಾರೆ, ಆದರೆ ಬೌನ್ಸ್ ಅಥವಾ ಎಲಾಸ್ಟಿಕ್ ಅನಿಮೇಷನ್ನ ತೀವ್ರವಾದ ಚಲನೆಯಿಲ್ಲದೆ. ಬಿಲ್ಡಿಂಗ್ ಬ್ಲಾಕ್ಸ್ ಸ್ಥಳದಲ್ಲಿರುವುದರೊಂದಿಗೆ, ಅವುಗಳನ್ನು ನಿಜವಾದ ಕೆಲಸದ ಹರಿವಿನ ಭಾಗವಾಗಿ ಮಾಡುವುದು ಹೇಗೆ ಎಂಬುದು ಮುಂದಿನ ಪ್ರಶ್ನೆಯಾಗಿದೆ. ಹೊಂದಿಕೊಳ್ಳುವ ಕೀಫ್ರೇಮ್ಗಳನ್ನು ಬರೆಯುವುದು ಒಂದು ವಿಷಯವಾಗಿದೆ, ಆದರೆ ದೊಡ್ಡ ಯೋಜನೆಯಲ್ಲಿ ಅವುಗಳನ್ನು ವಿಶ್ವಾಸಾರ್ಹವಾಗಿಸಲು ನಾನು ಕಠಿಣ ಮಾರ್ಗವನ್ನು ಕಲಿಯಬೇಕಾದ ಕೆಲವು ತಂತ್ರಗಳ ಅಗತ್ಯವಿದೆ. ಅನುಷ್ಠಾನ ತಂತ್ರಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಒಮ್ಮೆ ನಾವು ಕೀಫ್ರೇಮ್ಗಳ ಟೋಕನ್ಗಳ ಘನ ಗ್ರಂಥಾಲಯವನ್ನು ಹೊಂದಿದ್ದರೆ, ಅವುಗಳನ್ನು ದೈನಂದಿನ ಕೆಲಸದಲ್ಲಿ ಹೇಗೆ ತರುವುದು ಎಂಬುದು ನಿಜವಾದ ಸವಾಲು.
ಎಲ್ಲಾ ಕೀಫ್ರೇಮ್ಗಳನ್ನು ಒಂದೇ ಬಾರಿಗೆ ಬಿಡುವುದು ಮತ್ತು ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಲಾಗಿದೆ ಎಂದು ಘೋಷಿಸುವುದು ಪ್ರಲೋಭನೆಯಾಗಿದೆ, ಆದರೆ ಪ್ರಾಯೋಗಿಕವಾಗಿ ನಾನು ಉತ್ತಮ ಫಲಿತಾಂಶಗಳನ್ನು ಕ್ರಮೇಣ ಅಳವಡಿಸಿಕೊಳ್ಳುವುದರಿಂದ ಬಂದಿದೆ ಎಂದು ಕಂಡುಕೊಂಡಿದ್ದೇನೆ. ಫೇಡ್ ಅಥವಾ ಸ್ಲೈಡ್ನಂತಹ ಸಾಮಾನ್ಯ ಅನಿಮೇಷನ್ಗಳೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಿ. ಇವುಗಳು ಸುಲಭವಾದ ಗೆಲುವುಗಳಾಗಿದ್ದು, ದೊಡ್ಡ ಮರುಬರಹಗಳ ಅಗತ್ಯವಿಲ್ಲದೆ ತಕ್ಷಣದ ಮೌಲ್ಯವನ್ನು ತೋರಿಸುತ್ತವೆ. ನಾಮಕರಣವು ಗಮನಕ್ಕೆ ಅರ್ಹವಾದ ಮತ್ತೊಂದು ಅಂಶವಾಗಿದೆ. ಸ್ಥಿರವಾದ ಪೂರ್ವಪ್ರತ್ಯಯ ಅಥವಾ ನೇಮ್ಸ್ಪೇಸ್ ಯಾವ ಅನಿಮೇಷನ್ಗಳು ಟೋಕನ್ಗಳು ಮತ್ತು ಸ್ಥಳೀಯ ಒನ್-ಆಫ್ಗಳು ಎಂಬುದನ್ನು ಸ್ಪಷ್ಟಪಡಿಸುತ್ತದೆ. ಇದು ಆಕಸ್ಮಿಕ ಘರ್ಷಣೆಯನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ಹೊಸ ತಂಡದ ಸದಸ್ಯರು ಹಂಚಿದ ವ್ಯವಸ್ಥೆಯನ್ನು ಒಂದು ನೋಟದಲ್ಲಿ ಗುರುತಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಡಾಕ್ಯುಮೆಂಟೇಶನ್ ಕೋಡ್ನಷ್ಟೇ ಮುಖ್ಯವಾಗಿದೆ. ಪ್ರತಿ ಕೀಫ್ರೇಮ್ಗಳ ಟೋಕನ್ನ ಮೇಲಿರುವ ಒಂದು ಚಿಕ್ಕ ಕಾಮೆಂಟ್ ಕೂಡ ನಂತರದ ಊಹೆಯ ಸಮಯವನ್ನು ಉಳಿಸಬಹುದು. ಡೆವಲಪರ್ಗೆ ಟೋಕನ್ಗಳ ಫೈಲ್ ತೆರೆಯಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ, ಅವರಿಗೆ ಅಗತ್ಯವಿರುವ ಪರಿಣಾಮಕ್ಕಾಗಿ ಸ್ಕ್ಯಾನ್ ಮಾಡಿ ಮತ್ತು ಬಳಕೆಯ ಮಾದರಿಯನ್ನು ನೇರವಾಗಿ ಅವರ ಘಟಕಕ್ಕೆ ನಕಲಿಸಬೇಕು. ನಮ್ಯತೆಯು ಈ ವಿಧಾನವನ್ನು ಪ್ರಯತ್ನಕ್ಕೆ ಯೋಗ್ಯವಾಗಿಸುತ್ತದೆ. ಸಂವೇದನಾಶೀಲ ಕಸ್ಟಮ್ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಹಿರಂಗಪಡಿಸುವ ಮೂಲಕ, ಸಿಸ್ಟಮ್ ಅನ್ನು ಮುರಿಯದೆಯೇ ಅನಿಮೇಷನ್ ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಲು ನಾವು ತಂಡಗಳಿಗೆ ಸ್ಥಳಾವಕಾಶವನ್ನು ನೀಡುತ್ತೇವೆ. ಅದೇ ಸಮಯದಲ್ಲಿ, ಅತಿಯಾಗಿ ಸಂಕೀರ್ಣಗೊಳಿಸದಿರಲು ಪ್ರಯತ್ನಿಸಿ. ಮುಖ್ಯವಾದ ಗುಬ್ಬಿಗಳನ್ನು ಒದಗಿಸಿ ಮತ್ತು ಉಳಿದವುಗಳನ್ನು ಅಭಿಪ್ರಾಯದಂತೆ ಇರಿಸಿಕೊಳ್ಳಿ. ಅಂತಿಮವಾಗಿ, ಪ್ರವೇಶವನ್ನು ನೆನಪಿಡಿ. ಪ್ರತಿ ಅನಿಮೇಷನ್ಗೆ ಕಡಿಮೆ ಚಲನೆಯ ಪರ್ಯಾಯ ಅಗತ್ಯವಿಲ್ಲ, ಆದರೆ ಅನೇಕರು ಹಾಗೆ ಮಾಡುತ್ತಾರೆ. ಈ ಹೊಂದಾಣಿಕೆಗಳನ್ನು ಮೊದಲೇ ಬೇಯಿಸುವುದು ಎಂದರೆ ನಾವು ನಂತರ ಅವುಗಳನ್ನು ಎಂದಿಗೂ ಮರುಹೊಂದಿಸಬೇಕಾಗಿಲ್ಲ ಮತ್ತು ನಮ್ಮ ಬಳಕೆದಾರರು ಅದನ್ನು ಎಂದಿಗೂ ಉಲ್ಲೇಖಿಸದಿದ್ದರೂ ಸಹ ಗಮನಿಸುವ ಕಾಳಜಿಯ ಮಟ್ಟವನ್ನು ಇದು ತೋರಿಸುತ್ತದೆ.
ನನ್ನ ಅನುಭವದಲ್ಲಿ, ನಮ್ಮ ವಿನ್ಯಾಸ ಟೋಕನ್ಗಳ ಕೆಲಸದ ಹರಿವಿನ ಭಾಗವಾಗಿ ಕೀಫ್ರೇಮ್ಗಳ ಟೋಕನ್ಗಳನ್ನು ಪರಿಗಣಿಸುವುದು ಅವುಗಳನ್ನು ಅಂಟಿಕೊಳ್ಳುವಂತೆ ಮಾಡುತ್ತದೆ. ಒಮ್ಮೆ ಅವು ಸ್ಥಳದಲ್ಲಿದ್ದರೆ, ಅವರು ವಿಶೇಷ ಪರಿಣಾಮಗಳಂತೆ ಭಾವಿಸುವುದನ್ನು ನಿಲ್ಲಿಸುತ್ತಾರೆ ಮತ್ತು ವಿನ್ಯಾಸ ಭಾಷೆಯ ಭಾಗವಾಗುತ್ತಾರೆ, ಉತ್ಪನ್ನವು ಹೇಗೆ ಚಲಿಸುತ್ತದೆ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ ಎಂಬುದರ ನೈಸರ್ಗಿಕ ವಿಸ್ತರಣೆಯಾಗಿದೆ. ಸುತ್ತುವುದು ಅನಿಮೇಷನ್ಗಳು ಇಂಟರ್ಫೇಸ್ಗಳನ್ನು ನಿರ್ಮಿಸುವ ಅತ್ಯಂತ ಸಂತೋಷದಾಯಕ ಭಾಗಗಳಲ್ಲಿ ಒಂದಾಗಿರಬಹುದು, ಆದರೆ ರಚನೆಯಿಲ್ಲದೆ, ಅವು ಹತಾಶೆಯ ದೊಡ್ಡ ಮೂಲಗಳಲ್ಲಿ ಒಂದಾಗಬಹುದು. ಕೀಫ್ರೇಮ್ಗಳನ್ನು ಟೋಕನ್ಗಳಾಗಿ ಪರಿಗಣಿಸುವ ಮೂಲಕ, ನೀವು ಸಾಮಾನ್ಯವಾಗಿ ಗೊಂದಲಮಯವಾಗಿರುವ ಮತ್ತು ನಿರ್ವಹಿಸಲು ಕಷ್ಟಕರವಾದದ್ದನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತೀರಿ ಮತ್ತು ಅದನ್ನು ಸ್ಪಷ್ಟವಾದ, ಊಹಿಸಬಹುದಾದ ವ್ಯವಸ್ಥೆಯಾಗಿ ಪರಿವರ್ತಿಸುತ್ತೀರಿ. ನಿಜವಾದ ಮೌಲ್ಯವು ಕೋಡ್ನ ಕೆಲವು ಸಾಲುಗಳನ್ನು ಉಳಿಸುವಲ್ಲಿ ಮಾತ್ರವಲ್ಲ. ನೀವು ಫೇಡ್, ಸ್ಲೈಡ್, ಝೂಮ್ ಅಥವಾ ಸ್ಪಿನ್ ಅನ್ನು ಬಳಸಿದಾಗ ಅದು ಯೋಜನೆಯಾದ್ಯಂತ ಹೇಗೆ ವರ್ತಿಸುತ್ತದೆ ಎಂದು ನಿಮಗೆ ತಿಳಿದಿರುತ್ತದೆ ಎಂಬ ವಿಶ್ವಾಸದಲ್ಲಿದೆ. ಇದು ಅಂತ್ಯವಿಲ್ಲದ ವ್ಯತ್ಯಾಸಗಳ ಗೊಂದಲವಿಲ್ಲದೆಯೇ ಕಸ್ಟಮ್ ಗುಣಲಕ್ಷಣಗಳಿಂದ ಬರುವ ನಮ್ಯತೆಯಲ್ಲಿದೆ. ಮತ್ತು ಅದನ್ನು ಸೇರಿಸುವ ಬದಲು ಅಡಿಪಾಯದಲ್ಲಿ ನಿರ್ಮಿಸಲಾದ ಪ್ರವೇಶಿಸುವಿಕೆಯಲ್ಲಿದೆಒಂದು ನಂತರದ ಆಲೋಚನೆ. ಈ ಆಲೋಚನೆಗಳು ವಿಭಿನ್ನ ತಂಡಗಳು ಮತ್ತು ವಿಭಿನ್ನ ಕೋಡ್ಬೇಸ್ಗಳಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದನ್ನು ನಾನು ನೋಡಿದ್ದೇನೆ ಮತ್ತು ಮಾದರಿಯು ಯಾವಾಗಲೂ ಒಂದೇ ಆಗಿರುತ್ತದೆ. ಟೋಕನ್ಗಳು ಸ್ಥಳದಲ್ಲಿ ಒಮ್ಮೆ, ಕೀಫ್ರೇಮ್ಗಳು ಚದುರಿದ ತಂತ್ರಗಳ ಸಂಗ್ರಹವಾಗುವುದನ್ನು ನಿಲ್ಲಿಸುತ್ತವೆ ಮತ್ತು ವಿನ್ಯಾಸ ಭಾಷೆಯ ಭಾಗವಾಗುತ್ತವೆ. ಅವರು ಉತ್ಪನ್ನವನ್ನು ಹೆಚ್ಚು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ, ಹೆಚ್ಚು ಸ್ಥಿರವಾಗಿ ಮತ್ತು ಹೆಚ್ಚು ಜೀವಂತವಾಗಿರುವಂತೆ ಮಾಡುತ್ತಾರೆ. ಈ ಲೇಖನದಿಂದ ನೀವು ಒಂದು ವಿಷಯವನ್ನು ತೆಗೆದುಕೊಂಡರೆ, ಅದು ಹೀಗಿರಲಿ: ಅನಿಮೇಷನ್ಗಳು ನಾವು ಈಗಾಗಲೇ ಬಣ್ಣಗಳು, ಮುದ್ರಣಕಲೆ ಮತ್ತು ಅಂತರಕ್ಕೆ ನೀಡುವ ಅದೇ ಕಾಳಜಿ ಮತ್ತು ರಚನೆಗೆ ಅರ್ಹವಾಗಿವೆ. ಕೀಫ್ರೇಮ್ಗಳ ಟೋಕನ್ಗಳಲ್ಲಿನ ಸಣ್ಣ ಹೂಡಿಕೆಯು ನಿಮ್ಮ ಇಂಟರ್ಫೇಸ್ ಚಲಿಸಿದಾಗಲೆಲ್ಲಾ ಪಾವತಿಸುತ್ತದೆ.
