ಉಚಿತ ನಾಣ್ಯ ಟಾಸ್ ಮತ್ತು ಸ್ಪಿನ್ ವೀಲ್

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಎಲ್ಲಾ ಮೂರು ಮೋಡ್‌ಗಳು — ನಾಣ್ಯ ಎಸೆತ, ಸ್ಪಿನ್ ವೀಲ್, ಮತ್ತು ಆಯ್ಕೆ ಆರಿಸುವಿಕೆ — ಬ್ರೌಸರ್‌ನ ಅಂತರ್ನಿರ್ಮಿತ Web Crypto API (crypto.getRandomValues) ಬಳಸಿ ಗೆಲುವಿನ ಫಲಿತಾಂಶವನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ, ನಂತರ CSS ಟ್ರಾನ್ಸ್‌ಫಾರ್ಮ್‌ಗಳು ಮತ್ತು requestAnimationFrame ಜೊತೆ ಸಂಪೂರ್ಣವಾಗಿ ಕ್ಲೈಂಟ್-ಸೈಡ್‌ನಲ್ಲಿ ಆನಿಮೇಶನ್ ನಡೆಸುತ್ತದೆ. ಯಾವುದೇ ಹಂತದಲ್ಲಿ ಸರ್ವರ್ ಒಳಗೊಂಡಿಲ್ಲ.

1. 1
   Web Crypto ಗೆಲುವಿನವರನ್ನು ಆರಿಸುತ್ತದೆ

   ಯಾವುದೇ ಆನಿಮೇಶನ್ ಪ್ರಾರಂಭವಾಗುವ ಮೊದಲು, crypto.getRandomValues Uint32Array ಅನ್ನು ಕ್ರಿಪ್ಟೋಗ್ರಾಫಿಕಲಿ ಯಾದೃಚ್ಛಿಕ 32-ಬಿಟ್ ಪೂರ್ಣಾಂಕದೊಂದಿಗೆ ತುಂಬಿಸುತ್ತದೆ. ಮಾಡ್ಯುಲೋ ಕಾರ್ಯಾಚರಣೆ ಅದನ್ನು ಆಯ್ಕೆಗಳ ಸಂಖ್ಯೆಗೆ ಮ್ಯಾಪ್ ಮಾಡುತ್ತದೆ (ಹೆಡ್ಸ್/ಟೇಲ್ಸ್‌ಗೆ 2, ವೀಲ್ ಅಥವಾ ಆಯ್ಕೆಗಾರನಿಗೆ N), ಆದ್ದರಿಂದ ಪ್ರತಿ ಫಲಿತಾಂಶಕ್ಕೆ ನಿಖರವಾಗಿ ಸಮಾನ ಸಂಭವನೀಯತೆ ಇರುತ್ತದೆ.
2. 2
   ಫಲಿತಾಂಶದ ಮೇಲೆ ಇಳಿಯಲು ತಿರುಗುವಿಕೆ ಕೋನವನ್ನು ಲೆಕ್ಕಹಾಕಲಾಗುತ್ತದೆ

   ನಾಣ್ಯಕ್ಕಾಗಿ, ಕೋಡ್ ಸರಿಯಾದ ಮುಖ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಕೊನೆಗೊಳ್ಳುವ ಕಡಿಮೆ ಹೆಚ್ಚುವರಿ ತಿರುಗುವಿಕೆಯನ್ನು (ಪ್ರಸ್ತುತ ಸಂಚಿತ ಕೋನದ ಮೇಲೆ) ಲೆಕ್ಕಹಾಕುತ್ತದೆ — ಹೆಡ್ಸ್ 0° ನಲ್ಲಿ, ಟೇಲ್ಸ್ 180° ನಲ್ಲಿ — ನಂತರ ನಿಜವಾದ ಉರುಳುವಿಕೆಯಂತೆ ಕಾಣಲು 5 ಪೂರ್ಣ ಸುತ್ತುಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ. ವೀಲ್ ಅದೇ ಮಾಡುತ್ತದೆ: ಗೆಲುವಿನ ಸ್ಲೈಸ್ ಅನ್ನು ಪಾಯಿಂಟರ್ ಕೆಳಗೆ ತರುವ ಕೋನೀಯ ಆಫ್‌ಸೆಟ್ ಕಂಡುಹಿಡಿಯುತ್ತದೆ, 6 ಪೂರ್ಣ ಸುತ್ತುಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ, ಮತ್ತು ಪಾಯಿಂಟರ್ ಯಾವಾಗಲೂ ಸ್ಲೈಸ್‌ನ ಮಧ್ಯದಲ್ಲೇ ನಿಲ್ಲದಂತೆ ಸಣ್ಣ ಯಾದೃಚ್ಛಿಕ ಜಿಟರ್ ಅನ್ವಯಿಸುತ್ತದೆ.
