Đường cong nới lỏng CSS kiểu Bounce
Thiết kế hàm định thời CSS cub-bezier() tùy chỉnh bằng cách kéo hai điểm điều khiển, xem trước trực tiếp dựa trên tham chiếu tuyến tính, sau đó sao chép giá trị sẵn sàng.
kết quả
Trang này mở trình tạo với x1=0,68, y1=-0,55, x2=0,265, y2=1,55 đã được tải — một đường cong vượt mức mà một số thư viện nới lỏng gắn nhãn easyOutBack. Số âm y1 và y2 ở trên 1 chính xác là lý do tại sao bản xem trước hoạt ảnh bên dưới lùi về quá khứ bắt đầu và vượt quá kết thúc trước khi ổn định; kéo tay cầm hoặc chỉnh sửa các con số để tạo hiệu ứng mạnh hơn hoặc nhẹ nhàng hơn.
Thành thật mà nói đây là gì: một đường cong cub-bezier() chỉ có hai điểm kiểm soát, do đó, nó có thể gần đúng với một chuyển động vượt quá và ổn định, không phải là một chuyển động vật lý nảy nhiều lần thực sự với một số bước nhảy giảm dần. Để có hiệu ứng nảy bóng theo đúng nghĩa đen, bạn cần nhiều khung hình chính hoặc các phân đoạn step() được nối với nhau - đường cong này là đường cong gần nhất mà một hàm định thời gian chuyển tiếp đơn giản có thể có trong một dòng.
Mức vượt quá duy nhất đó vẫn chính xác là điều mà hầu hết các giao diện người dùng có độ nảy đều mong muốn: một nút bật lên một chút so với kích thước nghỉ của nó, một chế độ vượt quá trước khi ổn định, một thẻ bật vào đúng vị trí. Sao chép giá trị nguyên trạng để tạo cảm giác thú vị hoặc giảm y1 về 0 và y2 về 1 để quay lại mức vượt quá.