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 các hàm easing đượ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ế độ cubic-bezier, bạn kéo hai điểm điều khiển (hoặc nhập chúng) để tạo hình một đường cong: giá trị x nằm trong khoảng hợp lệ 0–1, còn giá trị y có thể vượt quá 1 hoặc xuống dưới 0 để tạo overshoot và anticipation. Chế độ steps() bao gồm định thời theo bậc với số bậc điều chỉnh được và một thuật ngữ nhảy — jump-start, jump-end, jump-none hoặc jump-both, trong đó step-start và step-end là steps(1, …). Bản xem trước hoạt ảnh trực tiếp phát easing hiện tại trên một khối di chuyển và co giãn trong khoảng thời gian bạn đặt, bạn có thể chồng bất kỳ preset nào dưới dạng đường cong bóng mờ để so sánh và nhập một chuỗi cubic-bezier() hay steps() có sẵn. Sao chép khai báo chính xác cho transition-timing-function hoặc animation-timing-function của bạn.

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

1. Chọn chế độ cubic-bezier() hoặc steps() ở trên cùng, hoặc mở Cài đặt để bắt đầu từ một preset như ease, ease-in-out hoặc linear.
2. Ở chế độ cubic-bezier, kéo hai tay nắm trên đồ thị hoặc nhập giá trị chính xác cho x1, y1, x2 và y2; đẩy y lên trên 1 để có overshoot.
3. Ở chế độ steps(), đặt số bậc và chọn một thuật ngữ nhảy (jump-start, jump-end, jump-none hoặc jump-both) để vẽ bậc thang.
4. Nhấn Phát để chạy hoạt ảnh trực tiếp trên khối di chuyển và co giãn, và điều chỉnh thời lượng theo giây để cảm nhận nhịp điệu.
5. Chọn một đường cong so sánh trong Cài đặt để chồng một preset dưới dạng bóng mờ trên cùng đồ thị, hoặc dán một giá trị vào Nhập rồi áp dụng.
6. Sao chép giá trị cubic-bezier() hoặc steps() được tạo ra 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.34, y1 1.56, x2 0.64, y2 1

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

chế độ steps, N 4, jump-end

steps(4, jump-end)

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.

Chế độ steps() dùng để làm gì?

steps() nhảy giữa một số lượng giá trị cố định thay vì nội suy mượt mà — hữu ích cho hoạt ảnh sprite, bộ đếm nhảy hoặc hiệu ứng từng khung hình. Đặt số bậc và một thuật ngữ nhảy: jump-start, jump-end, jump-none hoặc jump-both. step-start tương đương steps(1, jump-start) và step-end tương đương steps(1, jump-end).

Bản xem trước hoạt ảnh trực tiếp hoạt động thế nào?

Nhấn Phát và khối di chuyển dọc theo đường ray và co giãn bằng easing hiện tại của bạn, lặp đi lặp lại qua lại. Thay đổi thời lượng theo giây để làm chậm hoặc nhanh hơn; nó dùng hoạt ảnh CSS thuần túy với giá trị cubic-bezier() hay steps() của bạn làm hàm định thời.

Tôi có thể nhập một giá trị easing có sẵn không?

Có. Dán một giá trị cubic-bezier(...) hoặc steps(...) — hoặc một từ khóa như ease-in-out, step-start hay step-end — vào ô Nhập rồi áp dụng; trình chỉnh sửa phân tích nó trở lại thành các điểm điều khiển hoặc cài đặt bậc.

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.