Cubic bezier CSS: chỉnh đường cong easing bằng mắt thay vì đoán bốn con số
Hàm cubic-bezier trong CSS quyết định chuyển động nhanh hay chậm ở từng đoạn: bắt đầu từ từ rồi tăng tốc, lao nhanh rồi phanh lại, hay vọt quá đích một chút rồi bật về. Công cụ cubic bezier generator này cho bạn kéo trực tiếp hai điểm điều khiển trên đồ thị, xem quả bóng chạy thử cạnh một đường cong đối chứng, rồi sao chép giá trị cubic-bezier() cùng đoạn transition, animation dùng ngay.
Tính năng nổi bật
- Đồ thị kéo thả hai điểm điều khiển P1, P2 bằng chuột hoặc cảm ứng, chọn điểm bằng phím Tab và di chuyển bằng phím mũi tên (giữ Shift để bước 0,1)
- Hoành độ x bị giới hạn trong 0 đến 1 đúng như quy định của CSS, tung độ y được vượt ra ngoài để tạo hiệu ứng nảy hoặc lùi đà
- Hơn 25 mẫu có sẵn: năm từ khóa CSS (linear, ease, ease-in, ease-out, ease-in-out), bộ Sine, Quad, Cubic, Quart, Expo, Circ, Back theo easings.net và Material standard
- Xem thử chuyển động với thời lượng tùy chỉnh, so sánh song song với linear hoặc bất kỳ mẫu nào khác
- Dán giá trị có sẵn như cubic-bezier(0.68, -0.6, 0.32, 1.6), bốn số rời hoặc cả dòng transition-timing-function để đọc ngược lên đồ thị
- Xuất hàm timing, đoạn transition, đoạn animation kèm @keyframes, biến CSS, cú pháp Web Animations API và lớp Tailwind giá trị tùy ý
- Báo khi đường cong trùng một từ khóa CSS có sẵn và báo khoảng vượt biên thực tế của tiến trình
- Phần xem thử không tự chạy nếu máy đang bật chế độ giảm chuyển động, mã xuất ra có sẵn khối prefers-reduced-motion
Vì sao nên chỉnh easing bằng đồ thị
Bốn con số trong cubic-bezier khó hình dung nếu chỉ nhìn chữ: (0.34, 1.56, 0.64, 1) nghĩa là phần tử sẽ vọt quá điểm đích khoảng 10% rồi quay về, còn (0.7, 0, 0.84, 0) là khởi đầu rất chậm và tăng tốc gắt ở cuối. Khi thấy đường cong và quả bóng chạy cùng lúc, bạn chọn được cảm giác chuyển động phù hợp chỉ sau vài lần kéo, thay vì sửa số trong trình soạn thảo rồi tải lại trang. Công cụ cũng tính vị trí quả bóng bằng đúng thuật toán trình duyệt dùng, nên những gì bạn thấy trong phần xem thử khớp với kết quả trên trang thật.
Lợi ích khi sử dụng
- Thấy ngay hình dạng chuyển động thay vì đoán từ bốn con số
- Xem thử chính xác như trình duyệt vì dùng cùng cách giải đường cong
- Có sẵn các đường cong phổ biến để làm điểm khởi đầu
- Đọc ngược được giá trị cubic-bezier trong mã của người khác
- Mã xuất ra tôn trọng người dùng bật giảm chuyển động
- Chạy hoàn toàn trên trình duyệt, không cần cài đặt hay đăng nhập
Cách tạo đường cong cubic-bezier
- 1Chọn điểm xuất phát: Bấm một mẫu gần với cảm giác mong muốn, ví dụ easeOutCubic cho menu trượt ra hoặc easeOutBack cho nút bật lên, hoặc dán giá trị bạn đang dùng vào ô Dán giá trị có sẵn.
- 2Kéo hai điểm điều khiển: Kéo điểm hồng P1 để chỉnh đoạn đầu và điểm xanh P2 để chỉnh đoạn cuối. Kéo lên cao hơn khung vuông để tạo độ nảy, kéo xuống dưới 0 để tạo cú lùi đà.
- 3Tinh chỉnh bằng số: Gõ trực tiếp x1, y1, x2, y2 hoặc chọn điểm bằng phím Tab và dùng phím mũi tên để dịch từng 0,01.
- 4Xem thử: Nhập thời lượng bằng mili giây, chọn đường cong để so sánh rồi bấm Chạy thử. Quả bóng vàng là đường cong của bạn, quả bóng xám là đường đối chứng.
- 5Sao chép mã: Chép hàm cubic-bezier() hoặc cả đoạn transition, animation đã kèm khối prefers-reduced-motion và dán vào file CSS.
Bốn con số trong cubic-bezier(x1, y1, x2, y2) nghĩa là gì
Đường cong easing trong CSS là một đường Bézier bậc ba luôn đi từ điểm (0, 0) tới điểm (1, 1). Trục ngang là thời gian đã trôi qua tính theo tỷ lệ, trục đứng là tiến trình của thuộc tính đang chuyển động. Hai điểm đầu cuối cố định nên bạn chỉ khai báo hai điểm điều khiển ở giữa: P1 = (x1, y1) kéo đoạn đầu của đường cong về phía nó, P2 = (x2, y2) kéo đoạn cuối. Đường cong dốc ở đâu thì chuyển động nhanh ở đó, nằm ngang ở đâu thì gần như đứng yên ở đó. Ví dụ từ khóa ease tương đương cubic-bezier(0.25, 0.1, 0.25, 1): đoạn đầu dốc nên tăng tốc nhanh, đoạn cuối gần như nằm ngang nên phanh êm. Tính bằng công cụ này, tại đúng nửa thời gian, ease đã đi được khoảng 80,2% quãng đường, trong khi linear mới đi được 50%.
Vì sao x phải nằm trong 0 đến 1 còn y thì không
Trục x là thời gian, và thời gian không thể chạy lùi. Nếu x1 hoặc x2 nằm ngoài khoảng 0 đến 1, đường cong có thể quay ngược theo trục ngang và một thời điểm sẽ ứng với nhiều giá trị tiến trình, vì vậy đặc tả CSS coi giá trị đó là không hợp lệ và trình duyệt bỏ qua cả khai báo. Trục y thì không bị giới hạn: y lớn hơn 1 làm phần tử đi quá điểm đích rồi quay lại, y nhỏ hơn 0 làm phần tử lùi nhẹ trước khi lao đi. Đó là cách tạo hiệu ứng Back như easeOutBack = cubic-bezier(0.34, 1.56, 0.64, 1), với đường cong này tiến trình đạt đỉnh khoảng 1,098, tức vượt đích chừng 10% trước khi dừng.
Công cụ tính vị trí quả bóng như thế nào
Với mỗi khung hình, công cụ biết thời gian đã trôi qua theo tỷ lệ x và cần tìm tiến trình y. Vì đường Bézier được mô tả theo một tham số t chứ không trực tiếp theo x, bước đầu là giải phương trình x(t) = x. Công cụ thử phương pháp Newton trước vì hội tụ rất nhanh, nếu đạo hàm quá nhỏ hoặc bước nhảy ra ngoài khoảng 0 đến 1 thì chuyển sang chia đôi khoảng, cách chậm hơn nhưng luôn hội tụ vì x(t) không giảm khi x1, x2 nằm trong 0 đến 1. Có t rồi thì thay vào y(t). Kết quả được đối chiếu với phép dò dày đặc 200.000 điểm trên nhiều đường cong, kể cả những đường cực đoan như (1, 0, 0, 1), sai khác lớn nhất dưới 0,00001.
Chọn đường cong nào cho từng loại chuyển động giao diện
Phần tử đi vào màn hình như menu, hộp thoại, thông báo thường hợp với nhóm ease-out (easeOutCubic, easeOutQuart): chuyển động nhanh ngay từ đầu nên giao diện có cảm giác phản hồi tức thì, rồi chậm lại để mắt kịp theo dõi. Phần tử rời màn hình hợp với ease-in vì nó tăng tốc và biến mất, người dùng không cần nhìn kỹ đoạn cuối. Chuyển động từ điểm này sang điểm khác trên màn hình, như thanh trượt hay tab gạch chân, hợp với ease-in-out. Nhóm Back có độ nảy nên dùng tiết chế cho nút bấm, huy hiệu, biểu tượng yêu thích. Nhóm Expo có phần đầu hoặc cuối gần như đứng yên, dễ khiến giao diện có cảm giác ì nếu thời lượng dài.
Chọn thời lượng bao nhiêu mili giây
Đường cong chỉ là một nửa câu chuyện, nửa còn lại là thời lượng. Thay đổi trạng thái nhỏ như đổi màu nút, hiện tooltip thường gọn trong khoảng 100 đến 200 ms. Phần tử có quãng di chuyển vừa như dropdown, hộp thoại thường nằm quanh 200 đến 350 ms. Chuyển cảnh lớn toàn màn hình có thể lâu hơn một chút. Đây là khoảng tham khảo trong nhiều hệ thống thiết kế chứ không phải quy chuẩn bắt buộc. Cách kiểm tra nhanh là chạy thử ở ô Thời lượng với vài giá trị khác nhau: đường cong có độ nảy lớn cần thời lượng dài hơn một chút để mắt kịp thấy cú bật, còn chuyển động lặp lại nhiều lần trong ngày nên ngắn để không gây sốt ruột.
Tôn trọng người dùng bật giảm chuyển động
Một số người bị chóng mặt hoặc buồn nôn khi giao diện có nhiều chuyển động lớn, đặc biệt là trượt, phóng to và hiệu ứng nảy. Các hệ điều hành đều có tùy chọn giảm chuyển động, và CSS đọc được tùy chọn này qua media query prefers-reduced-motion. Đoạn mã công cụ xuất ra đã kèm khối @media (prefers-reduced-motion: reduce) tắt transition và animation cho phần tử. Bạn có thể thay bằng chuyển động nhẹ hơn như đổi độ mờ thay cho trượt nếu hiệu ứng đó mang ý nghĩa. Bản thân trang công cụ cũng không tự chạy phần xem thử khi phát hiện máy bạn đang bật tùy chọn này.
Giới hạn cần biết
Công cụ chỉ tạo hàm cubic-bezier, không tạo các hàm timing dạng bậc thang steps() hay hàm linear() nhiều điểm mới có trong CSS gần đây, nên không mô phỏng được chuyển động nảy nhiều lần như quả bóng rơi. Các mẫu Sine, Quad, Cubic, Quart, Expo, Circ, Back là bản xấp xỉ bằng một đường Bézier của các hàm toán học gốc theo bộ giá trị phổ biến của easings.net, nên sẽ hơi khác các thư viện JavaScript tính trực tiếp bằng công thức. Tung độ trong công cụ được giới hạn từ -2 đến 3 để đồ thị còn đọc được, dù CSS chấp nhận giá trị lớn hơn. Với các thuộc tính như opacity, phần vượt biên bị trình duyệt kẹp lại nên không nhìn thấy độ nảy.
Câu hỏi thường gặp (FAQ)
Cubic bezier trong CSS là gì?
Là hàm timing mô tả tốc độ thay đổi của một transition hoặc animation theo thời gian, dựa trên đường Bézier bậc ba đi từ (0, 0) tới (1, 1) với hai điểm điều khiển do bạn chọn. Nó được dùng trong transition-timing-function, animation-timing-function và thuộc tính easing của Web Animations API.
ease, ease-in, ease-out, ease-in-out tương ứng với cubic-bezier nào?
linear là cubic-bezier(0, 0, 1, 1), ease là cubic-bezier(0.25, 0.1, 0.25, 1), ease-in là cubic-bezier(0.42, 0, 1, 1), ease-out là cubic-bezier(0, 0, 0.58, 1), ease-in-out là cubic-bezier(0.42, 0, 0.58, 1). Khi bạn tạo ra một đường cong trùng các giá trị này, công cụ sẽ báo tên từ khóa để bạn dùng cho gọn.
Vì sao trình duyệt bỏ qua cubic-bezier của tôi?
Nguyên nhân thường gặp nhất là x1 hoặc x2 nằm ngoài khoảng 0 đến 1, khi đó cả khai báo không hợp lệ. Nguyên nhân khác là thiếu một số, dùng dấu phẩy thập phân kiểu Việt Nam (0,5 thay vì 0.5) hoặc có ký tự lạ. Dán giá trị vào ô Dán giá trị có sẵn, công cụ sẽ chỉ ra lỗi cụ thể.
Làm sao tạo hiệu ứng nảy (bounce) bằng cubic-bezier?
Kéo điểm P2 lên cao hơn đường y = 1, ví dụ cubic-bezier(0.34, 1.56, 0.64, 1), phần tử sẽ vượt quá điểm đích rồi quay về một lần. Một đường Bézier chỉ tạo được một lần vượt ở mỗi đầu, muốn nảy nhiều lần như quả bóng rơi thì cần @keyframes nhiều bước hoặc hàm linear() có nhiều điểm.
Có dùng được cubic-bezier cho animation lặp vô hạn không?
Được. Hàm timing áp cho từng chu kỳ, hoặc chính xác hơn là cho từng đoạn giữa hai keyframe liên tiếp. Nếu @keyframes có nhiều mốc phần trăm, đường cong được áp lại cho mỗi đoạn, nên nhiều khi bạn cần đường cong nhẹ hơn so với khi dùng cho transition.
Dùng cubic-bezier trong JavaScript như thế nào?
Với Web Animations API, truyền chuỗi vào tùy chọn easing: el.animate(keyframes, { duration: 800, easing: "cubic-bezier(0.34, 1.56, 0.64, 1)" }). Công cụ có sẵn đoạn mã mẫu này trong phần Biến CSS, JavaScript, Tailwind.
Dùng trong Tailwind CSS được không?
Được, qua cú pháp giá trị tùy ý: ease-[cubic-bezier(0.34,1.56,0.64,1)] cùng với duration-[800ms]. Lưu ý không để khoảng trắng trong ngoặc vuông. Nếu dùng nhiều lần, nên khai báo thành giá trị riêng trong cấu hình theme cho gọn.
Các mẫu easeOutCubic, easeInOutQuart lấy từ đâu?
Đó là tên các hàm easing của Robert Penner, được dùng rộng rãi trong thiết kế chuyển động. Công cụ dùng bộ giá trị cubic-bezier xấp xỉ phổ biến trên easings.net. Vì là xấp xỉ bằng một đường Bézier, chúng gần giống chứ không trùng tuyệt đối với công thức toán gốc.
Kéo điểm điều khiển bằng bàn phím được không?
Được. Nhấn Tab để đưa focus vào điểm P1 hoặc P2, dùng mũi tên trái phải để đổi x, mũi tên lên xuống để đổi y, mỗi lần 0,01. Giữ Shift để bước 0,1. Ngoài ra có bốn ô nhập số x1, y1, x2, y2 để gõ trực tiếp.
Vì sao độ nảy không hiện khi tôi dùng cho opacity?
Opacity chỉ nhận giá trị từ 0 đến 1, phần tiến trình vượt quá bị trình duyệt kẹp lại nên bạn chỉ thấy phần tử hiện rõ sớm hơn chứ không thấy nảy. Hiệu ứng vượt biên nhìn rõ nhất với transform như translate, scale, rotate.
Nên chọn thời lượng bao nhiêu?
Không có con số đúng cho mọi trường hợp. Thay đổi nhỏ như đổi màu thường khoảng 100 đến 200 ms, phần tử trượt ra như menu, hộp thoại khoảng 200 đến 350 ms. Hãy chạy thử vài giá trị trong ô Thời lượng và chọn mức khiến giao diện có cảm giác nhanh nhưng vẫn theo dõi được.
Công cụ có lưu hay gửi dữ liệu của tôi đi đâu không?
Không. Toàn bộ việc tính toán, vẽ đồ thị và xem thử diễn ra trong trình duyệt của bạn, không có dữ liệu nào được gửi lên máy chủ.
Có tạo được hàm steps() hoặc linear() nhiều điểm không?
Không, công cụ chỉ làm việc với cubic-bezier. steps() tạo chuyển động nhảy bậc, còn linear() với nhiều điểm là cú pháp mới cho phép mô phỏng nảy nhiều lần, cả hai nằm ngoài phạm vi của công cụ này.
Từ khóa liên quan
- cubic bezier css
- cubic-bezier generator
- css easing generator
- tạo cubic bezier online
- đường cong easing css
- transition timing function
- animation timing function
- ease in out css
- ease out back css
- easing functions css
- css bounce easing
- cubic-bezier là gì
- hiệu ứng chuyển động css
- css transition mượt
- easings.net cubic bezier
- web animations api easing
- tailwind cubic bezier
- prefers-reduced-motion
- chỉnh easing animation
