CSS ಕ್ಯೂಬಿಕ್ ಬೆಜಿಯರ್ ಜನರೇಟರ್
ಈಸಿಂಗ್ ಕರ್ವ್ ರೂಪಿಸಲು ಎರಡು ಹ್ಯಾಂಡಲ್ಗಳನ್ನು ಎಳೆಯಿರಿ, ಸ್ಥಿರ ಚಲನೆಗೆ ವಿರುದ್ಧವಾಗಿ ಡಾಟ್ ಚಲಿಸುವುದನ್ನು ವೀಕ್ಷಿಸಿ ಮತ್ತು cubic-bezier() ಮೌಲ್ಯವನ್ನು ನಕಲಿಸಿ.
cubic-bezier(0.25, 0.1, 0.25, 1)ಕರ್ವ್ ಅನ್ನು ನೇರವಾಗಿ ನಿಮ್ಮ ಬ್ರೌಸರ್ನಲ್ಲೇ ರಚಿಸಲಾಗುತ್ತದೆ. ನೀವು ಇಲ್ಲಿ ಹೊಂದಿಸುವ ಯಾವುದೇ ಮಾಹಿತಿಯನ್ನು BroBroGo ಗೆ ಅಪ್ಲೋಡ್ ಮಾಡಲಾಗುವುದಿಲ್ಲ.
ಪದೇ ಪದೇ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಗಳು
ಎರಡು ಹ್ಯಾಂಡಲ್ಗಳು ಮತ್ತು ನಾಲ್ಕು ಸಂಖ್ಯೆಗಳ ಅರ್ಥವೇನು?
ಕರ್ವ್ ಕೆಳಗಿನ-ಎಡದಿಂದ (ಪ್ರಾರಂಭ) ಮೇಲಿನ-ಬಲಕ್ಕೆ (ಅಂತ್ಯ) ಸಾಗುತ್ತದೆ, ಸಮಯವು ಎಡದಿಂದ ಬಲಕ್ಕೆ ಮತ್ತು ಪ್ರಗತಿಯು ಮೇಲಕ್ಕೆ ಹೋಗುತ್ತದೆ. ಎರಡು ಹ್ಯಾಂಡಲ್ಗಳು ಅದನ್ನು ಬಗ್ಗಿಸುವ ನಿಯಂತ್ರಣ ಬಿಂದುಗಳಾಗಿವೆ — ಪ್ರತಿಯೊಂದಕ್ಕೂ 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() ಫಂಕ್ಷನ್ ಅಗತ್ಯವಿರುತ್ತದೆ.