Tạo easing cubic-bezier

Công cụ tạo easing cubic-bezier là gì?

*Hàm easing* trong CSS điều khiển cách một animation tăng tốc và giảm tốc trong suốt thời lượng của nó. Các từ khóa ease, ease-in, ease-out và ease-in-out là lối tắt cho bốn đường cong cụ thể. Với mọi thứ ngoài bốn đường cong đó, CSS cho bạn cubic-bezier(): một hàm nhận bốn con số và vẽ ra đường cong tùy chỉnh.

Bốn con số đó là tọa độ của hai điểm điều khiển (x1, y1, x2, y2). Chúng rất khó viết tay vì thay đổi nhỏ cũng gây hiệu ứng thị giác lớn, và một chút vượt quá tạo ra chuyển động *nảy* mà bạn không thể thấy chỉ qua các con số. Một trình chỉnh sửa trực quan cho phép bạn kéo tay nắm và xem đường cong phản hồi, nhanh hơn nhiều so với chỉnh từng số thập phân.

Trình chỉnh sửa của Coddy vẽ đường cong theo thời gian thực, cho một quả bóng xem trước chuyển động theo easing của bạn, và có các mẫu cho những kiểu phổ biến: các từ khóa CSS, đường cong chuẩn của Material Design, kiểu nảy khi kết thúc và kiểu lùi lại rồi vượt quá. Sao chép chuỗi cubic-bezier() và dán vào CSS: mọi thứ chạy hoàn toàn trong trình duyệt.

Những điều cần biết về easing cubic-bezier

• Đường cong biểu diễn *tiến độ* theo *thời gian*. Thời gian chạy từ trái sang phải (0 → 1); tiến độ chạy từ dưới lên trên (0 → 1). Một đường chéo thẳng là linear: tiến độ bằng nhau trên mỗi đơn vị thời gian.
• Tọa độ X của cả hai điểm điều khiển bị giới hạn trong khoảng 0..1. Tọa độ Y có thể nhỏ hơn 0 hoặc lớn hơn 1: đó là cách tạo ra easing nảy, lùi lại và vượt quá (animation thoáng vượt qua đích hoặc bắt đầu ngược hướng).
• Đường cong *ease-out* (phần lớn tiến độ diễn ra sớm) cho cảm giác phản hồi nhanh và dứt khoát, hợp với hiệu ứng xuất hiện và phản ứng của nút. Đường cong *ease-in* (tiến độ diễn ra muộn) cho cảm giác ì ạch, thường không hợp với giao diện nhưng hữu ích cho hiệu ứng biến mất.
• Easing *chuẩn* được Material Design khuyến nghị là cubic-bezier(0.4, 0, 0.2, 1): bắt đầu nhanh, kết thúc chậm. iOS dùng một đường cong gần với cubic-bezier(0.42, 0, 0.58, 1) (ease-in-out).
• Với animation ngắn (≤200ms), phần lớn easing trông khá giống nhau: thời lượng quan trọng hơn đường cong. Với animation dài hơn (từ 300ms trở lên), easing là thứ khiến chuyển động trông chỉn chu hay cẩu thả.

Cách thiết kế một easing cubic-bezier

1. 1

   Bắt đầu từ một mẫu có sẵn

   Nhấn vào mẫu gần với cảm giác bạn muốn. *Material standard* và *Bouncy out* là điểm khởi đầu tốt cho chuyển động giao diện; *ease-out* là lựa chọn mặc định an toàn cho hiệu ứng xuất hiện.

2. 2

   Kéo hai tay nắm

   Hai tay nắm màu xanh mòng két là hai điểm điều khiển. Kéo tay nắm thứ nhất để chỉnh cách animation *bắt đầu*; kéo tay nắm thứ hai để chỉnh cách nó *kết thúc*. Kéo tay nắm lên trên mép trên sẽ tạo hiệu ứng vượt quá.

3. 3

   Chọn thời lượng và phát lại

   Chọn thời lượng sát với animation thật của bạn. Chuyển cảnh giao diện thường kéo dài từ 150 đến 300ms; chuyển động nhấn mạnh từ 400 đến 600ms. Nhấn *Phát lại* để chạy lại bản xem trước với thời lượng mới.

4. 4

   Tinh chỉnh bằng ô nhập số

   Để có giá trị chính xác, gõ vào các ô X1/Y1/X2/Y2 bên dưới đường cong. Y có thể nhỏ hơn 0 hoặc lớn hơn 1, còn X luôn trong khoảng 0..1.

5. 5

   Sao chép CSS

   Nhấn *Sao chép* để lấy toàn bộ quy tắc transition. Đưa nó vào stylesheet và thay transform bằng thuộc tính bạn đang tạo animation.

Tra cứu nhanh cubic-bezier

Các easing phổ biến và giá trị cubic-bezier đằng sau chúng. Cả bốn từ khóa dưới đây đều là tên gọi khác của những đường cong cubic-bezier cụ thể.

Ví dụ cubic-bezier để thử

.btn {    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);}.btn:hover {    transform: translateY(-2px);}

.card {    transition: transform 350ms cubic-bezier(0.18, 0.89, 0.32, 1.28);}

.hero {    transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);}

Lỗi thường gặp với easing

• Dùng ease-in cho hiệu ứng xuất hiện. Nó bắt đầu chậm và kết thúc nhanh, ngược với cảm giác phản hồi nhanh. Hãy dùng ease-out thay thế.
• Chọn linear cho chuyển động giao diện vì nghĩ nó trung tính. Chuyển động với vận tốc không đổi trông máy móc; nó đúng cho thanh tiến độ và biểu tượng xoay nhưng hiếm khi đúng cho những thứ khác.
• Lạm dụng hiệu ứng vượt quá ở mọi transition. Easing nảy là điểm nhấn, không phải mặc định: dùng ở khắp nơi sẽ trông hỗn loạn.
• Cố sửa cảm giác chậm chạp bằng cách đổi easing thay vì đổi thời lượng. Nếu ease-out 600ms trông ì ạch, hãy thử 300ms trước.
• Quên rằng tọa độ X của cả hai tay nắm bị giới hạn trong khoảng 0..1. Kéo tay nắm ra ngoài mép trái hoặc phải của khung không có tác dụng gì: chỉ Y mới vượt ra ngoài khung được.

Câu hỏi thường gặp về cubic-bezier