Tạo các đường cong ảnh động phức tạp trong CSS bằng hàm gia tốc tuyến tính()

Ra mắt linear(), một hàm gia tốc trong CSS có chức năng nội suy tuyến tính giữa các điểm của hàm này, cho phép bạn tạo lại hiệu ứng độ nảy và hiệu ứng lò xo.

Gia tốc trong CSS

Khi tạo ảnh động hoặc chuyển đổi các phần tử trong CSS, bạn kiểm soát tốc độ thay đổi của giá trị bằng hàm gia tốc sử dụng các thuộc tính animation-timing-function và transition-timing-function.

Có một số từ khoá có thể dùng làm giá trị đặt trước trong CSS, cụ thể là linear, ease, ease-in, ease-out và ease-in-out. Để tạo đường cong gia tốc của riêng bạn, hãy sử dụng hàm cubic-bezier() hoặc thực hiện phương pháp dựa trên từng bước bằng hàm gia tốc steps().

Khi được sử dụng một cách thích hợp, gia tốc mang lại cho thành phần ảnh động cảm giác về trọng số vì nó có vẻ như tạo ra động lượng.

Không thể tạo các đường cong phức tạp như hiệu ứng nảy hoặc hiệu ứng lò xo trong CSS, nhưng nhờ linear() giờ đây, bạn có thể tạo các đường cong này gần đúng một cách đáng kinh ngạc.

Giới thiệu về linear()

Một cách mới để xác định tốc độ trong CSS là sử dụng linear(). Hàm này chấp nhận một số điểm dừng, phân tách bằng dấu phẩy. Mỗi điểm dừng là một số duy nhất trong khoảng từ 0 đến 1. Ở giữa mỗi điểm dừng, phép nội suy được thực hiện theo tuyến tính, giải thích tên của hàm.

animation-timing-function: linear(0, 0.25, 1);

Theo mặc định, các điểm dừng này được trải đều theo khoảng cách đều nhau. Trong đoạn mã trước, điều đó có nghĩa là giá trị đầu ra của 0.25 sẽ được sử dụng ở mốc 50%.

Biểu đồ của linear(0, 0.25, 1) được trực quan hoá sẽ có dạng như sau:

Nếu không muốn trải đều các điểm dừng, bạn có thể tuỳ ý chuyển theo thời lượng dừng. Khi chuyển một giá trị dưới dạng thời lượng dừng, bạn xác định điểm bắt đầu của giá trị đó:

animation-timing-function: linear(0, 0.25 75%, 1);

Ở đây, giá trị đầu ra là 0.25 sẽ không được dùng tại nhãn 50% mà sẽ được dùng ở 75%.

Khi chỉ định hai giá trị làm độ dài điểm dừng, bạn xác định cả điểm bắt đầu và điểm kết thúc:

animation-timing-function: linear(0, 0.25 25% 75%, 1);

Giá trị đầu ra là 0,25 sẽ được sử dụng từ 25% đến 75% theo thời gian.

Tạo đường cong phức tạp bằng hàm tuyến tính()

Mặc dù ví dụ ở trên về tốc độ rất đơn giản, nhưng bạn có thể sử dụng linear() để tạo lại các hàm gia tốc phức tạp theo cách rất đơn giản, đồng thời giảm độ chính xác.

Hãy dùng đường cong gia tốc thoát, một loại tốc độ không thể biểu thị trực tiếp trong CSS, được xác định bằng JavaScript:

function easing(pos) {
  const t = 7.5625;
  const e = 2.75;
  return pos < 1 / e
    ? t * pos * pos
    : pos < 2 / e
    ? t * (pos -= 1.5 / e) * pos + 0.75
    : pos < 2.5 / e
    ? t * (pos -= 2.25 / e) * pos + 0.9375
    : t * (pos -= 2.625 / e) * pos + 0.984375;
}

Mặc dù mã này có thể không cho bạn biết nhiều thông tin, nhưng một hình ảnh trực quan có thể cho bạn biết. Sau đây là kết quả được minh hoạ dưới dạng đường cong màu xanh dương:

Bạn có thể đơn giản hoá đường cong này bằng cách thêm số điểm dừng vào đó. Tại đây, mỗi chấm màu xanh lục biểu thị một điểm dừng:

Khi được truyền vào linear(), kết quả là một đường cong hơi giống với đường cong ban đầu nhưng hơi thô hơn một chút ở các cạnh.

So sánh hộp động màu xanh lục với hộp màu xanh dương, bạn có thể thấy rằng hộp này không mượt mà.

Tuy nhiên, nếu thêm đủ điểm dừng, bạn có thể ước tính đường cong ban đầu khá chính xác. Sau đây là phiên bản cập nhật:

Chỉ cần tăng gấp đôi số điểm dừng, bạn đã có được kết quả suôn sẻ.

Mã dùng để tạo ảnh động sẽ có dạng như sau:

animation-timing-function: linear(
  /* Start to 1st bounce */
  0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
  /* 1st to 2nd bounce */
  0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
  /* 2nd to 3rd bounce */
  0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
  /* 3rd bounce to end */
  0.988, 0.984, 0.988, 1
);

Công cụ trợ giúp

Việc tạo danh sách các điểm dừng này theo cách thủ công sẽ rất cồng kềnh. Rất may, Jake và Adam đã tạo một công cụ giúp bạn chuyển đổi đường cong gia tốc sang đường cong gia tốc linear().

Công cụ này lấy hàm gia tốc JavaScript hoặc đường cong SVG làm dữ liệu đầu vào và xuất ra đường cong được đơn giản hoá bằng cách sử dụng linear(). Dùng thanh trượt để kiểm soát số điểm dừng bạn muốn và độ chính xác của các điểm dừng đó.

Ở trên cùng bên phải, bạn cũng có thể chọn một trong các giá trị đặt trước: Spring, Nhấn, Simple elastic hoặc Material Design được nhấn mạnh.

Hỗ trợ Công cụ cho nhà phát triển

Có sẵn trong Công cụ cho nhà phát triển được hỗ trợ để trực quan hoá và chỉnh sửa kết quả của linear(). Nhấp vào biểu tượng để hiển thị chú giải công cụ tương tác cho phép bạn kéo quanh các điểm dừng.

Tính năng Công cụ cho nhà phát triển này được cung cấp trong Công cụ cho nhà phát triển có Chrome 114.

Ảnh chụp của Howie Mapson trên Unsplash