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