Trình Soạn Cubic Bezier

Trình Soạn Cubic Bezier - Tạo Đường Cong Easing CSS Trực Quan

Thiết kế đường cong easing tùy chỉnh cho CSS bằng giao diện kéo thả trực quan. Kéo hai điểm điều khiển để uốn cong hàm cubic-bezier(), xem ngay chuyển động mô phỏng, so sánh với các từ khóa CSS có sẵn như ease-in-out và sao chép mã CSS sẵn sàng dán vào project.

Hàm cubic-bezier() trong CSS là gì?

Hàm cubic-bezier() mô tả cách một transition hoặc animation CSS tiến triển theo thời gian. Thay vì chạy đều một tốc độ, chuyển động có thể tăng tốc, giảm tốc, vượt đích hoặc nảy lại dựa vào đường cong xác định bởi bốn số.

Cú pháp: cubic-bezier(x1, y1, x2, y2)

Đường cong luôn bắt đầu tại (0, 0) và kết thúc tại (1, 1). Hai điểm điều khiển P1 = (x1, y1) và P2 = (x2, y2) sẽ kéo dáng đường cong ở giữa. Trục X biểu diễn thời gian (0 đến 1), trục Y biểu diễn tiến độ của chuyển động.

Nếu đường cong vọt lên nhanh ở đầu, chuyển động sẽ chạy nhanh ngay từ đầu. Nếu nó đi lên chậm rồi tăng tốc sau, ta có cảm giác ease-in. Khi Y vượt khỏi khoảng [0, 1], chuyển động sẽ vượt qua đích — tạo hiệu ứng back/bounce.

Cách sử dụng trình soạn cubic-bezier này?

Có ba cách để tạo đường cong:

1. Kéo hai điểm điều khiển màu xanh trên khung vẽ để uốn cong trực quan. Hai điểm đó tương ứng P1 và P2 trong cubic-bezier(x1, y1, x2, y2).
2. Gõ trực tiếp giá trị X1/Y1/X2/Y2 vào các ô nhập bên dưới nếu cần độ chính xác cao.
3. Bấm vào bất kỳ mẫu có sẵn (ease, ease-in-out, ease-out-back...) để nạp một đường cong phổ biến, sau đó tinh chỉnh tiếp.

Sau khi tạo xong, bấm Play để xem quả bóng chạy theo easing bạn vừa tạo. Dùng menu So Sánh để chạy thêm quả bóng thứ hai với một từ khóa CSS chuẩn nhằm thấy rõ khác biệt. Mã CSS sẵn sàng dán xuất hiện bên dưới — bấm Sao Chép để dán vào stylesheet.

Về khả năng truy cập, hai điểm điều khiển có thể được focus bằng Tab và di chuyển bằng phím mũi tên (giữ Shift để bước nhảy lớn hơn).

Khác biệt giữa ease, ease-in, ease-out và ease-in-out là gì?

Đây là bốn từ khóa easing chuẩn của CSS, mỗi từ khóa tương ứng một giá trị cubic-bezier() cố định:

- ease: cubic-bezier(0.25, 0.1, 0.25, 1) — khởi đầu nhanh, kết thúc chậm. Đây là giá trị mặc định khi bạn không chỉ định timing function.
- ease-in: cubic-bezier(0.42, 0, 1, 1) — khởi đầu chậm rồi tăng tốc. Phù hợp khi phần tử thoát khỏi màn hình.
- ease-out: cubic-bezier(0, 0, 0.58, 1) — khởi đầu nhanh rồi giảm tốc. Lựa chọn tốt nhất cho phần tử xuất hiện trên màn hình.
- ease-in-out: cubic-bezier(0.42, 0, 0.58, 1) — chậm ở hai đầu, nhanh ở giữa. Đối xứng và cảm giác tự nhiên.

Ngoài ra 'linear' tương ứng cubic-bezier(0, 0, 1, 1) — tốc độ đều, không có easing. Với hầu hết hoạt ảnh UI, ease-out là lựa chọn tinh tế nhất vì gợi cảm giác quán tính vật lý.

Đường cong overshoot và anticipation là gì?

Đường cong overshoot đẩy chuyển động vượt qua giá trị đích trước khi quay lại điểm cuối, tạo hiệu ứng nảy hoặc 'back' vui mắt. Đường cong anticipation thì ngược lại — kéo lùi nhẹ trước khi tiến tới, mô phỏng cách vật thể thật lấy đà.

Để tạo các hiệu ứng này, đặt giá trị Y nằm ngoài khoảng [0, 1]:

- Overshoot (ease-out-back): cubic-bezier(0.34, 1.56, 0.64, 1) — Y của điểm điều khiển thứ hai vượt 1, nên đường cong vọt qua 100% rồi mới ổn định.
- Anticipation (ease-in-back): cubic-bezier(0.36, 0, 0.66, -0.56) — Y của điểm thứ hai âm, giá trị bị kéo xuống dưới 0 một đoạn.
- Cả hai đầu mạnh: cubic-bezier(0.68, -0.6, 0.32, 1.6).

Trình soạn này cho phép Y nằm trong khoảng -2 đến 2 để bạn thoải mái thử nghiệm overshoot. Những easing này rất hợp cho modal, dấu tick xác nhận và các chuyển động cần cá tính.

