Các điểm cải tiến về API Ảnh động web trong Chromium 84

Điều phối ảnh động bằng lời hứa, cải thiện hiệu suất bằng ảnh động có thể thay thế, ảnh động mượt mà hơn bằng chế độ kết hợp, v.v.

Kevin Ellis
Kevin Ellis

Ngày xuất bản: 27 tháng 5 năm 2020

Khi được sử dụng đúng cách, ảnh động sẽ cải thiện khả năng nhận biết và ghi nhớ của người dùng về thương hiệu, hướng dẫn hành động của người dùng và giúp người dùng điều hướng ứng dụng của bạn – cung cấp ngữ cảnh trong không gian kỹ thuật số.

API Ảnh động trên web là một công cụ cho phép nhà phát triển viết ảnh động bắt buộc bằng JavaScript. Nó được viết để làm cơ sở cho cả việc triển khai ảnh động và chuyển đổi CSS, đồng thời cho phép phát triển các hiệu ứng trong tương lai, cũng như các hiệu ứng hiện có được soạn và định thời gian.

Mặc dù FirefoxSafari đã triển khai toàn bộ tính năng thông số kỹ thuật, nhưng Chromium 84 cung cấp một loạt tính năng chưa được hỗ trợ trước đây cho Chrome và Edge để cho phép khả năng tương tác trên nhiều trình duyệt.

Web Animations API xuất hiện lần đầu trên Chromium trong phiên bản 36 vào tháng 7 năm 2014. Giờ đây, thông số kỹ thuật sẽ hoàn chỉnh trong phiên bản 84, ra mắt vào tháng 7 năm 2020.
Quá trình phát triển lâu dài của API Ảnh động trên web trong Chromium.

Bắt đầu

Việc tạo ảnh động bằng API Ảnh động trên web sẽ rất quen thuộc nếu bạn đã sử dụng các quy tắc @keyframe. Trước tiên, bạn cần tạo một Đối tượng khung hình chính. Có thể có dạng như thế này trong CSS:

