Konsep yang disederhanakan dalam penamaan animasi web

Dukungan native untuk Animasi Web pertama kali diluncurkan di Chrome 36, dan diperbarui dengan kontrol pemutaran di Chrome 39. Metode Element.animate() dapat digunakan untuk memicu animasi imperatif langsung dari JavaScript, dan objek yang ditampilkan dapat dimanfaatkan untuk mengontrol pemutaran animasi ini. Metode ini diuraikan dalam draf terbaru spesifikasi Web Animations W3C.

Ada polyfill yang dikirim dalam pengembangan aktif yang melacak semua fitur Animasi Web yang diimplementasikan secara native, dan yang didukung di semua browser modern. Metode inti tersebut siap digunakan sekarang, dan layak menjadi bagian dari kotak perkakas Anda untuk menciptakan pengalaman kaya yang mendapatkan manfaat dari animasi (misalnya untuk aplikasi web Google I/O 2015.

Perubahan konstruktor dan grup

Spesifikasi Animasi Web juga menjelaskan grup dan urutan, serta konstruktor untuk animasi dan pemutar. Fitur ini telah tersedia di polyfill web-animasis-next, yang telah dirancang untuk menampilkan fitur yang masih dalam tahap diskusi dan belum diimplementasikan secara native. Sebagai tanggapan atas masukan developer, tim yang mengembangkan Animasi Web mengganti nama fitur ini agar lebih jelas.

FXTF baru-baru ini bertemu di Sydney, Australia, dan membahas naming, karena sejumlah developer mengajukan poin valid tentang beberapa penamaan yang membingungkan. Oleh karena itu, perubahan penamaan berikut telah disepakati:

  • Animation menjadi KeyframeEffect
  • AnimationSequence menjadi SequenceEffect
  • AnimationGroup menjadi GroupEffect
  • AnimationPlayer menjadi Animasi

Ingat bahwa meskipun animasi dan pemutarnya tersedia secara native di Chrome dan sebagai bagian dari polyfill, animasi dan pemutarnya saat ini dibuat langsung melalui metode Element.animate(). Kode yang sudah ada yang menggunakan metode Element.animate() tidak akan memerlukan perubahan.

Nama-nama baru ini merepresentasikan perilaku yang diberikan oleh setiap objek secara lebih akurat. KeyframeEffect, misalnya, menjelaskan efek berbasis keyframe yang dapat menargetkan elemen HTML. Sebaliknya, objek Animation baru merepresentasikan animasi dalam salah satu dari banyak status (seperti diputar, dijeda, dll.).

SourceCodeEffect

Jika Anda menggunakan bagian dari spesifikasi draf melalui polyfill web-Animations-next, Anda harus memperbarui kode dalam periode penghentian penggunaan untuk mencerminkan nama baru ini. Sesuai dengan kebijakan perubahan polyfill, kami bertujuan untuk mendukung versi lama selama tiga bulan dan memberikan pernyataan peringatan konsol jika situs Anda menggunakan fitur atau nama yang tidak digunakan lagi.

Jika Anda ingin mencoba fitur ini, perhatikan rilis v2 polyfill untuk memanfaatkan nama baru ini. Terakhir, pastikan Anda berlangganan grup web-animasis-changes untuk mengetahui perubahan lainnya.