Cubic-bezier editor

Tính năng của Cubic-bezier editor

• 01

  Kéo đường cong, xem chuyển động

  Hai tay cầm có thể kéo được điều khiển sự khởi đầu và kết thúc của bezier. Hoạt ảnh quả bóng kèm theo phát lại đường cong ở khoảng thời gian bạn chọn, vì vậy bạn có thể xem trước cảm giác quá mức và ease-out mà không cần rời khỏi trang.

• 02

  Tất cả các preset tiêu chuẩn

  Bắt đầu từ ease, linear, ease-in, ease-out và ease-in-out của CSS — sau đó điều chỉnh. Các công tắc preset quay trở lại "custom" tự động khi bạn di chuyển một tay cầm.

• 03

  Sao chép CSS bằng một clic

  Giá trị cubic-bezier() cập nhật trực tiếp với độ chính xác hai chữ số thập phân, sẵn sàng thả vào transition-timing-function hoặc animation-timing-function.

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

Tại sao các giá trị Y có thể vượt quá 1 hoặc dưới 0?

Các điểm điều khiển Bezier bên ngoài phạm vi 0–1 tạo ra các hiệu ứng overshoot và undershoot — đường cong vượt quá điểm cuối của nó trước khi ổn định. Đây là cách tạo ra các đường cong easing "bouncy"; trục X vẫn phải ở trong 0–1.

Làm cách nào để sử dụng đầu ra?

Sao chép chuỗi cubic-bezier(...) và dán nó vào bất kỳ giá trị transition-timing-function hoặc animation-timing-function CSS nào. Nó hoạt động trong mọi trình duyệt hiện đại.

Có phải bản xem trước chính xác với những gì CSS sẽ làm không?

Có — bản xem trước làm động một quả bóng từ 0 đến 100% bằng cách sử dụng công thức cubic bezier tương tự như trình duyệt sử dụng cho các quá trình chuyển đổi. Thanh trượt khoảng thời gian cho phép bạn cảm nhận các đường cong chậm so với nhanh trước khi cam kết.

Ease-in-out thực sự có ý nghĩa gì?

Ease-in-out bắt đầu chậm, tăng tốc độ ở giữa và chậm lại một lần nữa ở cuối — đường cong cubic-bezier(0.42, 0, 0.58, 1). Nó là mặc định cho hầu hết chuyển động UI được đánh bóng vì nó phản ánh cách các vật thể vật lý thực tế tăng tốc và giảm tốc.