3. 3
   CSS ಪರಿವರ್ತನೆಗಳು ಮತ್ತು requestAnimationFrame ಆನಿಮೇಶನ್ ನಡೆಸುತ್ತವೆ

   ನಾಣ್ಯ ಮತ್ತು ವೀಲ್ ಒಂದೇ ಸಂಚಿತ ತಿರುಗುವಿಕೆ ಮೌಲ್ಯಕ್ಕೆ ಅನ್ವಯಿಸಲಾದ cubic-bezier ಈಸಿಂಗ್ ಕರ್ವ್‌ನೊಂದಿಗೆ CSS transform ಮೂಲಕ ಆನಿಮೇಟ್ ಆಗುತ್ತವೆ — ಕೋನ ಒಮ್ಮೆ ಹೊಂದಿಸಿದ ನಂತರ ಪ್ರತಿ-ಫ್ರೇಮ್ JavaScript ಅಗತ್ಯವಿಲ್ಲ. ಆಯ್ಕೆ ಆರಿಸುವಿಕೆ ಬದಲಿಗೆ requestAnimationFrame ಬಳಸುತ್ತದೆ: ಪ್ರತಿ ಫ್ರೇಮ್‌ನಲ್ಲಿ, ಚತುರ್ಭುಜವಾಗಿ ಬೆಳೆಯುವ ಮಧ್ಯಂತರ ಹೈಲೈಟ್ ಮುಂದುವರಿಸಬೇಕೆ ಎಂದು ನಿರ್ಧರಿಸುತ್ತದೆ, ಯಾವಾಗಲೂ ಮೊದಲೇ-ನಿರ್ಧರಿಸಿದ ಗೆಲುವಿನವರ ಮೇಲೆ ನಿಲ್ಲುವ ಸ್ಲಾಟ್-ಮೆಷಿನ್ ಡಿಸಲರೇಶನ್ ಉತ್ಪಾದಿಸುತ್ತದೆ.
4. 4
   ಫಲಿತಾಂಶವನ್ನು ಬಹಿರಂಗಪಡಿಸಿ ಸೆಷನ್ ಇತಿಹಾಸಕ್ಕೆ ದಾಖಲಿಸಲಾಗಿದೆ

   ಆನಿಮೇಶನ್ ಪೂರ್ಣಗೊಂಡಾಗ setTimeout ಪ್ರಚೋದಿಸುತ್ತದೆ (ನಾಣ್ಯಕ್ಕೆ 1.3 ಸೆ, ವೀಲ್‌ಗೆ 4.3 ಸೆ) ಮತ್ತು ಫಲಿತಾಂಶವನ್ನು ಸ್ಥಿತಿಗೆ ಬರೆಯುತ್ತದೆ. ನಾಣ್ಯ ಮೋಡ್ ಹೆಡ್ಸ್/ಟೇಲ್ಸ್ ಎಣಿಕೆಗಳೊಂದಿಗೆ 24 ಎಸೆತಗಳವರೆಗಿನ ನಡೆಯುತ್ತಿರುವ ಸೆಷನ್ ಇತಿಹಾಸವನ್ನು ಇಟ್ಟುಕೊಳ್ಳುತ್ತದೆ. prefers-reduced-motion ಸಕ್ರಿಯಗೊಳಿಸಿದ ಬಳಕೆದಾರರು ಆನಿಮೇಶನ್ ಸಂಪೂರ್ಣವಾಗಿ ಬಿಟ್ಟುಬಿಟ್ಟು ತಕ್ಷಣ ಫಲಿತಾಂಶ ನೋಡುತ್ತಾರೆ.

ಸಂಬಂಧಿತ ಪರಿಕರಗಳು