Web Animations API menyediakan metode dasar yang canggih untuk mendeskripsikan animasi penting dari JavaScript - namun, apa artinya? Cari tahu referensi yang tersedia untuk Anda, termasuk demo dan codelab Google.
Latar belakang
Pada intinya, API 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 hebat (selengkapnya tentang hal ini 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 alat primitif yang kuat yang layak mendapat tempat di kotak peralatan Anda.
Codelab
Makin banyak codelab yang tersedia untuk Web Animations API. Ini adalah panduan mandiri yang menunjukkan berbagai konsep dalam API. Di sebagian besar codelab ini, Anda akan mengambil konten statis dan meningkatkannya dengan efek animasi.
Codelab ini, dan link atau referensi terkait, adalah tempat terbaik untuk memulai jika Anda ingin memahami primitif baru yang tersedia di Animasi Web. Untuk gambaran tentang apa yang dapat Anda bangun, lihat efek reveal yang terinspirasi oleh Android ini:
Jadi, jika Anda baru saja memulai, jangan cari lagi!
Demo
Jika Anda sedang mencari inspirasi, pastikan untuk melihat Demo Animasi Web yang terinspirasi Material, dengan sumber yang dihosting di GitHub. Template ini menunjukkan berbagai efek yang luar biasa dan Anda dapat melihat setiap kode sumber demo secara inline.
Demo ini meliputi galaksi berputar warna-warni, Bumi yang berputar, atau bahkan hanya berbagai macam efek pada elemen lama biasa.
Polyfill
Untuk memastikan dukungan yang hebat di semua browser modern, Anda dapat menggunakan library polyfill. Web Animations API memiliki polyfill yang tersedia saat ini yang mengarahkannya ke semua browser modern, termasuk Internet Explorer, Firefox, dan Safari.
Jika ingin berpetualang, Anda dapat menggunakan polyfill web-animations-next, yang juga menyertakan fitur yang belum diselesaikan - seperti konstruktor GroupEffect dan SequenceEffect composable.
Untuk perbandingan antara kedua polyfill, lihat halaman beranda.
Untuk menggunakan polyfill di kode Anda, ada beberapa opsi.
Menggunakan CDN, seperti cdnjs, jsDelivr, atau menargetkan rilis tertentu melalui rawgit.com
Instal melalui NPM atau Bower
$ npm install web-animations-js $ bower install web-animations-js ```
Dalam semua kasus, Anda hanya dapat 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>
Resource lainnya
Jika Anda ingin membaca pengantar yang lebih teknis, lihat spesifikasi W3C.
Dan Wilson juga telah menulis serangkaian postingan yang bagus di Animasi Web, termasuk cara menggunakannya bersama properti motion-path CSS yang baru.
Untuk mengetahui beberapa contoh yang menggunakan motion-path, lihat dokumen Eric Willigers.