@keyframes openAnimation {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

sẽ có dạng như vậy trong JavaScript:

const openAnimation = [
  { transform: 'scale(0)' },
  { transform: 'scale(1)' },
];

Vị trí bạn đặt các thông số cho ảnh động trong CSS:

.modal {
  animation: openAnimation 1s 1 ease-in;
}

bạn sẽ đặt trong JS:

document.querySelector('.modal').animate(
    openAnimation, {
      duration: 1000, // 1s
      iterations: 1, // single iteration
      easing: 'ease-in' // easing function
    }
);

Số lượng mã gần như nhau, nhưng với JavaScript, bạn sẽ có được một số thế mạnh mà chỉ CSS mang lại. Trong đó có khả năng sắp xếp hiệu ứng và tăng khả năng kiểm soát trạng thái phát.

Ngoài element.animate()

Tuy nhiên, với bản cập nhật này, Web Animations API không còn bị hạn chế đối với ảnh động được tạo bằng element.animate(). Chúng ta cũng có thể thao tác với ảnh động và hiệu ứng chuyển đổi CSS.

getAnimations() là một phương thức trả về tất cả ảnh động trên một phần tử, bất kể phần tử đó được tạo bằng element.animate() hay sử dụng các quy tắc CSS (ảnh động hoặc hiệu ứng chuyển đổi CSS). Sau đây là ví dụ về cách thực hiện:

Trước tiên, bạn "get" các khung hình chính cho hiệu ứng chuyển đổi để xác định vị trí chúng ta đang chuyển đổi. Sau đó, bạn tạo hai ảnh động có độ mờ mới, bật hiệu ứng làm mờ chéo. Sau khi quá trình chuyển đổi hoàn tất, bạn có thể xoá bản sao.

Cách điều phối ảnh động bằng lời hứa

Trong Chromium 84, bạn hiện có hai phương thức có thể dùng với các lời hứa: animation.readyanimation.finished.

  • animation.ready cho phép bạn chờ các thay đổi đang chờ xử lý có hiệu lực (tức là chuyển đổi giữa các phương thức điều khiển phát như phát và tạm dừng).
  • animation.finished cung cấp phương thức thực thi mã JavaScript tuỳ chỉnh khi ảnh động hoàn tất.

Tiếp tục với ví dụ của chúng ta và tạo một chuỗi ảnh động được điều phối bằng animation.finished. Ở đây, bạn có một phép biến đổi dọc (scaleY), theo sau là một phép biến đổi ngang (scaleX), sau đó là một thay đổi về độ mờ trên một phần tử con:

Áp dụng các phép biến đổi và độ mờ cho phần tử phương thức mở. Xem bản minh hoạ trên Codepen
const transformAnimation = modal.animate(openModal, openModalSettings);
transformAnimation.finished.then(() => { text.animate(fadeIn, fadeInSettings)});

Chúng ta đã tạo chuỗi các ảnh động này bằng animation.finished.then() trước khi thực thi nhóm ảnh động tiếp theo trong chuỗi. Bằng cách này, ảnh động sẽ xuất hiện theo thứ tự và bạn thậm chí còn áp dụng hiệu ứng cho các phần tử mục tiêu khác nhau với các tuỳ chọn khác nhau (chẳng hạn như tốc độ và độ dễ dàng).

Trong CSS, việc này sẽ rất rườm rà khi tạo lại, đặc biệt là khi áp dụng các ảnh động độc đáo nhưng có trình tự cho nhiều phần tử. Bạn sẽ phải sử dụng @keyframe, sắp xếp chính xác tỷ lệ phần trăm thời gian để đặt ảnh động và sử dụng animation-delay trước khi kích hoạt ảnh động trong trình tự.

Ví dụ: Phát, tạm dừng và đảo ngược

Thứ có thể mở thì nên đóng! May mắn thay, kể từ Chromium 39, API Ảnh động trên web đã cho phép chúng ta phát, tạm dừng và đảo ngược ảnh động.

Bạn có thể lấy ảnh động đã hiển thị trước đó và tạo ảnh động đảo ngược, mượt mà khi nhấp lại vào nút bằng .reverse(). Bằng cách này, bạn có thể tạo ra một tương tác liền mạch và phù hợp hơn với ngữ cảnh cho cửa sổ bật lên của chúng ta.

Ví dụ về phương thức mở và đóng khi nhấp vào nút. Xem bản minh hoạ trên Glitch

Bạn có thể tạo hai ảnh động đang chờ phát (openModal và một phép biến đổi độ mờ nội tuyến), sau đó tạm dừng một trong hai ảnh động, trì hoãn ảnh động đó cho đến khi ảnh động còn lại kết thúc. Sau đó, bạn có thể sử dụng lời hứa để chờ cho từng lời hứa hoàn thành rồi mới chơi. Cuối cùng, bạn có thể kiểm tra xem cờ có được đặt hay không, sau đó đảo ngược từng ảnh động.

Ví dụ: Tương tác động với một số khung hình chính

Ví dụ về tính năng nhắm mục tiêu lại, trong đó một lượt nhấp chuột sẽ điều chỉnh ảnh động đến một vị trí mới. Xem bản minh hoạ trên Glitch
selector.animate([{transform: `translate(${x}px, ${y}px)`}],
    {duration: 1000, fill: 'forwards'});

Trong ví dụ này, chỉ có một khung hình chính và không có vị trí bắt đầu được chỉ định. Đây là ví dụ về cách sử dụng một số khung hình chính. Trình xử lý chuột thực hiện một vài việc ở đây: nó đặt vị trí kết thúc mới và kích hoạt ảnh động mới. Vị trí bắt đầu mới được suy ra từ vị trí cơ bản hiện tại.

Các lượt chuyển đổi mới có thể được kích hoạt trong khi các lượt chuyển đổi hiện có vẫn đang chạy. Điều này có nghĩa là quá trình chuyển đổi hiện tại bị gián đoạn và một quá trình chuyển đổi mới được tạo.

Cải thiện hiệu suất bằng ảnh động có thể thay thế

Khi tạo ảnh động dựa trên các sự kiện, chẳng hạn như trên 'mousemove', mỗi lần sẽ tạo một ảnh động mới. Điều này có thể nhanh chóng tiêu tốn bộ nhớ và làm giảm hiệu suất. Để giải quyết vấn đề này, ảnh động có thể thay thế đã được giới thiệu trong Chromium 83, cho phép dọn dẹp tự động, trong đó ảnh động đã hoàn tất được gắn cờ là có thể thay thế và tự động bị xoá nếu được thay thế bằng một ảnh động đã hoàn tất khác. Hãy xem ví dụ sau đây:

Một vệt sao chổi sẽ tạo ảnh động khi chuột di chuyển. Xem bản minh hoạ trên Glitch
elem.addEventListener('mousemove', evt => {
  rectangle.animate(
    { transform: translate(${evt.clientX}px, ${evt.clientY}px) },
    { duration: 500, fill: 'forwards' }
  );
});

Mỗi khi chuột di chuyển, trình duyệt sẽ tính toán lại vị trí của mỗi quả bóng trong vệt sao chổi và tạo ảnh động cho điểm mới này. Giờ đây, trình duyệt sẽ biết xoá ảnh động cũ (bật tính năng thay thế) khi:

  1. Ảnh động đã hoàn tất.
  2. Có một hoặc nhiều ảnh động ở thứ tự cao hơn trong thứ tự tổng hợp cũng đã hoàn tất.
  3. Các ảnh động mới sẽ tạo ảnh động cho các thuộc tính tương tự.

Bạn có thể xem chính xác số lượng ảnh động đang được thay thế bằng cách tính tổng bộ đếm với mỗi ảnh động đã xoá, sử dụng anim.onremove để kích hoạt bộ đếm.

Có một số phương pháp bổ sung để giúp bạn cải thiện hơn nữa khả năng điều khiển ảnh động:

  • animation.replaceState() cung cấp phương tiện theo dõi xem một ảnh động đang hoạt động, duy trì hay đã xoá.
  • animation.commitStyles() cập nhật kiểu của một phần tử dựa trên kiểu cơ bản cùng với tất cả ảnh động trên phần tử theo thứ tự tổng hợp.
  • animation.persist() đánh dấu một ảnh động là không thể thay thế.

Ảnh động mượt mà hơn với chế độ kết hợp

Với API Ảnh động trên web, giờ đây bạn có thể đặt chế độ kết hợp của ảnh động, nghĩa là chúng có thể được thêm vào hoặc tích luỹ, ngoài chế độ mặc định của "thay thế". Chế độ kết hợp cho phép nhà phát triển viết các ảnh động riêng biệt và kiểm soát cách kết hợp các hiệu ứng. Hiện tại, 3 chế độ kết hợp được hỗ trợ: 'replace' (chế độ mặc định), 'add''accumulate'.

Khi bạn kết hợp ảnh động, nhà phát triển có thể viết các hiệu ứng ngắn, riêng biệt rồi xem các hiệu ứng đó kết hợp với nhau. Trong ví dụ sau, chúng ta sẽ áp dụng một khung hình chính xoay và điều chỉnh tỷ lệ cho mỗi hộp, với chế độ điều chỉnh duy nhất là chế độ kết hợp, được thêm vào dưới dạng một tuỳ chọn:

Bản minh hoạ cho thấy các chế độ kết hợp mặc định, thêm và tích luỹ. Xem bản minh hoạ trên Glitch

Ở chế độ kết hợp 'replace' mặc định, ảnh động cuối cùng sẽ thay thế thuộc tính biến đổi và kết thúc tại rotate(360deg) scale(1.4). Đối với 'add', thành phần kết hợp sẽ thêm độ xoay và nhân tỷ lệ, dẫn đến trạng thái cuối cùng là rotate(720deg) scale(1.96). 'accumulate' kết hợp các phép biến đổi, dẫn đến rotate(720deg) scale(1.8). Để biết thêm về các chế độ tổng hợp phức tạp này, hãy xem Danh sách liệt kê CompositeOperation và CompositeOperationOrAuto trong thông số kỹ thuật Ảnh động trên web.

Hãy xem ví dụ về thành phần trên giao diện người dùng sau:

Một trình đơn thả xuống có độ nảy, áp dụng hai ảnh động tổng hợp. Xem bản minh hoạ trên Glitch

Ở đây, hai ảnh động top được kết hợp. Loại đầu tiên là ảnh động vĩ mô, di chuyển trình đơn thả xuống theo chiều cao đầy đủ của chính trình đơn dưới dạng hiệu ứng trượt vào từ đầu trang. Loại thứ hai là ảnh động vi mô, áp dụng một chút độ nảy khi chạm đến cuối. Việc sử dụng chế độ kết hợp 'add' sẽ giúp quá trình chuyển đổi diễn ra suôn sẻ hơn.

const dropDown = menu.animate(
    [
      { top: `${-menuHeight}px`, easing: 'ease-in' },
      { top: 0 }
    ], { duration: 300, fill: 'forwards' });

  dropDown.finished.then(() => {
    const bounce = menu.animate(
      [
        { top: '0px', easing: 'ease-in' },
        { top: '10px', easing: 'ease-out' },
        { ... }
      ], { duration: 300, composite: 'add' });
  });

Những bước tiếp theo cho API Ảnh động trên web

Đây đều là những tính năng bổ sung thú vị cho khả năng tạo ảnh động trong các trình duyệt hiện nay, và chúng tôi sẽ tiếp tục bổ sung thêm nhiều tính năng khác. Hãy xem các thông số kỹ thuật trong tương lai này để tìm hiểu thêm về những gì sắp ra mắt: