Web Animations API menyediakan primitif yang canggih untuk mendeskripsikan animasi imperatif dari JavaScript - tetapi apa artinya? Cari tahu referensi yang tersedia untuk Anda, termasuk demo dan codelabs Google.
Latar belakang
Pada intinya, API menyediakan metode Element.animate().
Mari kita lihat contoh, yang menganimasikan warna latar belakang dari merah menjadi hijau-
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
Metode ini didukung di semua browser modern, dengan penggantian polyfill yang bagus (selengkapnya 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 yang kuat dan layak untuk ada di toolbox Anda.
Codelab
Semakin banyak codelab yang tersedia untuk Web Animations API. Panduan ini adalah panduan mandiri yang menunjukkan berbagai konsep di 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 untuk Anda di Animasi Web. Untuk mendapatkan gambaran tentang hal yang dapat Anda buat, lihat efek tampilan yang terinspirasi Android ini-
Jadi, jika Anda baru memulai, jangan khawatir.
Demo
Jika Anda mencari inspirasi, pastikan untuk melihat Demo Animasi Web yang terinspirasi Material, dengan sumber yang dihosting di GitHub. Demo ini menunjukkan berbagai efek luar biasa dan Anda dapat melihat kode sumber setiap demo secara inline.
Demo ini mencakup galaksi berputar yang berwarna-warni, 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 menghadirkannya ke semua browser modern, termasuk Internet Explorer, Firefox, dan Safari.
Jika ingin mencoba hal baru, Anda dapat menggunakan polyfill web-animations-next, yang juga menyertakan fitur yang belum selesai - seperti konstruktor GroupEffect dan SequenceEffect composable.
Untuk perbandingan antara kedua polyfill tersebut, harap lihat halaman beranda.
Untuk menggunakan salah satu polyfill dalam kode, Anda memiliki beberapa opsi.
Gunakan CDN, seperti cdnjs, jsDelivr, atau targetkan rilis tertentu melalui rawgit.com
Menginstal 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 lain-
<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 Animasi Web, termasuk cara menggunakannya bersama properti motion-path CSS baru.
Untuk beberapa contoh yang menggunakan motion-path, lihat dokumen Eric Willigers.