Trình tạo CSS Cubic-Bezier

Trình tạo CSS Cubic-Bezier là gì?

Trình tạo CSS cubic-bezier là một trình chỉnh sửa trực quan miễn phí cho hàm định thời cubic-bezier() được dùng bởi các chuyển tiếp và hoạt ảnh CSS, dành cho lập trình viên front-end và nhà thiết kế chuyển động. Chọn một preset như ease, linear, ease-in, ease-out hoặc ease-in-out, hoặc tự tinh chỉnh hai điểm điều khiển: giá trị x bị giới hạn trong khoảng hợp lệ 0–1, trong khi giá trị y có thể vượt quá 1 hoặc xuống dưới 0 để tạo overshoot và anticipation. Bản xem trước vẽ đường cong trên một hình vuông đơn vị để bạn đọc được tốc độ tăng và giảm chỉ trong nháy mắt, và khai báo chính xác cubic-bezier(x1, y1, x2, y2) được tạo ra để bạn sao chép. Hãy dùng nó mỗi khi một từ khóa có sẵn cảm thấy quá chung chung và bạn muốn một chuyển động nhanh nhẹn hơn, đàn hồi hơn hoặc khoan thai hơn.

Cách sử dụng Trình tạo CSS Cubic-Bezier

1. Mở Cài đặt và chọn một preset khởi đầu — ease, linear, ease-in, ease-out hoặc ease-in-out — để khởi tạo các điểm điều khiển.
2. Kéo hai tay nắm tròn trên bản xem trước đường cong để định hình lại easing, hoặc nhập giá trị chính xác vào các ô x1, y1, x2 và y2.
3. Giữ x1 và x2 trong khoảng 0 đến 1; đẩy y1 hoặc y2 lên trên 1 hoặc xuống dưới 0 để thêm overshoot hay anticipation cho chuyển động.
4. Đọc đường cong so với đường cơ sở linear nét đứt để đánh giá cách easing tăng tốc và giảm tốc.
5. Sao chép giá trị cubic-bezier() được tạo ra và dán vào transition-timing-function hoặc animation-timing-function của bạn.

Ví dụ

x1 0.25, y1 0.1, x2 0.25, y2 1

cubic-bezier(0.25, 0.1, 0.25, 1)

x1 0, y1 0, x2 0.58, y2 1

cubic-bezier(0, 0, 0.58, 1)

x1 0.34, y1 1.56, x2 0.64, y2 1

cubic-bezier(0.34, 1.56, 0.64, 1)

Câu hỏi thường gặp

Bốn con số cubic-bezier có nghĩa là gì?

Chúng là tọa độ của hai điểm điều khiển: x1, y1 cho điểm thứ nhất và x2, y2 cho điểm thứ hai. Đường cong luôn bắt đầu tại (0,0) và kết thúc tại (1,1); các điểm điều khiển uốn cong nó ở khoảng giữa, điều này quyết định cách thuộc tính được hoạt ảnh tăng tốc và giảm tốc theo thời gian.

Tại sao tôi không thể đặt x1 hoặc x2 trên 1?

Đặc tả CSS yêu cầu tọa độ x (thời gian) của cả hai điểm điều khiển phải nằm trong khoảng 0 đến 1, để hàm định thời vẫn là một ánh xạ hợp lệ từ tiến trình sang đầu ra. Công cụ này tự động giới hạn các ô x và các tay nắm kéo vào khoảng đó. Tuy nhiên, giá trị y có thể vượt quá 1 hoặc xuống dưới 0 để tạo overshoot hoặc anticipation.

Làm thế nào để tạo một easing nảy hoặc đàn hồi?

Đẩy một trong các giá trị y lên trên 1 (để overshoot ở cuối) hoặc xuống dưới 0 (để anticipation ở đầu). Ví dụ cubic-bezier(0.34, 1.56, 0.64, 1) vượt quá đích trước khi ổn định, mang lại cảm giác như lò xo mà không cần bất kỳ JavaScript nào.

Tôi dùng giá trị được tạo ra ở đâu?

Dán nó làm giá trị của transition-timing-function hoặc animation-timing-function — ví dụ transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Nó thay thế các từ khóa như ease hoặc ease-in-out bằng đường cong tùy chỉnh của bạn.

Dữ liệu của tôi có được gửi đến máy chủ không?

Không. Toàn bộ trình chỉnh sửa chạy trong trình duyệt của bạn bằng JavaScript — các điểm điều khiển và đường cong được tính toán cục bộ và không bao giờ được tải lên, nên nó hoạt động riêng tư và thậm chí ngoại tuyến sau khi trang đã tải xong.