Bạn có thể sắp xếp ảnh động theo 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 với chế độ kết hợp, v.v.
Khi được sử dụng đúng cách, ảnh động sẽ cải thiện nhận thức và bộ nhớ của người dùng về thương hiệu của bạn, hướng dẫn người dùng các hành động và giúp người dùng điều hướng trong ứng dụng của bạn, cung cấp ngữ cảnh trong một 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. Tính năng này được viết để hỗ trợ cả việc triển khai 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ư các hiệu ứng hiện có để được soạn và định thời gian.
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 vẫn cung cấp nhiều tính năng không được hỗ trợ trước đây cho Chrome và Edge cho phép tương tác trên nhiều trình duyệt.
Bắt đầu
Bạn sẽ cảm thấy quen thuộc với việc tạo ảnh động qua API Ảnh động trên web nếu từng 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. Giao diện sau trong CSS:
@keyframes openAnimation {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
sẽ có dạng như sau trong JavaScript:
const openAnimation = [
{ transform: 'scale(0)' },
{ transform: 'scale(1)' },
];
Nơi bạn đặt tham số cho ảnh động trong CSS:
.modal {
animation: openAnimation 1s 1 ease-in;
}
mà 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ã tương tự nhau, nhưng với JavaScript, bạn có được một vài siêu năng lực mà chỉ CSS sẽ không có. Điều này bao gồm khả năng sắp xếp hiệu ứng theo chuỗi và tăng khả năng kiểm soát trạng thái chơi.
Ngoài element.animate()
Tuy nhiên, với bản cập nhật, API Ảnh động trên web không còn bị hạn chế ở các ảnh động được tạo qua element.animate(). Chúng ta cũng có thể thao tác với các ảnh động và hiệu ứng chuyển tiếp CSS.
getAnimations() là 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 thông qua element.animate() hay thông qua quy tắc CSS (ảnh động CSS hoặc hiệu ứng chuyển đổi). Sau đây là một ví dụ:
Trước tiên, bạn "get" 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 độ mờ mới, bật hiệu ứng làm mờ chữ thập. Sau khi quá trình làm mờ chữ thập hoàn tất, bạn sẽ xoá bản sao.
Sắp xếp ảnh động bằng lời hứa
Trong Chromium 84, bạn hiện có 2 phương thức có thể sử dụng với 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 chế độ phát, chẳng hạn như phát và tạm dừng).animation.finishedcung cấp một phương thức để thực thi mã JavaScript tuỳ chỉnh khi ảnh động hoàn tất.
Hãy tiếp tục với ví dụ của chúng ta và tạo một chuỗi ảnh động được sắp xếp bằng animation.finished. Ở đây, bạn có một phép biến đổi dọc (scaleY), tiếp theo là một phép biến đổi theo chiều ngang (scaleX), tiếp theo là sự thay đổi độ mờ trên một phần tử con:
const transformAnimation = modal.animate(openModal, openModalSettings);
transformAnimation.finished.then(() => { text.animate(fadeIn, fadeInSettings)});
Chúng tôi đã liên kết các ảnh động này bằng animation.finished.then() trước khi thực thi tập hợp ả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à thậm chí bạn có thể áp dụng hiệu ứng cho các phần tử mục tiêu khác nhau bằng các thiết lập tuỳ chọn khác nhau (chẳng hạn như tốc độ và mức độ dễ dàng).
Trong CSS, việc này sẽ rườm rà, đặc biệt là khi áp dụng các ảnh động độc đáo nhưng theo trình tự cho nhiều phần tử. Bạn phải sử dụng @keyframe, sắp xếp tỷ lệ phần trăm thời gian chính xác để đặ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
Những gì có thể mở thì nên đóng! Thật may là kể từ Chromium 39, API Ảnh động trên web đã cho phép chúng tôi phát, tạm dừng và đảo ngược các ảnh động.
Bạn có thể lấy ảnh động ở trên 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ương tác suôn sẻ hơn và theo ngữ cảnh hơn cho cửa sổ phụ.
Việc bạn có thể làm là tạo 2 ảnh động đang chờ phát (openModal và một phép biến đổi độ mờ cùng dòng), sau đó tạm dừng một trong các ảnh động, trì hoãn hoạt động đó cho đến khi ảnh còn lại hoàn tất. Sau đó, bạn có thể sử dụng lời hứa để đợi mỗi câu lệnh hoàn tất trước khi chơi. Cuối cùng, bạn có thể kiểm tra xem liệu cờ đã được đặt hay chưa, sau đó đảo ngược từng ảnh động.
Ví dụ: Tương tác động với khung hình chính một phần
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 khung hình chính một phần. 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 hoạt ảnh 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 lượt chuyển đổi mới 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 sẽ đượ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 sự kiện, chẳng hạn như trên 'mousemove', mỗi lần tạo ảnh động mới sẽ được tạo một ảnh động mới. Điều này có thể nhanh chóng chiếm dụng bộ nhớ và làm giảm hiệu suất. Để giải quyết vấn đề này, chúng tôi đã ra mắt ảnh động có thể thay thế trong Chromium 83. Tính năng này sẽ bật tính năng tự động xoá. Trong đó, ảnh động hoàn tất sẽ đượ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 lần 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. Trình duyệt hiện đã biết cách xoá các ảnh động cũ (cho phép thay thế) khi:
- Ảnh động đã kết thúc.
- Có một hoặc nhiều ảnh động cao hơn theo thứ tự tổng hợp cũng đã hoàn tất.
- Các ảnh động mới đang tạo ảnh động tương tự các thuộc tính.
Bạn có thể biết chính xác số lượng ảnh động đang được thay thế bằng cách kiểm đếm bộ đếm với từng ảnh động đã bị xoá, sử dụng anim.onremove để kích hoạt bộ đếm.
Bạn có thể nâng cao khả năng kiểm soát ảnh động hơn nữa:
animation.replaceState()cung cấp một phương tiện để theo dõi xem một ảnh động đang hoạt động, duy trì hay bị 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 ảnh động là không thể thay thế.
Ảnh động mượt mà hơn với chế độ tổng hợp
Với API Ảnh động trên web, giờ đây bạn có thể đặt chế độ tổng hợp của ảnh động, nghĩa là chúng có thể cộng 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 các ảnh động, nhà phát triển có thể viết các hiệu ứng ngắn, khác biệt và xem chúng được kết hợp với nhau. Trong ví dụ bên dưới, chúng ta sẽ áp dụng khung hình chính xoay và điều chỉnh theo tỷ lệ cho mỗi hộp, với điều chỉnh duy nhất là chế độ kết hợp, được thêm vào dưới dạng tùy 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 ở rotate(360deg) scale(1.4). Đối với 'add', tổ hợp sẽ thêm chế độ 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ề chi tiết phức tạp của các chế độ kết hợp này, hãy xem Danh sách liệt kê compositeOperation và compositeOperationOrAuto từ thông số kỹ thuật Hoạt ảnh trên web.
Hãy cùng xem ví dụ về thành phần trên giao diện người dùng:
Ở đây, 2 ảnh động top được kết hợp. Đầu tiên là hoạt ảnh macro, 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 từ đầu trang và hiệu ứng thứ hai, hoạt ảnh vi mô, áp dụng độ nảy một chút khi chạm đến cuối trang. Việc sử dụng chế độ tổng hợp 'add' 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' });
});
Nội dung tiếp theo dành cho API Ảnh động trên web
Đây là tất cả những phần bổ sung thú vị cho khả năng tạo ảnh động trong các trình duyệt hiện nay và thậm chí sẽ có thêm nhiều tính năng khác sắp được bổ sung. Hãy xem những thông số kỹ thuật trong tương lai sau đây để đọc thêm về những tính năng sắp tới: