Trình tạo CSS Cubic Bezier

Tài liệu Cubic Bezier

Đường cong Bezier khối là gì?

A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.

Cú pháp CSS

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

Các trường hợp sử dụng phổ biến

Chuyển tiếp hoạt hình:Tạo hoạt ảnh mượt mà cho các yếu tố thay đổi thuộc tính.
Hiệu ứng cuộn:Kiểm soát tốc độ của hoạt ảnh cuộn.
Các yếu tố tương tác:Xác định cách các phần tử phản hồi với các tương tác của người dùng như di chuột hoặc nhấp chuột.
Thiết kế chuyển động:Tạo các chuỗi chuyển động phức tạp cho các yếu tố giao diện người dùng.

Các chức năng nới lỏng phổ biến

Ease (default)

Bắt đầu chậm, tăng tốc nhanh và sau đó giảm tốc độ trở lại.

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

Linear

Tốc độ không đổi từ đầu đến cuối.

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

Ease-in

Bắt đầu chậm, sau đó tăng tốc.

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

Ease-out

Bắt đầu nhanh, sau đó giảm tốc.

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

Mẹo tạo đường cong tùy chỉnh

Giữ x giá trị từ 0 đến 1:Các giá trị nằm ngoài phạm vi này có thể gây ra hành vi không mong muốn.
Hình dung đường cong:Sử dụng biểu đồ tương tác để hiểu các thay đổi ảnh hưởng đến hoạt ảnh như thế nào.
Kiểm tra với các yếu tố thực:Luôn xem trước đường cong của bạn với các thành phần giao diện người dùng thực tế để đảm bảo nó cảm thấy phù hợp.
Lưu cài đặt trước:Đánh dấu các đường cong hữu ích cho các dự án trong tương lai.