Các khái niệm được đơn giản hoá trong cách đặt tên ảnh động trên web

Tính năng hỗ trợ gốc cho Ảnh động trên web được ra mắt lần đầu trong Chrome 36 và được cập nhật với tính năng điều khiển chế độ phát trong Chrome 39. Bạn có thể dùng phương thức Element.animate() để kích hoạt ảnh động bắt buộc ngay từ JavaScript. Bạn có thể tận dụng đối tượng được trả về của phương thức này để kiểm soát việc phát các ảnh động này. Các phương thức này được nêu chi tiết trong bản nháp hiện tại của thông số kỹ thuật về Ảnh động trên web W3C.

Có một polyfill đã được vận chuyển đang trong quá trình phát triển giúp theo dõi tất cả các tính năng của Ảnh động trên web được triển khai nguyên gốc và tính năng này được hỗ trợ trong tất cả các trình duyệt hiện đại. Các phương pháp cốt lõi này đã sẵn sàng để sử dụng ngay bây giờ và xứng đáng trở thành một phần trong hộp công cụ của bạn để xây dựng trải nghiệm phong phú lợi ích từ ảnh động (chẳng hạn như dành cho ứng dụng web Google I/O 2015.

Thay đổi về hàm khởi tạo và nhóm

Thông số kỹ thuật của Ảnh động trên web cũng mô tả nhóm và trình tự, cũng như các hàm khởi tạo cho ảnh động và trình phát. Các tính năng này đã có trong polyfill web-animations-next, được thiết kế để giới thiệu các tính năng vẫn đang trong quá trình thảo luận và chưa được triển khai một cách tự nhiên. Theo phản hồi của nhà phát triển, nhóm phát triển Ảnh động trên web sẽ đổi tên các tính năng này sao cho dễ hiểu hơn.

Gần đây, FXTF đã gặp mặt tại Sydney, Úc và thảo luận naming vì một số nhà phát triển đã nêu ra quan điểm hợp lệ về việc một số cách đặt tên đang gây nhầm lẫn. Do đó, những thay đổi đặt tên sau đây đã được thống nhất:

  • Animation trở thành KeyframeEffect
  • AnimationSequence trở thành SequenceEffect
  • AnimationGroup trở thành GroupEffect
  • AnimationPlayer trở thành Animation

Hãy nhớ rằng mặc dù ảnh động và trình phát có sẵn trong Chrome và là một phần của polyfill, nhưng chúng hiện được tạo trực tiếp thông qua phương thức Element.animate(). Bạn không cần thay đổi mã hiện có sử dụng phương thức Element.animate().

Tên mới thể hiện chính xác hơn hành vi mà mỗi đối tượng cung cấp. Ví dụ: KeyframeEffect mô tả các hiệu ứng dựa trên khung hình chính có thể nhắm mục tiêu các phần tử HTML. Ngược lại, đối tượng Animation mới biểu thị ảnh động ở một trong nhiều trạng thái (chẳng hạn như đang phát, tạm dừng, v.v.).

SourceCodeEffect

Nếu bạn đang sử dụng các phần của thông số nháp qua polyfill web-animations-next, bạn sẽ phải cập nhật mã của mình trong thời gian không dùng nữa để phản ánh các tên mới này. Theo chính sách về các thay đổi đối với polyfill, chúng tôi hướng đến việc hỗ trợ một phiên bản cũ trong vòng 3 tháng và đưa ra cảnh báo trên bảng điều khiển nếu trang web của bạn sử dụng các tính năng hoặc tên không dùng nữa.

Nếu bạn muốn dùng thử các tính năng này, hãy chú ý đến bản phát hành polyfill phiên bản 2 để tận dụng những tên mới này. Cuối cùng, hãy nhớ đăng ký vào nhóm web-animations-changes để biết về bất kỳ thay đổi nào khác.