Selamat siang teman!API Web terus berkembang. Beberapa dari mereka, seperti Konsol atau Kanvas, didukung dengan baik oleh semua browser, yang lain masih dalam pengembangan.Salah satu API yang sedang dikembangkan adalah Web Animations API atau WAAPI. Terlepas dari kenyataan bahwa versi pertama dari spesifikasi diterbitkan pada tahun 2012, dan API itu sendiri pertama kali diterapkan di browser Firefox dan Chrome pada tahun 2014, saya mengetahuinya baru-baru ini (saya belum pernah mendengarnya sebelumnya - sekitar Per.).Ini memungkinkan pengembang untuk bekerja dengan animasi CSS menggunakan JavaScript. Sintaksnya mirip dengan sintaks animasi CSS tradisional, tetapi memiliki beberapa fitur yang membuatnya lebih mudah bagi pengembang untuk membuat dan memodifikasi animasi.Mari kita lihat API ini dengan contoh sederhana.Di bawah ini kita melihat kotak yang berputar, warna yang berubah dengan setiap belokan.
CSS mungkin terlihat seperti ini:#cube {
width: 40px;
height: 40px;
margin: 50%;
background-color: pink;
animation: rotateCube 1s infinite;
}
@keyframes rotateCube {
0% {
transform: rotate(0deg);
}
30% {
background-color: purple;
}
100% {
transform: rotate(180deg);
}
}
Sekarang lakukan hal yang sama dengan WAAPI.Buat animasi
Semuanya dimulai dengan pembuatan objek Keyframes yang berisi informasi yang mirip dengan yang terkandung dalam direktif @keyframes CSS kami:let cubeRotating = [
{transform: 'rotate(0deg)', backgroundColor: 'pink'},
{backgroundColor: 'purple', offset: 0.3},
{transform: 'rotate(180deg)', backgroundColor: 'pink'}
]
Kami melihat dua perbedaan utama:- Kita perlu menambahkan backgroundColor ke langkah lain.
- Kami tidak perlu menentukan waktu untuk menyelesaikan setiap langkah sebagai persentase.
WAAPI secara otomatis membagi animasi menjadi bagian yang sama dengan jumlah tombol, jadi dalam kasus kami warna latar akan berubah sekitar setengah dari animasi.Namun, kami ingin ini terjadi sebesar 30%, jadi kami menambahkan properti offset dengan nilai 0,3 di langkah kedua.Ada satu hal penting yang perlu diingat: objek Keyframes harus memiliki setidaknya dua kunci. Kalau tidak, NotSupportedError akan dibuang.Selanjutnya, sebuah objek dibuat yang berisi properti animasi yang bertanggung jawab untuk durasi dan jumlah pengulangan:let cubeTiming = {
duration: 1000,
iterations: Infinity
}
Durasi animasi diatur dalam milidetik.Alih-alih "tak terbatas" kami menggunakan kata kunci "Infinity".Akhirnya, untuk menjalankan animasi, kami menggunakan metode Element.animate:document.getElementById('cube').animate(
cubeRotating,
cubeTiming
)
Ada beberapa opsi sintaksis lainnya. Contohnya dapat ditemukan di sini .Tapi itu belum semuanya. Faktanya adalah bahwa dengan WAAPI kita dapat mengontrol pemutaran animasi!Kontrol Pemutaran Animasi
Memanggil metode menghidupkan memulai animasi segera, tetapi ini tidak selalu seperti yang kita inginkan. Oleh karena itu, kita dapat memanggil metode jeda dan bermain untuk menghentikan dan memulai animasi, masing-masing:let cubeAnimation = document.getElementById('cube').animate(
cubeRotating,
cubeTiming
)
cubeAnimation.pause()
document.body.onclick = () => cubeAnimation.play()
Dalam contoh kami, kami bekerja dengan satu animasi, tetapi Anda dapat menambahkan beberapa "animasi" ke halaman dan mengaturnya sesuka Anda.Di antara metode WAAPI yang tersedia, ada juga metode selesai, batal, dan balikkan.Kami juga dapat mengontrol kecepatan pemutaran animasi:let cubeAnimation = document.getElementById('cube').animate(
cubeRotating,
cubeTiming
)
document.body.onclick = () => cubeAnimation.playbackRate *= 1.5
Kode ini membuat kuadrat memutar lebih cepat saat diklik.
Sejauh ini, kami telah belajar cara membuat satu animasi dan mengontrol pemutarannya. Fitur WAAPI lainnya adalah akses ke semua animasi sekaligus.Kelola banyak animasi
WAAPI memiliki metode getAnimations yang memungkinkan Anda untuk mengakses semua animasi yang dibuat.Misalkan kita ingin memperlambat semua animasi yang ada di halaman jika pengguna telah mengaktifkan prefers-reduced-motion (fungsi media CSS preferers -uced-motion dapat digunakan untuk menentukan apakah pengguna telah meminta agar OS meminimalkan jumlah animasi atau gerakan yang digunakannya. - perkiraan.):const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
if(mediaQuery.matches){
document.getAnimations().forEach(animation => {
animation.playbackRate *= 0.5
})
}
Pada contoh di atas, kami mencari fungsi media yang lebih suka gerak dikurangi dan, jika nilainya berkurang, kami mendapatkan semua animasi pada halaman dan mengurangi kecepatan pemutarannya hingga setengahnya.Ini adalah salah satu hal yang membuat WAAPI sangat berguna. Kami dapat membuat perubahan pada beberapa animasi dengan mengubah satu properti.Ketergantungan
Fitur lain yang menarik dari WAAPI adalah kemampuan untuk menentukan ketergantungan properti dari satu animasi pada properti yang lain.Sebagai contoh, jika kita memiliki dua kotak, dan kita ingin yang kedua berputar dua kali lebih cepat daripada yang pertama, kita dapat melakukan ini dengan dua cara.Cara pertama:let cube1Animation = document.getElementById('cube').animate(
cubeRotating,
{
duration: 1000,
iterations: Infinity
}
)
let cube2Animation = document.getElementById('cube2').animate(
cubeRotating,
{
duration: 500,
iterations: Infinity
}
)
Waktu animasi alun-alun pertama adalah 1 detik, yang kedua - 500 milidetik.Namun, dengan pendekatan ini, ketika kita mengubah waktu animasi dari kotak pertama, kita perlu melakukan hal yang sama untuk kotak kedua.Bayangkan betapa sulitnya menjadi ketika ada banyak animasi atau sejumlah besar objek animasi?Cara terbaik untuk memecahkan masalah kita adalah dengan menetapkan ketergantungan rotasi dari kuadrat kedua pada yang pertama:let cube1Animation = document.getElementById('cube').animate(
cubeRotating,
{
duration: 1000,
iterations: Infinity
}
)
let cube2Animation = document.getElementById('cube2').animate(
cubeRotating,
{
duration: cube1Animation.effect.timing.duration / 2,
iterations: Infinity
}
)
Jadi, kami menggunakan waktu animasi dari kotak pertama untuk menentukan waktu animasi kotak kedua. Sekarang, ketika mengubah waktu animasi dari kotak pertama, yang kedua akan selalu berputar dua kali lebih cepat!
Performa
Berbicara tentang kinerja, saya tidak melihat banyak perbedaan antara menggunakan CSS dan WAAPI. Tetapi ini mungkin karena kesederhanaan dari contoh saya.Salah satu keuntungan penting WAAPI daripada metode lain untuk membuat animasi di JS adalah berjalan di utas terpisah, yang memungkinkan utas utama untuk "lupa" tentang animasi dan melakukan sisa kode.Dukungan browser
WAAPI saat ini dalam status draf dan sebagian didukung di versi terbaru Firefox dan Chrome, serta di browser seluler utama.Dukungan sebagian berarti bahwa browser mendukung metode seperti bermain, jeda, mundur, selesai, dan playbackRate, tetapi tidak mendukung getAnimations.
Ada polifile untuk WAAPI di semua browser.Itu saja untuk saya!Bacaan lebih lanjut:Menggunakan API AnimasiWeb Contoh Animasi Web APISeri hebat “Mari kita bicara tentang API Animasi Web” oleh Dan WilsonTerima kasih atas perhatian Anda.