Những điểm chính
- 01Kéo hai tay cầm điểm kiểm soát để khắc đường cong easing trực quan chứ không phải đoán các giá trị số.
- 02Một hoạt ảnh quả bóng trực tiếp phát lại thời gian để bạn có thể cảm nhận chuyển động trước khi cam kết với nó.
- 03Tất cả năm cài đặt sẵn CSS tích hợp (ease, linear, ease-in, ease-out, ease-in-out) đều có sẵn làm điểm khởi đầu.
- 04Giá trị cubic-bezier() được cập nhật trực tiếp với độ chính xác thập phân hai, sẵn sàng dán vào bất kỳ thuộc tính CSS nào.
Tại Sao Đường Cong Easing Tùy Chỉnh Quan Trọng Cho Chuyển Động Giao Diện Người Dùng
Các hàm thời gian tích hợp của CSS — ease, ease-in-out, linear — bao gồm rất nhiều, nhưng mọi giao diện người dùng có những lúc mặc định cảm thấy hơi sai. Một tooltip xuất hiện quá nhanh, một modal vượt quá mở, thanh tiến độ cảm thấy cơ học. Các đường cong Cubic-Bezier cho phép bạn điều chỉnh chuyển động để cảm thấy tự nhiên thay vì cơ học, nhưng bốn số trong cubic-bezier (0.4, 0, 0.2, 1) gần như không thể lý luận trực tiếp.
Trình Chỉnh Sửa Cubic-Bezier của Handytool biến những con số đó thành một đường cong trực quan với hai tay cầm có thể kéo được. Di chuyển một tay cầm và hoạt ảnh quả bóng phát lại ngay lập tức, vì vậy bạn có thể lặp lại bằng cách cảm nhận cho đến khi chuyển động khớp với ý định của bạn. Sau đó sao chép giá trị và thả nó vào CSS của bạn — xong.
Cách Thiết Kế Đường Cong Easing CSS
- 01
Bắt đầu từ một cài đặt sẵn
Chọn ease, linear, ease-in, ease-out hoặc ease-in-out làm cơ sở. Các tay cầm được snapping vào các vị trí chính xác cho mỗi cài đặt sẵn.
- 02
Kéo các tay cầm điểm kiểm soát
Mỗi tay cầm kiểm soát một đầu của đường cong — tay cầm bắt đầu định hình gia tốc ban đầu, tay cầm kết thúc định hình giảm tốc cuối cùng. Di chuyển một tay cầm chuyển cài đặt sẵn thành 'tùy chỉnh' tự động.
- 03
Xem hoạt ảnh quả bóng
Một quả bóng hoạt ảnh từ trái sang phải bằng đường cong của bạn. Điều chỉnh thanh trượt thời lượng để xem trước chuyển đổi chậm so với nhanh.
- 04
Thử nghiệm với overshoot
Kéo một tay cầm trục Y trên 1 hoặc dưới 0 để tạo overshoot và undershoot — hiệu ứng 'bouncy' làm cho một menu mở nhanh chóng.
- 05
Sao chép giá trị CSS
Nhấp vào Sao chép để lấy chuỗi cubic-bezier() và dán nó vào transition-timing-function hoặc animation-timing-function trong bảng kiểu của bạn.
Chạy Hoàn Toàn Trong Trình Duyệt Của Bạn
Trình chỉnh sửa là công cụ tự chứa trong trình duyệt — không có phông chữ, không có tập lệnh và không có dữ liệu nào được tải sau khi trang mở. Kéo tay cầm và xem trước hoạt ảnh hoạt động offline. Công thức cubic-bezier được sử dụng cho quả bóng xem trước giống với công thức mà các trình duyệt sử dụng cho các chuyển đổi CSS, vì vậy những gì bạn thấy trong trình chỉnh sửa chính xác là những gì bảng kiểu của bạn sẽ tạo ra.
Không có gì để cài đặt và không có gì để đăng ký. Đầu ra là một giá trị CSS duy nhất — dán nó và bạn xong.
Câu Hỏi Thường Gặp Về Trình Chỉnh Sửa Cubic-Bezier
Đường Cong Easing Cubic-Bezier Là Gì?
Nó là một đường cong toán học được xác định bởi hai điểm kiểm soát xác định cách chuyển đổi hoặc hoạt ảnh CSS tăng tốc theo thời gian. Bốn số trong cubic-bezier (x1, y1, x2, y2) đặt vị trí của những điểm kiểm soát đó.
Tại Sao Các Giá Trị Y Có Thể Vượt Quá 1 Hoặc Dưới 0?
Giá trị Y bên ngoài 0–1 tạo ra overshoot và undershoot — đường cong đi quá điểm cuối của nó trước khi định cư. Điều này tạo ra các đường cong easing 'bouncy'. Các giá trị X phải ở trong 0–1.
Làm Cách Nào Tôi 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.
Ease-In-Out Thực Sự Có Nghĩa Là Gì?
Ease-in-out bắt đầu chậm, tăng tốc ở giữa và chậm lại ở cuối — cubic-bezier (0.42, 0, 0.58, 1). Nó phản chiếu cách các đối tượng thực tế tăng tốc và giảm tốc và là lựa chọn mặc định cho hầu hết chuyển động giao diện người dùng đánh bóng.
Hoạt Ảnh Quả Bóng Xem Trước Có Chính Xác Với CSS Không?
Có — bản xem trước sử dụng công thức cubic bezier giống như trình duyệt áp dụng cho các chuyển đổi CSS. Thanh trượt thời lượng 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.