Điều phối ảnh động bằng các 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 theo thông số kỹ thuật, nhưng Chromium 84 mang đến 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. 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
}
);
Lượng mã gần như giống nhau, nhưng với JavaScript, bạn có một số tính năng mạnh mẽ mà bạn không có được khi chỉ sử dụng CSS. 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 chuyển đổi CSS). Dưới đâ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 độ mờ mới, bật hiệu ứng chuyển màu chéo. Sau khi quá trình chuyển đổi hoàn tất, bạn hãy 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.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:
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à 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ể 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.
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 ở thứ tự cao hơn trong 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ố thuộc tính và 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ế độ 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'
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ề 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 đây:
Ở đâ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 trình đơn thả xuống 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 mượt mà 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: