Giới thiệu CSS Cubic Bezier Animation Generator
Cubic-Bezier là gì trong CSS Animation?
Trong lập trình hoạt ảnh (Animation) CSS, cubic-bezier là một hàm toán học định nghĩa đường cong gia tốc (Easing function). Nó kiểm soát "nhịp độ" của chuyển động theo thời gian: vật thể sẽ chuyển động đều đều, hay bắt đầu chậm rồi tăng tốc, hay bắt đầu cực nhanh rồi phanh từ từ.
Đường cong Bézier bậc 3 này được cấu thành từ 4 tham số: tọa độ X, Y của 2 điểm kiểm soát (P1 và P2) trên hệ trục tọa độ 2D.
Cú pháp: transition-timing-function: cubic-bezier(x1, y1, x2, y2);
Các giá trị Easing cơ bản có sẵn trong CSS
CSS đã cung cấp sẵn một số từ khóa rút gọn cho các nhịp độ phổ biến:
linear: Chuyển động đều tăm tắp như người máy.ease: Nhanh dần, sau đó chậm lại ở khúc cuối (Tự nhiên nhất, là mặc định).ease-in: Khởi đầu rất chậm, tăng tốc về đích (Phù hợp cho hiệu ứng phóng to/bay ra ngoài).ease-out: Khởi đầu nhanh, giảm tốc từ từ về đích (Phù hợp cho hiệu ứng vật thể bay vào màn hình).ease-in-out: Chậm ở 2 đầu, nhanh ở giữa.
Sáng tạo chuyển động tự nhiên với Custom Cubic-Bezier
Nếu chỉ dùng các từ khóa có sẵn, trang web của bạn sẽ rất nhàm chán. Để tạo ra các hiệu ứng giật lùi (Anticipation) hoặc nảy lên như lò xo (Bouncing) chuẩn nguyên tắc Animation Disney, bạn phải tùy chỉnh 4 thông số của cubic-bezier.
Công cụ Cubic-Bezier Generator cung cấp một Đồ thị không gian đồ họa trực quan:
- Dùng chuột kéo 2 điểm tay cầm (Handles) để bẻ cong đồ thị thời gian.
- Bạn có thể kéo tay cầm vọt ra khỏi đồ thị (Giá trị Y > 1 hoặc Y < 0) để tạo hiệu ứng bật ngược (Bounce).
- Bấm "Chạy thử" để xem hộp màu di chuyển minh họa thực tế tốc độ.
- Sao chép hàm
cubic-bezier()hoàn hảo của bạn.