Máy phát điện khối Bezier

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

Hai trục hoạt động có mục đích khác nhau. x1 và x2 luôn nằm trong khoảng từ 0 đến 1, bởi vì đó là những gì đặc tả CSS thực sự yêu cầu ở hàm định thời cub-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: kéo một tay cầm phía trên đỉnh hộp hoặc bên dưới đáy hộp và đường cong vượt quá điểm đầu hoặc điểm cuối của nó, đó chính xác là cách các hiệu ứng kiểu lò xo và kiểu nảy được tạo ra từ một đường cong nới lỏng duy nhất.

Việc nhìn thấy một con số không giống như nhìn thấy chuyển động, do đó, bản xem trước chạy hai quả bóng giống hệt nhau cạnh nhau trên một vòng lặp: một quả bóng di chuyển bằng đường cong tùy chỉnh của bạn, quả bóng 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 đường cong nới lỏng có thực sự tạo ra cảm giác mà bạn muốn hay không trước khi nó đạt đến biểu định kiểu. Các trang đặt trước — những con số thực đằng sau từ khóa dễ dàng vào của CSS, một ước lượng vượt quá trung thực mà một số người gọi là thoát và đường cong tiêu chuẩn Thiết kế Vật liệu đã xuất bản của Google — là những điểm bắt đầu sẵn sàng mà bạn có thể kéo từ đó thay vì các điểm kiểm soát trống.

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