Web Animations API, yang pertama kali dikirimkan di Chrome 36, menyediakan kontrol JavaScript yang mudah untuk animasi di browser, dan juga diimplementasikan di Gecko dan WebKit.
Chrome 50 memperkenalkan perubahan untuk meningkatkan interoperabilitas dengan browser lain dan agar lebih sesuai dengan spesifikasi. Perubahan ini adalah:
- Membatalkan acara
Animation.id- Perubahan status untuk metode
pause() - Penghentian nama putus-putus sebagai kunci dalam keyframe
Di Chrome 51, beberapa perubahan berikut ini telah diselesaikan:
- Menghapus nama yang putus-putus sebagai kunci dalam keyframe
Membatalkan acara
Antarmuka Animasi
menyertakan metode untuk membatalkan animasi, yang cukup lucu yang disebut
cancel().
Chrome 50 akan menerapkan pengaktifan peristiwa pembatalan saat metode dipanggil sesuai spesifikasi, yang memicu penanganan peristiwa melalui atribut oncancel jika telah diinisialisasi.
Dukungan untuk Animation.id
Saat membuat animasi menggunakan element.animate(), Anda dapat meneruskan sejumlah properti. Misalnya, berikut ini contoh
menganimasikan opasitas pada objek:
element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
Dengan menentukan properti id, properti tersebut akan ditetapkan pada objek Animation yang ditampilkan, yang dapat membantu saat men-debug konten jika Anda memiliki banyak objek Animasi untuk ditangani. Berikut adalah contoh cara menentukan id untuk animasi yang Anda buat instance-nya:
element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});
Perubahan status untuk metode paused()
Metode pause()
digunakan untuk menjeda animasi yang sedang berlangsung. Jika Anda memeriksa status
animasi menggunakan atribut playState,
atribut tersebut harus ditetapkan ke paused
setelah metode paused() dipanggil. Pada versi Chrome sebelum 50,
atribut playState
akan menunjukkan idle jika animasi belum dimulai. Namun,
sekarang atribut tersebut mencerminkan status yang benar, yaitu
paused.
Menghapus nama yang putus-putus sebagai kunci dalam keyframe
Untuk lebih mematuhi spesifikasi dan implementasi lainnya, Chrome 50 akan mengirimkan peringatan ke konsol jika nama dengan garis putus-putus digunakan untuk kunci dalam animasi frame utama. String yang benar untuk digunakan adalah namacamelCase sesuai properti CSS ke algoritma konversi atribut IDL.
Misalnya, properti CSS margin-left akan mengharuskan Anda meneruskan marginLeft sebagai kunci.
Chrome 51 menghapus dukungan untuk nama yang terputus-putus, jadi sekarang adalah saat yang tepat untuk memperbaiki konten yang ada dengan penamaan yang benar sesuai spesifikasi.
Ringkasan
Perubahan ini menjadikan implementasi Animasi Web Chrome lebih dekat dengan implementasi browser lainnya dan lebih sesuai dengan spesifikasi yang semuanya membantu menyederhanakan penulisan konten halaman web untuk interoperabilitas yang lebih baik.