CSS ಕ್ಯೂಬಿಕ್ ಬೆಜಿಯರ್ ಜನರೇಟರ್

CSS ಕ್ಯೂಬಿಕ್ ಬೆಜಿಯರ್ ಜನರೇಟರ್ ಕಾರ್ಯನಿರ್ವಹಣೆ

CSS ಕ್ಯೂಬಿಕ್ ಬೆಜಿಯರ್ ಜನರೇಟರ್ ವೆಬ್ ಅನಿಮೇಷನ್‌ಗಳು ಮತ್ತು ಟ್ರಾನ್ಸಿಶನ್‌ಗಳಿಗಾಗಿ ಕಸ್ಟಮ್ ಈಸಿಂಗ್ ಕರ್ವ್‌ಗಳನ್ನು (easing curves) ದೃಶ್ಯ ರೂಪದಲ್ಲಿ ವಿನ್ಯಾಸಗೊಳಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಈ ಉಪಕರಣದಲ್ಲಿ ಎರಡು ನಿಯಂತ್ರಣ ಬಿಂದುಗಳನ್ನು (control points) ಎಳೆಯುವ ಮೂಲಕ ನೀವು ಈಸಿಂಗ್ ಕರ್ವ್‌ನ ಆಕಾರವನ್ನು ಬದಲಾಯಿಸಬಹುದು. ನೀವು ಕರ್ವ್ ಅನ್ನು ಸರಿಹೊಂದಿಸುತ್ತಿದ್ದಂತೆ, ಅದರ ಮೇಲೊಂದು ಡಾಟ್ ಚಲಿಸುತ್ತದೆ. ಇದರ ಪಕ್ಕದಲ್ಲೇ ಸ್ಥಿರ ವೇಗದಲ್ಲಿ ಚಲಿಸುವ ಮತ್ತೊಂದು ಡಾಟ್ ಇರುತ್ತದೆ. ಈ ಎರಡೂ ಚಲನೆಗಳನ್ನು ಪರಸ್ಪರ ಹೋಲಿಸಿ ನೋಡುವ ಮೂಲಕ ಈಸಿಂಗ್ ಪರಿಣಾಮವನ್ನು ಸುಲಭವಾಗಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬಹುದು. ಅಂತಿಮವಾಗಿ, ಈ ಉಪಕರಣವು ನಿಮ್ಮ ಕರ್ವ್‌ಗೆ ಸೂಕ್ತವಾದ cubic-bezier() ಮೌಲ್ಯವನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದನ್ನು ನಿಮ್ಮ CSS ಕೋಡ್‌ನಲ್ಲಿ ಬಳಸಲು ನಕಲಿಸಿಕೊಳ್ಳಬಹುದು.

ಕರ್ವ್ ಕೆಳಗಿನ-ಎಡಭಾಗದಿಂದ (ಪ್ರಾರಂಭದ ಬಿಂದು) ಪ್ರಾರಂಭವಾಗಿ ಮೇಲಿನ-ಬಲಭಾಗಕ್ಕೆ (ಅಂತ್ಯದ ಬಿಂದು) ಸಾಗುತ್ತದೆ. ಇಲ್ಲಿ ಸಮಯವು ಎಡದಿಂದ ಬಲಕ್ಕೆ ಪ್ರಗತಿ ಹೊಂದುತ್ತದೆ ಮತ್ತು ಅನಿಮೇಷನ್‌ನ ಪ್ರಗತಿಯು ಕೆಳಗಿನಿಂದ ಮೇಲಕ್ಕೆ ಸಾಗುತ್ತದೆ.

ಇನ್‌ಪುಟ್‌ಗಳು ಮತ್ತು ನಿಯಂತ್ರಣಗಳು

