Web Animations API menyediakan primitif yang kuat untuk menjelaskan animasi imperatif dari JavaScript - tetapi 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 bagus (selengkapnya tentang hal itu akan dibahas nanti). Dukungan native untuk metode ini - dan objek pemutarnya - tersedia secara luas sebagai bagian dari Chrome 39. Versi ini juga tersedia secara native di Opera, dan sedang dalam pengembangan aktif untuk Firefox. Ini adalah primitif kuat yang pantas mendapatkan 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, serta link atau referensi terkait, adalah tempat terbaik untuk memulai jika Anda ingin memahami primitif baru yang tersedia bagi Anda dalam Animasi Web. Untuk gambaran tentang apa yang bisa Anda buat, lihat efek reveal yang terinspirasi Android ini-
Jadi, jika Anda baru memulai, tidak perlu mencari lagi.
Demo
Jika Anda mencari inspirasi, pastikan untuk melihat Demo Animasi Web yang terinspirasi Material, dengan sumber yang dihosting di GitHub. Semua ini mendemonstrasikan berbagai efek luar biasa dan Anda bisa melihat setiap kode sumber demo secara inline.
Demo tersebut mencakup galaksi berputar warna-warni, Bumi berputar, atau bahkan hanya berbagai efek pada elemen lama polos.
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 menghadirkannya ke semua browser modern, termasuk Internet Explorer, Firefox, dan Safari.
Jika merasa ingin bertualang, Anda dapat menggunakan polyfill web-animasi-next, yang juga menyertakan fitur yang belum diselesaikan, seperti konstruktor GroupEffect dan SequenceEffect composable.
Untuk membandingkan antara kedua polyfill tersebut, lihat halaman beranda.
Untuk menggunakan polyfill dalam kode, Anda memiliki beberapa opsi.
Gunakan CDN, seperti cdnjs, jsDelivr, atau targetkan rilis tertentu melalui rawgit.com
Instal melalui 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>
Resource lainnya
Jika Anda ingin membaca pengantar teknis lebih lanjut, lihat spesifikasi W3C.
Dan Wilson juga telah menulis serangkaian postingan yang bagus tentang Animasi Web, termasuk cara menggunakannya bersama properti motion-path CSS baru.
Untuk beberapa contoh penggunaan motion-path, lihat dokumen Eric Willigers.