Web Animations API menyediakan primitif yang canggih untuk mendeskripsikan animasi imperatif dari JavaScript - tetapi apa artinya? Cari tahu resource yang tersedia untuk Anda, termasuk demo dan codelab Google.
Latar belakang
Pada intinya, API ini menyediakan metode Element.animate().
Mari kita lihat contoh yang menganimasikan warna latar belakang dari merah ke hijau-
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
Metode ini didukung di semua browser modern, dengan penggantian polyfill yang sangat baik (akan dibahas nanti). Dukungan native untuk metode ini - dan objek pemutarnya - tersedia secara luas sebagai bagian dari Chrome 39. Fitur ini juga tersedia secara native di Opera, dan sedang dalam pengembangan aktif untuk Firefox. Ini adalah primitif canggih yang layak ada di toolbox Anda.
Codelab
Makin banyak codelab yang tersedia untuk Web Animations API. Panduan ini adalah panduan mandiri yang menunjukkan berbagai konsep dalam API. Di sebagian besar codelab ini, Anda akan mengambil konten statis dan menyempurnakannya dengan efek animasi.
Codelab ini, dan link atau resource terkait, adalah tempat terbaik untuk memulai jika Anda ingin memahami primitif baru yang tersedia untuk Anda di Animasi Web. Untuk mendapatkan gambaran tentang apa yang dapat Anda buat, lihat efek pengungkapan yang terinspirasi dari Android ini:
Jadi, jika Anda baru memulai, tidak perlu mencari lagi!
Demo
Jika Anda mencari inspirasi, pastikan untuk melihat Demo Animasi Web yang terinspirasi dari Material, dengan sumber yang dihosting di GitHub. Contoh ini menunjukkan berbagai efek luar biasa dan Anda dapat melihat kode sumber setiap demo secara inline.
Demo ini mencakup galaksi berputar yang penuh warna, Bumi yang berputar, atau bahkan hanya berbagai efek pada elemen lama yang biasa.
Polyfill
Untuk memastikan dukungan yang baik di semua browser modern, Anda dapat menggunakan library polyfill. Web Animations API memiliki polyfill yang tersedia saat ini yang membawanya ke semua browser modern, termasuk Internet Explorer, Firefox, dan Safari.
Jika ingin mencoba, Anda dapat menggunakan polyfill web-animations-next, yang juga menyertakan fitur yang belum difinalisasi - seperti konstruktor GroupEffect dan SequenceEffect composable.
Untuk perbandingan antara kedua polyfill, lihat halaman beranda.
Untuk menggunakan polyfill dalam kode Anda, Anda memiliki beberapa opsi.
Gunakan CDN, seperti cdnjs, jsDelivr, atau targetkan rilis tertentu melalui rawgit.com
Menginstal menggunakan NPM atau Bower
$ npm install web-animations-js $ bower install web-animations-js ```
Dalam semua kasus, Anda cukup menyertakan polyfill dalam tag skrip sebelum kode lainnya-
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
document.body.animate([
{'background': 'red'},
{'background': 'green'}
], 1000);
</script>
Referensi lainnya
Jika Anda ingin membaca pengantar yang lebih teknis, lihat spesifikasi W3C.
Dan Wilson juga telah menulis serangkaian postingan menarik tentang Web Animations, termasuk cara menggunakannya bersama dengan properti CSS motion-path baru.
Untuk beberapa contoh yang menggunakan motion-path, lihat dokumen Eric Willigers.