Dùng giá trị cubic-bezier() vừa tạo ở đâu?

Bạn có thể dán giá trị vào bất kỳ thuộc tính timing-function nào trong CSS. Hai trường hợp phổ biến nhất:

1. transition-timing-function của một transition CSS:
.button {
transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

2. animation-timing-function của @keyframes:
.card {
animation: fadeIn 600ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

Giá trị cũng dùng được trong các thư viện chuyển động:
- Framer Motion: transition={{ ease: [0.34, 1.56, 0.64, 1] }}
- GSAP: gsap.to(el, { x: 100, ease: 'cubicBezier(0.34, 1.56, 0.64, 1)' })
- Web Animations API: el.animate(frames, { easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)' })

Một số hệ thống thiết kế như Material Design 3 công bố các giá trị cubic-bezier khuyến nghị — bạn có thể nhập chúng vào ô X1/Y1/X2/Y2 để hình dung trực quan.

Tại sao X chỉ nằm trong khoảng 0–1?

Tọa độ X (x1 và x2) phải nằm trong khoảng 0 đến 1, và trình soạn này tự động ép buộc giới hạn đó. Lý do thuần toán học: trục X biểu diễn thời gian, và thời gian phải chạy đơn điệu tiến tới. Nếu một điểm điều khiển có X vượt khoảng [0, 1] hoặc lùi lại, đường cong có thể tự gấp lên — tạo ra hai giá trị tiến độ khác nhau cho cùng một thời điểm — điều CSS không định nghĩa.

Tuy nhiên, giá trị Y được tự do nằm ngoài khoảng [0, 1]. Y biểu diễn tiến độ, mà tiến độ có thể vượt mục tiêu (Y > 1) hoặc lùi tạm thời (Y < 0). Nhờ vậy mà ta có hiệu ứng back/bounce.

Nếu bạn nhập X ngoài giới hạn, trình soạn sẽ tự kẹp về 0 hoặc 1.

Khác gì với CSS spring() hoặc linear() easing?

cubic-bezier() là hàm easing nguyên thủy của CSS, được hỗ trợ ở mọi trình duyệt từ năm 2008. Nó dùng hai điểm điều khiển để mô tả một đường cong đơn.

Các lựa chọn mới hơn:

- Hàm linear() (CSS Easing Functions Level 2): cho phép mô tả easing dưới dạng danh sách các điểm. Hữu ích cho đường cong tùy ý hoặc đường cong đo từ dữ liệu thực — ví dụ lò xo nhiều nảy mà một bezier không thể biểu diễn. Đã hỗ trợ ở Chromium hiện đại, Safari 17.4+ và Firefox 112+.

- @starting-style và view transitions vẫn dựa trên các hàm easing chuẩn bao gồm cubic-bezier().

- Vật lý spring (dùng trong Framer Motion, React Spring) là mô hình hoàn toàn khác — mô phỏng hệ vật-lò xo thay vì đánh giá đường cong cố định.

Với CSS dùng trong production hiện nay, cubic-bezier() vẫn là lựa chọn tương thích nhất và dễ đoán nhất. Dùng linear() khi cần hiệu ứng nảy thực sự (nhiều đỉnh) mà bezier đơn không tả được.

Công cụ có an toàn không? Có gửi đường cong đi đâu không?

An toàn tuyệt đối. Mọi xử lý đều diễn ra trên trình duyệt:

- Không có dữ liệu nào được gửi tới bất kỳ máy chủ nào
- Không cần tài khoản, không đăng ký, không theo dõi thao tác chỉnh sửa
- Hoạt động được khi mất mạng sau khi đã tải trang
- Không tải thư viện ngoài cho phần soạn — chỉ JavaScript thuần
- Mã CSS bạn tạo ra chỉ rời thiết bị khi bạn chủ động sao chép

Bạn có thể kiểm chứng bằng tab Network của trình duyệt khi đang chỉnh — sẽ không thấy yêu cầu nào. Chỉ có lần tải trang ban đầu và các tài nguyên dùng chung (font, icon).

Tính Năng Nổi Bật

• Trình soạn đường cong tương tác bằng kéo thả
• Hai điểm điều khiển có thể kéo, cập nhật đường cong ngay tức thì
• Quả bóng xem trước chạy theo easing bạn đang thiết kế
• So sánh song song với các từ khóa CSS có sẵn
• Điều chỉnh thời lượng từ 0.2s đến 4s
• 12 mẫu easing đặt tên (ease, ease-in-out, ease-out-back và nhiều hơn)
• Ô nhập số cho phép đặt chính xác tọa độ X/Y
• Hỗ trợ overshoot và anticipation (Y từ -2 đến 2)
• Tạo mã CSS cubic-bezier() sẵn sàng sao chép
• Xuất cả transition-timing-function và animation-timing-function
• Điểm điều khiển truy cập được bằng bàn phím với phím mũi tên
• Dùng được giá trị cho Framer Motion, GSAP, Web Animations API
• 100% xử lý phía trình duyệt, không gửi dữ liệu lên máy chủ
• Hoạt động offline sau lần tải đầu tiên
• Hỗ trợ chế độ tối và bố cục thân thiện di động