ಈ ಜನರೇಟರ್‌ನಲ್ಲಿ ಈಸಿಂಗ್ ಕರ್ವ್ ರೂಪಿಸಲು ಮತ್ತು ನಿಯಂತ್ರಣ ಬಿಂದುಗಳನ್ನು ಹೊಂದಿಸಲು ಕೆಳಗಿನ ಇನ್‌ಪುಟ್‌ಗಳನ್ನು ಬಳಸಲಾಗುತ್ತದೆ:

• ಎರಡು ಹ್ಯಾಂಡಲ್‌ಗಳನ್ನು ಎಳೆಯುವುದು: ಈ ಹ್ಯಾಂಡಲ್‌ಗಳನ್ನು ಎಳೆಯುವ ಮೂಲಕ ಈಸಿಂಗ್ ಕರ್ವ್‌ನ ಆಕಾರವನ್ನು ನೇರವಾಗಿ ಬದಲಾಯಿಸಬಹುದು.
• ಮೊದಲ ನಿಯಂತ್ರಣ ಬಿಂದು X (First control point X): ಇದು 0 ಮತ್ತು 1 ರ ನಡುವಿನ ಸಂಖ್ಯಾತ್ಮಕ ಮೌಲ್ಯವಾಗಿರುತ್ತದೆ.
• ಮೊದಲ ನಿಯಂತ್ರಣ ಬಿಂದು Y (First control point Y): ಇದು -0.70 ಮತ್ತು 1.70 ರ ನಡುವಿನ ಸಂಖ್ಯಾತ್ಮಕ ಮೌಲ್ಯವಾಗಿರುತ್ತದೆ.
• ಎರಡನೇ ನಿಯಂತ್ರಣ ಬಿಂದು X (Second control point X): ಇದು 0 ಮತ್ತು 1 ರ ನಡುವಿನ ಸಂಖ್ಯಾತ್ಮಕ ಮೌಲ್ಯವಾಗಿರುತ್ತದೆ.
• ಎರಡನೇ ನಿಯಂತ್ರಣ ಬಿಂದು Y (Second control point Y): ಇದು -0.70 ಮತ್ತು 1.70 ರ ನಡುವಿನ ಸಂಖ್ಯಾತ್ಮಕ ಮೌಲ್ಯವಾಗಿರುತ್ತದೆ.
• ಪ್ರಿಸೆಟ್‌ಗಳ ಆಯ್ಕೆ: ಬಳಕೆದಾರರು "ease", "ease-in", "ease-out", "ease-in-out", "ಬ್ಯಾಕ್ ಇನ್", "ಬ್ಯಾಕ್ ಔಟ್", ಅಥವಾ "ಬ್ಯಾಕ್ ಇನ್-ಔಟ್" ನಂತಹ ಸಿದ್ಧ ಆಯ್ಕೆಗಳನ್ನು ನೇರವಾಗಿ ಆರಿಸಿಕೊಳ್ಳಬಹುದು.

ಔಟ್‌ಪುಟ್‌ಗಳು

ಬಳಕೆದಾರರು ಇನ್‌ಪುಟ್‌ಗಳನ್ನು ಬದಲಾಯಿಸಿದಾಗ ಉಪಕರಣವು ಈ ಕೆಳಗಿನ ಔಟ್‌ಪುಟ್‌ಗಳನ್ನು ನೈಜ ಸಮಯದಲ್ಲಿ ಪ್ರದರ್ಶಿಸುತ್ತದೆ:

• ನಿಮ್ಮ ಕರ್ವ್: ನೀವು ರೂಪಿಸಿದ ಈಸಿಂಗ್ ಕರ್ವ್‌ನ ದೃಶ್ಯ ಪ್ರಾತಿನಿಧ್ಯ.
• cubic-bezier(x1, y1, x2, y2): ನೀವು ವಿನ್ಯಾಸಗೊಳಿಸಿದ ಕರ್ವ್‌ನ ಆಕಾರಕ್ಕೆ ಅನುಗುಣವಾದ CSS cubic-bezier() ಫಂಕ್ಷನ್ ಮೌಲ್ಯ.
• Copied: cubic-bezier() ಮೌಲ್ಯವನ್ನು ಯಶಸ್ವಿಯಾಗಿ ನಕಲಿಸಿದ ನಂತರ ಈ ಸ್ಥಿತಿಯು ಪರದೆಯ ಮೇಲೆ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ.

ನಿಯಮಗಳು ಮತ್ತು ಮೌಲ್ಯಗಳ ಮಿತಿಗಳು

ಉಪಕರಣವು ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸಲು ಮತ್ತು ಮಾನ್ಯವಾದ CSS ಕೋಡ್ ಒದಗಿಸಲು ಕೆಲವು ನಿರ್ದಿಷ್ಟ ನಿಯಮಗಳನ್ನು ಅನ್ವಯಿಸಲಾಗಿದೆ:

1. ನಿಯಂತ್ರಣ ಬಿಂದುಗಳ ಮಿತಿಗಳು: ನಿಯಂತ್ರಣ ಬಿಂದುಗಳ X ಮೌಲ್ಯಗಳು ಯಾವಾಗಲೂ 0 ಮತ್ತು 1 ರ ನಡುವೆ ಇರಬೇಕು. Y ಮೌಲ್ಯಗಳು -0.70 ರಿಂದ 1.70 ರ ಮಿತಿಯಲ್ಲಿ ಇರಬಹುದು. Y ಮೌಲ್ಯಗಳು ಮೇಲ್ಭಾಗಕ್ಕಿಂತ ಮೇಲೆ ಅಥವಾ ಕೆಳಭಾಗಕ್ಕಿಂತ ಕೆಳಗೆ ಹೋಗುವುದರಿಂದ ಅನಿಮೇಷನ್‌ನಲ್ಲಿ ಓವರ್‌ಶೂಟ್ (overshoot) ಅಥವಾ ಪುಲ್-ಬ್ಯಾಕ್ (pull-back) ಪರಿಣಾಮಗಳನ್ನು ಸೃಷ್ಟಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ.
2. ಸ್ವಯಂ ತಿದ್ದುಪಡಿ ವ್ಯವಸ್ಥೆ: ಇನ್‌ಪುಟ್ ಕ್ಷೇತ್ರಗಳಲ್ಲಿ ಮಿತಿ ಮೀರಿದ ಮೌಲ್ಯಗಳನ್ನು ನಮೂದಿಸಿದರೆ ಉಪಕರಣವು ಅದನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸರಿಪಡಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, "First control point X" ಗಾಗಿ 9 ಎಂದು ನಮೂದಿಸಿ ನಂತರ ಇನ್‌ಪುಟ್ ಕ್ಷೇತ್ರದಿಂದ ಹೊರಬಂದರೆ (lose focus), ಆ ಮೌಲ್ಯವು ಸ್ವಯಂಚಾಲಿತವಾಗಿ 1 ಆಗಿ ಬದಲಾಗುತ್ತದೆ.
3. ಹಳೆಯ ಮೌಲ್ಯ ಮರುಸ್ಥಾಪನೆ: ಯಾವುದೇ ಸಂಖ್ಯಾತ್ಮಕ ಇನ್‌ಪುಟ್ ಕ್ಷೇತ್ರವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಖಾಲಿ ಮಾಡಿ ನಂತರ ಫೋಕಸ್ ಕಳೆದುಕೊಂಡರೆ, ಅಲ್ಲಿ ಈ ಹಿಂದೆ ಇದ್ದ ಮಾನ್ಯವಾದ ಮೌಲ್ಯವು ಮರುಸ್ಥಾಪನೆಗೊಳ್ಳುತ್ತದೆ.
4. ಕೀಬೋರ್ಡ್ ನಿಯಂತ್ರಣ: ನಿಯಂತ್ರಣ ಬಿಂದುವಿನ ಹ್ಯಾಂಡಲ್ ಮೇಲೆ ಫೋಕಸ್ ಇದ್ದಾಗ ಕೀಬೋರ್ಡ್‌ನ Left arrow ಕೀಲಿಯನ್ನು ಒತ್ತಿದರೆ ಅದರ ಮೌಲ್ಯವು ಬದಲಾಗುತ್ತದೆ (ಉದಾಹರಣೆಗೆ 0.99 ಗೆ).
5. ಅಪೂರ್ಣ ಇನ್‌ಪುಟ್‌ಗಳು: ಇನ್‌ಪುಟ್ ಕ್ಷೇತ್ರಗಳು ಖಾಲಿ ಇದ್ದಾಗ ಅಥವಾ ಸಂಖ್ಯೆಯಲ್ಲದ ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿದ್ದಾಗ, ಉಪಕರಣವು ಸಂಪೂರ್ಣ ಮತ್ತು ಸರಿಯಾದ ಮೌಲ್ಯವನ್ನು ನಮೂದಿಸುವವರೆಗೆ ಕಾಯುತ್ತದೆ.
6. ಪ್ರಿಸೆಟ್ ಮೌಲ್ಯಗಳು: ನೀವು "Back Out" ಪ್ರಿಸೆಟ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಿದಾಗ, ಅದು cubic-bezier() ಮೌಲ್ಯವನ್ನು cubic-bezier(0.34, 1.56, 0.64, 1) ಗೆ ಹೊಂದಿಸುತ್ತದೆ.
7. ನಕಲು ಮಾಡುವಿಕೆ: ಮೌಲ್ಯವನ್ನು ನಕಲಿಸಿದಾಗ ಕೇವಲ ಯಶಸ್ಸಿನ ಸ್ಥಿತಿಯನ್ನು ಮಾತ್ರ ತೋರಿಸಲಾಗುತ್ತದೆ, ಯಾವುದೇ ವಿಫಲತೆಯ ಪ್ರಾಂಪ್ಟ್‌ಗಳು ಇರುವುದಿಲ್ಲ.

ಗೌಪ್ಯತೆ ಮತ್ತು ಡೇಟಾ ಸಂಸ್ಕರಣೆ

ಕರ್ವ್ ಅನ್ನು ನೇರವಾಗಿ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲೇ ರಚಿಸಲಾಗುತ್ತದೆ. ನೀವು ಇಲ್ಲಿ ಹೊಂದಿಸುವ ಯಾವುದೇ ಮಾಹಿತಿಯನ್ನು BroBroGo ಗೆ ಅಪ್‌ಲೋಡ್ ಮಾಡಲಾಗುವುದಿಲ್ಲ.

CSS ಟೈಮಿಂಗ್ ಫಂಕ್ಷನ್‌ಗಳ ಅನ್ವಯಿಸುವಿಕೆ

CSS ನಲ್ಲಿ ಅನಿಮೇಷನ್ ವೇಗ ಮತ್ತು ಪ್ರಗತಿಯನ್ನು ನಿಯಂತ್ರಿಸಲು transition-timing-function ಮತ್ತು animation-timing-function ಪ್ರಾಪರ್ಟಿಗಳೊಂದಿಗೆ cubic-bezier() ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.

ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸುವ ease, ease-in, ease-out ಮತ್ತು ease-in-out ಕೀವರ್ಡ್‌ಗಳು ವಾಸ್ತವವಾಗಿ ಮೊದಲೇ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಸ್ಥಿರ ಕ್ಯೂಬಿಕ್ ಬೆಜಿಯರ್ ಕರ್ವ್‌ಗಳಾಗಿವೆ. ಈ ಉಪಕರಣದ ಮೂಲಕ ಆ ಕೀವರ್ಡ್‌ಗಳ ಹಿಂದಿರುವ ನಿಖರವಾದ ಸಂಖ್ಯಾತ್ಮಕ ಮೌಲ್ಯಗಳನ್ನು ಸುಲಭವಾಗಿ ತಿಳಿದುಕೊಳ್ಳಬಹುದು.

