Đ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.
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. Thư viện này được viết để hỗ trợ cả việc triển khai hiệu ứng chuyển đổi và ảnh động CSS, đồng thời cho phép phát triển các hiệu ứng trong tương lai, cũng như kết hợp và định thời gian cho các hiệu ứng hiện có.
Mặc dù Firefox và Safari đã 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.
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. Hình ảnh có thể trông giống như sau 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, API Ảnh động trên web không còn bị giới hạn ở ả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 bằ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.ready và animation.finished.
animation.readycho 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.finishedcung 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:
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 tạo lại sẽ rất rườm rà, đặc biệt là khi áp dụng các hoạt ảnh độc đáo, chưa được sắp xếp theo 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à tua ngược
Những gì có thể mở, phải đó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ể dùng ảnh động xuất hiện trước đó rồi 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.
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 các lời hứa để đợi từng lời hứa hoàn tất trước khi phát. 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
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 số việc ở đây: đặ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.
Bạn có thể kích hoạt các hiệu ứng chuyển đổi mới trong khi các hiệu ứng 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:
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:
- Ảnh động đã hoàn tất.
- Có một hoặc nhiều ảnh động cao hơn theo thứ tự kết hợp cũng đã hoàn tất.
- Ảnh động mới đang tạo ảnh động cho cùng một thuộc tính.
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 thức bổ sung để kiểm soát ảnh động hiệu quả hơn:
animation.replaceState()cung cấp phương tiện theo dõi xem ảnh động có đang hoạt động, tồn tại hay bị xoá hay không.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ự kết 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, tức là các ảnh động có thể là bổ sung hoặc tích luỹ, ngoài chế độ mặc định là "thay thế". Chế độ tổng 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. Ba chế độ kết hợp hiện được hỗ trợ: 'replace' (chế độ mặc định), 'add' và '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 và 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:
Ở 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ề sự phức tạp của các chế độ kết hợp này, hãy xem The CompositeOperation và CompositeOperationOrAuto enumerations trong thông số kỹ thuật của Ả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:
Ở đâ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: