Web Animations API (API ảnh động trên web) được phát hành lần đầu trong Chrome 36, cung cấp tính năng kiểm soát JavaScript thuận tiện đối với ảnh động trong trình duyệt và cũng đang được triển khai trong Gecko và WebKit.
Chrome 50 ra mắt các thay đổi để cải thiện khả năng tương tác với các trình duyệt khác và tuân thủ hơn với thông số kỹ thuật. Những thay đổi này bao gồm:
- Huỷ sự kiện
Animation.id- Thay đổi trạng thái cho phương thức
pause() - Ngừng sử dụng tên có dấu gạch ngang làm khoá trong khung hình chính
Trong Chrome 51, một số thay đổi sau đây đã được hoàn tất:
- Xoá tên có dấu gạch ngang làm khoá trong khung hình chính
Huỷ sự kiện
Giao diện Animation (Ảnh động) bao gồm một phương thức để huỷ ảnh động, có tên là cancel().
Chrome 50 triển khai việc kích hoạt sự kiện huỷ khi phương thức được gọi theo thông số kỹ thuật, điều này sẽ kích hoạt việc xử lý sự kiện thông qua thuộc tính oncancel nếu thuộc tính này đã được khởi tạo.
Hỗ trợ Animation.id
Khi tạo ảnh động bằng element.animate(), bạn có thể truyền vào một số thuộc tính. Ví dụ: sau đây là ví dụ về ảnh động độ mờ trên một đối tượng:
element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
Bằng cách chỉ định thuộc tính id, thuộc tính này sẽ được đặt trên đối tượng Animation được trả về. Điều này có thể giúp ích khi gỡ lỗi nội dung khi bạn có nhiều đối tượng Animation cần xử lý. Dưới đây là ví dụ về cách chỉ định id cho ảnh động mà bạn tạo bản sao:
element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});
Thay đổi trạng thái cho phương thức pause()
Phương thức pause() được dùng để tạm dừng ảnh động đang chạy. Nếu bạn kiểm tra trạng thái của ảnh động bằng thuộc tính playState, thì bạn phải đặt thuộc tính này thành paused sau khi gọi phương thức paused(). Trong các phiên bản Chrome trước phiên bản 50, thuộc tính playState sẽ cho biết idle nếu ảnh động chưa bắt đầu. Tuy nhiên, hiện tại, thuộc tính này phản ánh trạng thái chính xác là paused.
Xoá tên có dấu gạch ngang làm khoá trong khung hình chính
Để tuân thủ thêm thông số kỹ thuật và các phương thức triển khai khác, Chrome 50 sẽ gửi cảnh báo đến bảng điều khiển nếu tên có dấu gạch ngang được dùng cho các khoá trong ảnh động khung hình chính. Chuỗi chính xác cần sử dụng là tên camelCase theo thuộc tính CSS cho thuộc tính IDL thuật toán chuyển đổi.
Ví dụ: thuộc tính CSS margin-left sẽ yêu cầu bạn truyền vào marginLeft làm khoá.
Chrome 51 sẽ xoá hoàn toàn tính năng hỗ trợ tên có dấu gạch ngang. Vì vậy, đây là thời điểm thích hợp để sửa mọi nội dung hiện có bằng cách đặt tên chính xác theo thông số kỹ thuật.
Tóm tắt
Những thay đổi này giúp việc triển khai Ảnh động trên web của Chrome trở nên gần giống với các trình duyệt khác và tuân thủ hơn thông số kỹ thuật, tất cả đều giúp đơn giản hoá việc tạo nội dung trang web để có khả năng tương tác tốt hơn.