📈

ಉಚಿತ CSS Cubic-Bezier ಈಸಿಂಗ್ ಜನರೇಟರ್

ನಿಯಂತ್ರಣ ಬಿಂದುಗಳನ್ನು ಎಳೆಯುವ ಮೂಲಕ CSS ಈಸಿಂಗ್ ಕರ್ವ್‌ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಿ, ಚಲನೆಯನ್ನು ಲೈವ್ ಆಗಿ ಪೂರ್ವವೀಕ್ಷಿಸಿ, ಮತ್ತು cubic-bezier() ಮೌಲ್ಯ ನಕಲಿಸಿ. ಓವರ್‌ಶೂಟ್/ಬೌನ್ಸ್ ಪ್ರಿಸೆಟ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.

ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಚಲಿಸುತ್ತದೆನೋಂದಣಿ ಇಲ್ಲ, ಪಾಪ್-ಅಪ್‌ಗಳಿಲ್ಲಯಾವುದೇ ಲಾಗಿನ್ ಅಗತ್ಯವಿಲ್ಲಶಾಶ್ವತವಾಗಿ ಉಚಿತ

ಒಮ್ಮೆ ಲೋಡ್ ಆದ ನಂತರ ಆಫ್‌ಲೈನ್‌ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಕರ್ವ್ ಆಕಾರ ಮಾಡಲು ಟೀಲ್ ಮತ್ತು ರೋಸ್ ಹ್ಯಾಂಡಲ್‌ಗಳನ್ನು ಎಳೆಯಿರಿ

ನಿಯಂತ್ರಣ ಬಿಂದುಗಳು

x1y1x2y2

ಚಲನೆ ಪೂರ್ವವೀಕ್ಷಣೆ

ಅವಧಿ1.6s

ಅಗಲ ಪರಿವರ್ತನೆ

CSS ಮೌಲ್ಯ

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

ಪ್ರೀಸೆಟ್‌ಗಳು

ರೋಸ್ ಮತ್ತು ಟೀಲ್ ಹ್ಯಾಂಡಲ್‌ಗಳು back-out ಮತ್ತು anticipate ನಂತಹ 'ಓವರ್‌ಶೂಟ್' / ಬೌನ್ಸ್ ಪರಿಣಾಮಗಳನ್ನು ರಚಿಸಲು ಬಾಕ್ಸ್‌ನ ಮೇಲೆ ಅಥವಾ ಕೆಳಗೆ (Y 0-1 ಮೀರಿ) ಎಳೆಯಬಹುದು. X 0-1 ಒಳಗೆ ಉಳಿಯುತ್ತದೆ (ಸಮಯ ಹಿಂತಿರುಗಲಾರದು).

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

ಎಡಿಟರ್ React ಸ್ಥಿತಿ ಮತ್ತು SVG ಬಳಸಿ ಸಂಪೂರ್ಣವಾಗಿ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ನಿರ್ಮಿಸಲಾಗಿದೆ — ಯಾವುದೇ ಲೈಬ್ರರಿ ಕರ್ವ್ ಗಣಿತವನ್ನು ನಿರ್ವಹಿಸುವುದಿಲ್ಲ. ಎರಡು ಎಳೆಯಬಹುದಾದ ನಿಯಂತ್ರಣ ಬಿಂದುಗಳು SVG ಘನ ಬೆಝಿಯರ್ ಪಥವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತವೆ, ಮತ್ತು ಬ್ರೌಸರ್‌ನ ಸ್ವಂತ CSS ಆನಿಮೇಶನ್ ಇಂಜಿನ್ ಫಲಿತಾಂಶ cubic-bezier() ಮೌಲ್ಯವನ್ನು ನೇರವಾಗಿ @keyframes ನಿಯಮಕ್ಕೆ ಚುಚ್ಚುವ ಮೂಲಕ ಚಲನೆಯ ಮುನ್ನೋಟ ಚಲಾಯಿಸುತ್ತದೆ.

