Trình Tạo Cubic Bezier

Việc gõ tay cubic-bezier(x1, y1, x2, y2) và tải lại trang để kiểm tra cảm giác là một cách chậm chạp để tinh chỉnh hoạt ảnh. Trình tạo này khép kín vòng lặp đó: kéo bất kỳ tay cầm điểm điều khiển nào trên đường cong, hoặc nhập số chính xác vào các trường x1/y1/x2/y2, đường cong, chuỗi CSS có thể sao chép và bản xem trước hoạt ảnh trực tiếp đều cập nhật sau mỗi thay đổi — không cần bước build, không cần tải lại.

Hai trục hoạt động khác nhau một cách có chủ đích. x1 và x2 luôn được giới hạn trong khoảng từ 0 đến 1, vì đó là yêu cầu thực tế của đặc tả CSS đối với hàm timing cubic-bezier() — một giá trị nằm ngoài phạm vi đó đơn giản là không hợp lệ. y1 và y2 không có giới hạn như vậy: hãy kéo một tay cầm lên trên đỉnh hộp hoặc xuống dưới đáy, và đường cong sẽ vọt quá điểm bắt đầu hoặc kết thúc, đó chính là cách các hiệu ứng lò xo và nảy được tạo ra từ một đường cong easing duy nhất.

Nhìn thấy con số không giống với việc nhìn thấy chuyển động, vì vậy bản xem trước chạy song song hai bóng giống hệt nhau theo vòng lặp: một cái di chuyển theo đường cong tùy chỉnh của bạn, cái kia di chuyển với tốc độ tuyến tính không đổi. Xem chúng chạy đua là cách nhanh nhất để biết liệu một đường cong easing có thực sự tạo ra cảm giác bạn mong muốn hay không, trước khi nó được đưa vào stylesheet. Các trang cài đặt sẵn — con số thực sự đằng sau từ khóa ease-in-out của chính CSS, một xấp xỉ vọt quá trung thực mà một số người gọi là hiệu ứng nảy, và đường cong tiêu chuẩn Material Design được Google công bố — là những điểm khởi đầu sẵn sàng để bạn kéo tiếp, thay vì bắt đầu từ các điểm điều khiển trống.

Mọi thứ chạy cục bộ trong trình duyệt của bạn: không tải lên, không tài khoản, không cần vòng lặp gửi dữ liệu về máy chủ, và trình tạo tiếp tục hoạt động ngoại tuyến sau khi trang đã tải xong.