ಒಂದೇ ಒಂದು cubic-bezier ಫಂಕ್ಷನ್ ಮೂಲಕ ಅನಿಮೇಷನ್ ಪ್ರಾರಂಭವಾಗುವ ಮುನ್ನ ಹಿಂದೆ ಸರಿಯುವ (anticipation) ಅಥವಾ ನಿಗದಿತ ಮಿತಿಗಿಂತ ಮುಂದೆ ಹೋಗಿ ಮರಳಿ ಬರುವ (overshoot) ಪರಿಣಾಮಗಳನ್ನು ಸೃಷ್ಟಿಸಬಹುದು. ಆದರೆ, ಒಂದೇ ಕ್ಯೂಬಿಕ್ ಬೆಜಿಯರ್ ಕರ್ವ್ ಕೇವಲ ಒಂದು ದಿಕ್ಕಿನಲ್ಲಿ ಚಲಿಸಿ ನಂತರ ಸ್ಥಿರಗೊಳ್ಳಬಹುದು. ಬೌನ್ಸ್ (bounce) ಅಥವಾ ಎಲಾಸ್ಟಿಕ್ (elastic) ನಂತಹ ಹಲವು ಬಾರಿ ದಿಕ್ಕನ್ನು ಬದಲಾಯಿಸುವ ಸಂಕೀರ್ಣ ಪರಿಣಾಮಗಳನ್ನು ಒಂದೇ cubic-bezier ಮೂಲಕ ವ್ಯಕ್ತಪಡಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ.

---

ಸಾಮಾನ್ಯ ಪ್ರಶ್ನೋತ್ತರಗಳು (FAQ)

ಎರಡು ಹ್ಯಾಂಡಲ್‌ಗಳು ಮತ್ತು ನಾಲ್ಕು ಸಂಖ್ಯೆಗಳ ಅರ್ಥವೇನು?

ಕರ್ವ್ ಕೆಳಗಿನ-ಎಡದಿಂದ (ಪ್ರಾರಂಭ) ಮೇಲಿನ-ಬಲಕ್ಕೆ (ಅಂತ್ಯ) ಸಾಗುತ್ತದೆ, ಸಮಯವು ಎಡದಿಂದ ಬಲಕ್ಕೆ ಮತ್ತು ಪ್ರಗತಿಯು ಮೇಲಕ್ಕೆ ಹೋಗುತ್ತದೆ. ಎರಡು ಹ್ಯಾಂಡಲ್‌ಗಳು ಅದನ್ನು ಬಗ್ಗಿಸುವ ನಿಯಂತ್ರಣ ಬಿಂದುಗಳಾಗಿವೆ — ಪ್ರತಿಯೊಂದಕ್ಕೂ X ಮತ್ತು Y ಇರುತ್ತದೆ, ಆದ್ದರಿಂದ ಒಟ್ಟಿಗೆ ಅವು cubic-bezier(x1, y1, x2, y2) ಆಗಿರುತ್ತವೆ. X ಯಾವಾಗಲೂ 0 ಮತ್ತು 1 ರ ನಡುವೆ ಇರುತ್ತದೆ, ಆದರೆ ಚಲನೆಯು ಓವರ್‌ಶೂಟ್ ಆಗಲು ಅಥವಾ ಸ್ಥಿರವಾಗುವ ಮೊದಲು ಹಿಂದೆ ಸರಿಯಲು Y ಮೇಲ್ಭಾಗಕ್ಕಿಂತ ಮೇಲೆ ಅಥವಾ ಕೆಳಭಾಗಕ್ಕಿಂತ ಕೆಳಗೆ ಹೋಗಬಹುದು.

