CSS cubic-bezier() function sử dụng như thế nào ?

CSS cubic-bezier() function là một hàm tích hợp trong CSS, định nghĩa một đường cong Cubic Bezier. Đường cong Bezier là đường cong được định nghĩa toán học được sử dụng trong các ứng dụng đồ họa 2D như Inkspace, Adobe Illustrator, vv. Hàm này được sử dụng cho chuyển tiếp mượt mà và tùy chỉnh. Nó được định nghĩa bởi bốn điểm (P0, P1, P2 và P3).

Các điểm P0 và P3 (gọi là nhấn mạch) là điểm bắt đầu và kết thúc, và các điểm P1 và P2 (gọi là tay cầm) là các điểm giữa. Đối với đường cong Bezier CSS, các điểm P0 và P3 luôn nằm trong cùng một điểm. P0 ở (0,0) thể hiện trạng thái ban đầu và thời điểm ban đầu, và P3 ở (1,1) thể hiện trạng thái cuối cùng và thời điểm cuối cùng. Điều này có nghĩa là các tham số được truyền vào hàm cubic-bezier() chỉ có thể từ 0 đến 1.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS cubic-bezier() function là gì ?

CSS cubic-bezier() function là một hàm CSS chuyển tiếp, nó được sử dụng để định nghĩa các đường cong Bezier tùy chỉnh cho các hiệu ứng chuyển tiếp. Điều này cho phép sử dụng các giá trị khác nhau để định nghĩa các chuyển tiếp khác nhau. Hàm này được sử dụng với thuộc tính transition-timing-function hoặc animation-timing-function.

CSS cubic-bezier() function có thể được sử dụng bởi các lập trình viên và nhà thiết kế web để tạo ra các hiệu ứng chuyển động tùy chỉnh cho các trang web của họ. Nó cũng có thể được sử dụng bởi các nhà phát triển ứng dụng để tạo ra các hiệu ứng chuyển động tùy chỉnh trong các ứng dụng của họ.

Hàm cubic-bezier() function trong CSS định nghĩa một đường cong Bezier tùy chỉnh. Nó cho phép bạn tạo ra các hiệu ứng chuyển động mượt mà và tùy chỉnh cho các phần tử HTML trên trang web của bạn. Hàm này được sử dụng với thuộc tính transition-timing-function hoặc animation-timing-function.

Hướng dẫn CSS cubic-bezier() function là gì

Để sử dụng hàm cubic-bezier() function trong CSS, bạn cần biết cú pháp của nó. Hàm này chấp nhận bốn giá trị số bắt buộc là P0, P1, P2 và P3. Giá trị của x1 và x2 phải nằm trong khoảng từ 0 đến 1, nếu không giá trị sẽ bị vô hiệu hóa. Nếu bạn truyền các tham số không nằm trong khoảng này, hàm sẽ được đặt thành giá trị mặc định, tức là chuyển tiếp tuyến tính có giá trị cubic-bezier(0, 0, 1, 1).

CSS cubic-bezier() function cho phép bạn chỉ định một đường cong Bézier bậc ba. Đường cong này có thể được sử dụng để điều chỉnh tốc độ của một hoạt ảnh hoặc chuyển động.

Giá trị mặc định của thuộc tính này là cubic-bezier(0.25, 0.15, 0.25, 0.65), có nghĩa là đường cong sẽ bắt đầu chậm, tăng tốc dần dần, sau đó chậm lại trước khi kết thúc.

Để chỉ định một đường cong Bézier bậc ba, bạn có thể sử dụng bốn giá trị số. Giá trị đầu tiên đại diện cho điểm đầu của đường cong, giá trị thứ hai đại diện cho điểm kiểm soát thứ nhất, giá trị thứ ba đại diện cho điểm kiểm soát thứ hai và giá trị thứ tư đại diện cho điểm cuối của đường cong. Giá trị này phải là số thực nằm trong khoảng từ 0 đến 1.

Ví dụ sử dụng CSS cubic-bezier() function

// Để tạo một đường cong Bézier bậc ba bắt đầu nhanh chóng, tăng tốc dần dần, sau đó chậm lại trước khi kết thúc
div {
  animation: my-animation 1s cubic-bezier(0.65, 0.05, 0.35, 0.95);
}

Ví dụ này sẽ tạo ra một hoạt ảnh 1 giây với đường cong Bézier bậc ba bắt đầu nhanh chóng, tăng tốc dần dần, sau đó chậm lại trước khi kết thúc.

Dưới đây là một số ví dụ cụ thể về cách sử dụng CSS cubic-bezier() function:

Để tạo một đường cong Bézier bậc ba bắt đầu nhanh chóng, tăng tốc dần dần, sau đó chậm lại trước khi kết thúc, bạn có thể sử dụng cubic-bezier(0.65, 0.05, 0.35, 0.95);.

div {
  animation: my-animation 1s cubic-bezier(0.65, 0.05, 0.35, 0.95);
}

Để tạo một đường cong Bézier bậc ba bắt đầu chậm, tăng tốc dần dần, sau đó chậm lại trước khi kết thúc, bạn có thể sử dụng cubic-bezier(0.25, 0.15, 0.25, 0.65);.

div {
  animation: my-animation 1s cubic-bezier(0.25, 0.15, 0.25, 0.65);
}

Để tạo một đường cong Bézier bậc ba bắt đầu chậm, tăng tốc dần dần, sau đó dừng lại đột ngột, bạn có thể sử dụng cubic-bezier(0.25, 0.15, 0.25, 0.0);.

div {
  animation: my-animation 1s cubic-bezier(0.25, 0.15, 0.25, 0.0);
}

Để tạo một đường cong Bézier bậc ba bắt đầu nhanh chóng, tăng tốc dần dần, sau đó dừng lại đột ngột, bạn có thể sử dụng cubic-bezier(0.65, 0.05, 0.35, 0.0);.

div {
  animation: my-animation 1s cubic-bezier(0.65, 0.05, 0.35, 0.0);
}

Ưu và Nhược điểm CSS cubic-bezier() function

Ưu Điểm

• Tùy chỉnh: Hàm cubic-bezier() cho phép bạn tạo ra các hiệu ứng chuyển động tùy chỉnh để tăng tính sáng tạo và tương tác trên trang web của bạn.
• Mượt mà: Với hàm CSS cubic-bezier() function, bạn có thể tạo ra các hiệu ứng chuyển động mượt mà trên trang web của mình, đảm bảo trải nghiệm người dùng tốt hơn.
• Dễ sử dụng: Hàm CSS cubic-bezier() function rất dễ sử dụng và có thể được thêm vào các thuộc tính transition-timing-function hoặc animation-timing-function của CSS.

Nhược Điểm

• Phức tạp: Việc định nghĩa các giá trị Bezier curve phù hợp có thể khó và tốn nhiều thời gian.
• Khó hiểu: Nếu không có kiến thức về đường cong Bezier, việc sử dụng hàm cubic-bezier() có thể khó hiểu.

Kết Thúc

Trong bài viết này, chúng ta đã đi qua khái niệm cơ bản của hàm cubic-bezier() trong CSS. Bạn có thể sử dụng hàm này để tạo ra các hiệu ứng chuyển động mượt mà và tùy chỉnh trên trang web của mình. Lưu ý rằng việc sử dụng hàm CSS cubic-bezier() function đòi hỏi kiến thức về đường cong Bezier, do đó, bạn cần phải tìm hiểu kỹ trước khi áp dụng vào thực tế.