1
ನಿಯಂತ್ರಣ ಬಿಂದುಗಳನ್ನು ಎಳೆಯಿರಿ ಅಥವಾ ಟೈಪ್ ಮಾಡಿ
ಎರಡು ಹ್ಯಾಂಡಲ್‌ಗಳು (ಟೀಲ್‌ನಲ್ಲಿ P1, ರೋಸ್‌ನಲ್ಲಿ P2) SVG ಕ್ಯಾನ್ವಾಸ್‌ನಲ್ಲಿ ಕುಳಿತಿವೆ. ಎಳೆಯುವಿಕೆ setPointerCapture ಜೊತೆ Pointer Events API ಬಳಸುತ್ತದೆ ಆದ್ದರಿಂದ SVG ಗಡಿಯ ಹೊರಗಿದ್ದರೂ ಹ್ಯಾಂಡಲ್ ನಿಮ್ಮ ಬೆರಳು ಅಥವಾ ಕರ್ಸರ್ ಅನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತದೆ. ನೀವು ಬಾಣ ಕೀಗಳಿಂದ ಹ್ಯಾಂಡಲ್‌ಗಳನ್ನು ಸ್ವಲ್ಪ ಸರಿಸಬಹುದು ಅಥವಾ x1/y1/x2/y2 ಸಂಖ್ಯಾ ಇನ್‌ಪುಟ್‌ಗಳಿಗೆ ನಿಖರ ಮೌಲ್ಯಗಳನ್ನು ಟೈಪ್ ಮಾಡಬಹುದು.
2
SVG ಕರ್ವ್ ಅನ್ನು ನೈಜ ಸಮಯದಲ್ಲಿ ಎಳೆಯುತ್ತದೆ
ಕರ್ವ್ ಒಂದೇ SVG <path> ಎಲಿಮೆಂಟ್ ಆಗಿದ್ದು ಅದರ C (ಘನ ಬೆಝಿಯರ್) ಆಜ್ಞೆಯನ್ನು ಪ್ರತಿ ಸ್ಥಿತಿ ನವೀಕರಣದಲ್ಲಿ ನಾಲ್ಕು ನಿಯಂತ್ರಣ-ಬಿಂದು ನಿರ್ದೇಶಾಂಕಗಳಿಂದ ಮರುಲೆಕ್ಕಹಾಕಲಾಗುತ್ತದೆ. ಯಾವುದೇ ಕ್ಯಾನ್ವಾಸ್ ಇಲ್ಲ, ಬಾಹ್ಯ ಲೈಬ್ರರಿ ಇಲ್ಲ — ಬ್ರೌಸರ್‌ನ SVG ರೆಂಡರರ್ ಪಥವನ್ನು ನೇರವಾಗಿ ಎಳೆಯುತ್ತದೆ.
3
ಬ್ರೌಸರ್ CSS ಇಂಜಿನ್ ಈಸಿಂಗ್ ಮುನ್ನೋಟ ನೀಡುತ್ತದೆ
ಮೂರು ಲೈವ್ ಆನಿಮೇಶನ್‌ಗಳು (ಜಾರುವ ಚುಕ್ಕೆ, ಅಗಲ ಪರಿವರ್ತನೆ, ಮತ್ತು ಒಂದು ಸ್ಕೇಲ್) ಇನ್‌ಲೈನ್ ಆಗಿ ಚುಚ್ಚಿದ cubic-bezier() ಮೌಲ್ಯದೊಂದಿಗೆ CSS @keyframes ಚಲಾಯಿಸುತ್ತವೆ. ಬ್ರೌಸರ್‌ನ ಸ್ವಂತ ಆನಿಮೇಶನ್ ಇಂಜಿನ್ ಕರ್ವ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ, ಆದ್ದರಿಂದ ನೀವು ನೋಡುವುದು ನಿಮ್ಮ ಉತ್ಪಾದನಾ CSS ನಿಖರವಾಗಿ ಏನನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆಯೋ ಅದೇ.
4
ನಿಮ್ಮ ಫ್ರೇಮ್‌ವರ್ಕ್‌ನ ಸಿಂಟ್ಯಾಕ್ಸ್‌ನಲ್ಲಿ ಸ್ನಿಪ್ಪೆಟ್ ನಕಲಿಸಿ
ಟ್ಯಾಬ್‌ಗಳು ಅದೇ ನಾಲ್ಕು ಸಂಖ್ಯೆಗಳನ್ನು CSS transition-timing-function, Tailwind ನಿರಂಕುಶ-ಮೌಲ್ಯ ವರ್ಗ, Framer Motion ease ಅರೇ, ಅಥವಾ anime.js ಈಸಿಂಗ್ ಸ್ಟ್ರಿಂಗ್ ಆಗಿ ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡುತ್ತವೆ. ಸ್ನಿಪ್ಪೆಟ್ ಅನ್ನು navigator.clipboard ಜೊತೆ ಕ್ಲಿಪ್‌ಬೋರ್ಡ್‌ಗೆ ಬರೆಯಲಾಗುತ್ತದೆ. ಕರ್ವ್ ಅನ್ನು URL ಹ್ಯಾಶ್‌ನಲ್ಲಿಯೂ (#b=x1,y1,x2,y2) ಎನ್‌ಕೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ ಆದ್ದರಿಂದ ನೀವು ಅದನ್ನು ಹಂಚಿಕೊಳ್ಳಬಹುದು ಅಥವಾ ಬುಕ್‌ಮಾರ್ಕ್ ಮಾಡಬಹುದು.