ನನ್ನ CSS ನಲ್ಲಿ ಈ ಮೌಲ್ಯವನ್ನು ಹೇಗೆ ಬಳಸುವುದು?

cubic-bezier() ಅನ್ನು ನಕಲಿಸಿ ಮತ್ತು ಟೈಮಿಂಗ್ ಫಂಕ್ಷನ್ ಇರುವ ಯಾವುದೇ ಸ್ಥಳದಲ್ಲಿ ಬಳಸಿ — transition-timing-function, animation-timing-function, ಅಥವಾ ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್, ಉದಾ. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). ease, ease-in, ease-out ಮತ್ತು ease-in-out ಕೀವರ್ಡ್‌ಗಳು ಕೇವಲ ಸ್ಥಿರವಾದ cubic-bezier ಕರ್ವ್‌ಗಳಾಗಿವೆ, ಆದ್ದರಿಂದ ಆ ಪ್ರಿಸೆಟ್‌ಗಳಲ್ಲಿ ಒಂದನ್ನು ಆರಿಸಿದರೆ ಆ ಕೀವರ್ಡ್‌ನ ಹಿಂದಿರುವ ನಿಖರವಾದ ಮೌಲ್ಯವನ್ನು ತೋರಿಸುತ್ತದೆ.

ಇದು ಬೌನ್ಸ್ ಅಥವಾ ಎಲಾಸ್ಟಿಕ್ ಎಫೆಕ್ಟ್ ರಚಿಸಬಲ್ಲದೇ?

ಸ್ವತಂತ್ರವಾಗಿ ಮಾಡಲು ಸಾಧ್ಯವಿಲ್ಲ. ಒಂದೇ cubic-bezier ನಿರೀಕ್ಷಿಸಬಹುದು ಮತ್ತು ಓವರ್‌ಶೂಟ್ ಮಾಡಬಹುದು — "back" ಪ್ರಿಸೆಟ್‌ಗಳು ಇದನ್ನು ಮಾಡಲು ಒಂದು ಹ್ಯಾಂಡಲ್ ಅನ್ನು ಬಾಕ್ಸ್‌ನ ಆಚೆಗೆ ಎಳೆಯುತ್ತವೆ — ಆದರೆ ಅದು ಕೇವಲ ಒಂದು ಕಡೆ ಚಲಿಸಿ ನಂತರ ಸ್ಥಿರವಾಗಬಹುದು. ಬೌನ್ಸ್ ಮತ್ತು ಎಲಾಸ್ಟಿಕ್ ಪರಿಣಾಮಗಳು ಹಲವಾರು ಬಾರಿ ದಿಕ್ಕನ್ನು ಬದಲಾಯಿಸುತ್ತವೆ, ಇದನ್ನು ಒಂದೇ cubic-bezier ಮೂಲಕ ವ್ಯಕ್ತಪಡಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ; ಅವುಗಳಿಗೆ CSS ಕೀಫ್ರೇಮ್‌ಗಳು ಅಥವಾ ಹಲವು ಸ್ಟಾಪ್‌ಗಳನ್ನು ಹೊಂದಿರುವ linear() ಫಂಕ್ಷನ್ ಅಗತ್ಯವಿರುತ್ತದೆ.

ಈ ಉಪಕರಣವನ್ನು ಬಳಸುವಾಗ ನನ್ನ ಡೇಟಾ ಸುರಕ್ಷಿತವೇ?

ಕರ್ವ್ ಅನ್ನು ನೇರವಾಗಿ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲೇ ರಚಿಸಲಾಗುತ್ತದೆ. ನೀವು ಇಲ್ಲಿ ಹೊಂದಿಸುವ ಯಾವುದೇ ಮಾಹಿತಿಯನ್ನು BroBroGo ಗೆ ಅಪ್‌ಲೋಡ್ ಮಾಡಲಾಗುವುದಿಲ್ಲ.