Bagaimana Saya Menggunakan WAAPI untuk Membangun Perpustakaan Animasi

Web Animations API memungkinkan kita membuat animasi dan mengontrol pemutarannya dengan JavaScript. API membuka mesin animasi browser untuk pengembang dan dirancang untuk mendasari implementasi animasi dan transisi CSS, membiarkan pintu terbuka untuk efek animasi di masa mendatang. Ini adalah salah satu cara paling efektif untuk menganimasikan di Web, membiarkan browser membuat pengoptimalan internalnya sendiri tanpa peretasan, paksaan, atau window.requestAnimationFrame() .

Dengan Web Animations API, kita dapat memindahkan animasi interaktif dari stylesheet ke JavaScript, memisahkan presentasi dari perilaku. Kita tidak perlu lagi bergantung pada teknik DOM-berat seperti menulis properti CSS dan kelas pelingkupan ke elemen untuk mengontrol arah pemutaran. Dan tidak seperti CSS deklaratif murni, JavaScript juga memungkinkan kita menetapkan nilai secara dinamis dari properti ke durasi. Untuk membangun perpustakaan animasi kustom dan membuat animasi interaktif, Web Animations API mungkin merupakan alat yang sempurna untuk pekerjaan itu. Mari kita lihat apa yang bisa dilakukannya!

Untuk sisa artikel ini, saya terkadang akan merujuk ke Web Animation API sebagai WAAPI. Saat mencari sumber daya di Web Animation API, Anda mungkin akan tersesat dengan mencari “Web Animation API” jadi, untuk memudahkan menemukan sumber daya, saya rasa kita harus mengadopsi istilah WAAPI; katakan padaku apa yang Anda pikirkan di komentar di bawah.

Ini adalah perpustakaan yang saya buat dengan WAAPI

@okikio/animate adalah perpustakaan animasi untuk web modern. Itu terinspirasi oleh animateplus , dan animejs ; ini berfokus pada kinerja dan pengalaman pengembang, dan menggunakan Web Animation API untuk menghadirkan animasi yang halus dalam ukuran kecil, dengan berat ~5,79 KB (diperkecil dan di-gzip).

Kisah di balik @okikio/animate

Pada tahun 2020, saya memutuskan untuk membuat perpustakaan PJAX yang lebih efisien, mirip dengan proyek Rezo ZeroStarting Blocks , tetapi dengan kemudahan penggunaan barbajs . Saya merasa blok awal lebih mudah diperluas dengan fungsionalitas khusus, dan dapat dibuat lebih mulus, lebih cepat, dan lebih mudah digunakan.

Catatan: jika Anda tidak tahu apa itu perpustakaan PJAX, saya sarankan untuk memeriksa MoOx/pjax ; singkatnya, PJAX memungkinkan transisi yang mulus antar halaman menggunakan permintaan pengambilan dan mengganti Elemen DOM.

Seiring waktu, niat saya berubah, dan saya mulai memperhatikan seberapa sering situs dari awwwards.com menggunakan PJAX, tetapi sering kali merusak pengalaman alami situs dan browser . Banyak situs tampak keren pada pandangan pertama, tetapi penggunaan sebenarnya sering menceritakan kisah yang berbeda — scrollbar sering diganti, prefetching sering kali terlalu bersemangat, dan kurangnya persiapan untuk orang-orang yang tidak memiliki koneksi internet, CPU, dan/atau GPU yang kuat. Jadi, saya memutuskan untuk secara progresif meningkatkan perpustakaan yang akan saya bangun. Saya memulai apa yang saya sebut "inisiatif asli" yang disimpan di repo GitHub okikio/native ; sarana untuk memperkenalkan semua fitur keren dan modern dengan performa tinggi, patuh, dan ringan.

Untuk inisiatif asli saya merancang perpustakaan PJAX @okikio/native ; saat menguji pada proyek yang sebenarnya, saya menemukan Web Animation API, dan menyadari bahwa tidak ada perpustakaan yang memanfaatkannya, jadi, saya mengembangkan @okikio/animate , untuk membuat perpustakaan animasi yang sesuai dengan browser. ( Catatan : ini pada tahun 2020, sekitar waktu yang sama menggunakan animasi web oleh wellyshen sedang dikembangkan. Jika Anda menggunakan reaksi dan memerlukan beberapa efek seperti animate.css cepat, gunakan-web-animasi sangat cocok.) Di pertama, itu seharusnya pembungkus sederhana tetapi, sedikit demi sedikit, saya membangunnya dan sekarang memiliki paritas fitur 80% dengan perpustakaan animasi yang lebih matang.

Catatan: Anda dapat membaca lebih lanjut tentang inisiatif asli serta perpustakaan @okikio/native di repo Github okikio/native . Juga, okikio/native, adalah monorepo dengan @okikio/native dan @okikio/animate menjadi sub-paket di dalamnya.

Di mana @okikio/animate cocok dengan artikel ini

Web Animation API sangat terbuka dalam desain. Ini berfungsi sendiri tetapi bukan API yang paling ramah pengembang atau intuitif, jadi saya mengembangkan @okikio/animate untuk bertindak sebagai pembungkus WAAPI dan memperkenalkan fitur yang Anda kenal dan sukai dari perpustakaan animasi lain yang lebih matang (dengan beberapa termasuk fitur baru) ke sifat kinerja tinggi dari Web Animation API. Baca README proyek untuk lebih banyak konteks.

Sekarang, mari kita mulai

@okikio/animate membuat animasi dengan membuat instance baru dari Animate (kelas yang bertindak sebagai pembungkus di sekitar Web Animation API).

 import { Animate } from"@okikio/animate"; new Animate({ target: [/* ... */], duration: 2000, // ... });

Kelas Animate menerima sekumpulan target untuk dianimasikan, kemudian membuat daftar instance Animasi WAAPI , di samping animasi utama (animasi utama adalah instance Animasi kecil yang disetel untuk menganimasikan elemen yang tidak terlihat, kelas ini ada sebagai cara melacak kemajuan animasi dari berbagai elemen target), Animate kemudian memainkan setiap elemen target Contoh Animasi, termasuk animasi utama, untuk membuat animasi yang halus.

Animasi utama ada untuk memastikan akurasi dalam implementasi WAAPI vendor browser yang berbeda. Animasi utama disimpan di Animate.prototype.mainAnimation , sedangkan instance Animation elemen target disimpan dalam WeakMap , dengan kuncinya adalah KeyframeEffect . Anda dapat mengakses animasi untuk target tertentu menggunakan Animate.prototype.getAnimation(el) .

Anda tidak perlu sepenuhnya memahami kalimat sebelumnya, tetapi kalimat tersebut akan membantu pemahaman Anda tentang apa yang dilakukan @okikio/animate. Jika Anda ingin mempelajari lebih lanjut tentang cara kerja WAAPI, lihat MDN , atau jika Anda ingin mempelajari lebih lanjut tentang perpustakaan @okikio/animate, saya sarankan untuk memeriksa proyek okikio/asli di GitHub.

Penggunaan, contoh, dan demo

Secara default, membuat instance Animate baru sangat mengganggu, jadi, saya membuat animate , yang membuat instance Animate baru setiap kali dipanggil.

 import animate from "@okikio/animate"; // or import { animate } from "@okikio/animate"; animate({ target: [/* ... */], duration: 2000, // ... });

Saat menggunakan perpustakaan @okikio/animate untuk membuat animasi, Anda dapat melakukan ini:

 import animate from "@okikio/animate"; // Do this if you installed it via the script tag: const { animate } = window.animate; (async () => { let [options] = await animate({ target: ".div", // Units are added automatically for transform CSS properties translateX: [0, 300], duration: 2000, // In milliseconds speed: 2, }); console.log("The Animation is done..."); })();

Anda juga dapat bermain dengan demo dengan kontrol pemutaran:

Cobalah Jalur Gerak:

Coba berbagai jenis Gerak dengan mengubah Opsi Animasi:

Saya juga membuat halaman demo yang kompleks dengan polyfills:

Anda dapat menemukan kode sumber untuk demo ini di file animate.ts dan animate.pug di repo GitHub. Dan, ya, demonya menggunakan Pug, dan merupakan pengaturan yang cukup rumit. Saya sangat menyarankan untuk melihat README sebagai dasar untuk memulai .

Inisiatif asli menggunakan Gitpod , jadi jika Anda ingin bermain dengan demo, saya sarankan mengklik tautan "Buka di Gitpod" karena seluruh lingkungan sudah disiapkan untuk Anda — tidak ada yang perlu dikonfigurasi.

Anda juga dapat melihat beberapa contoh lagi dalam koleksi CodePen yang saya kumpulkan ini. Untuk sebagian besar, Anda dapat mem-port kode Anda dari animejs ke @okikio/animate dengan sedikit masalah.

Saya mungkin harus menyebutkan bahwa @ okikio / bernyawa mendukung baik target dan targets kata kunci untuk target pengaturan animasi. @okikio/animate akan menggabungkan kedua daftar target menjadi satu daftar dan menggunakan Set s untuk menghapus target berulang. @okikio/animate mendukung fungsi sebagai opsi animasi, sehingga Anda dapat menggunakan staggering yang mirip dengan animejs . ( Catatan : urutan argumen berbeda, baca lebih lanjut di bagian "Opsi Animasi & Properti CSS sebagai Metode" dari file README.)

Pembatasan dan batasan

@okikio/animate tidak sempurna; tidak ada yang benar-benar ada, dan mengingat Web Animation API adalah standar hidup yang terus ditingkatkan, @okikio/animate sendiri masih memiliki banyak ruang untuk berkembang. Karena itu, saya terus berusaha untuk meningkatkannya dan akan menyukai masukan Anda, jadi silakan buka masalah baru, buat permintaan tarik, atau kita dapat berdiskusi di proyek GitHub .

Keterbatasan pertama adalah bahwa ia tidak benar-benar memiliki garis waktu bawaan. Ada beberapa alasan untuk ini:

  1. Aku kehabisan waktu. Saya masih mahasiswa dan tidak punya banyak waktu untuk mengembangkan semua proyek yang saya inginkan.
  2. Saya tidak berpikir garis waktu formal diperlukan, karena pemrograman async/menunggu didukung. Juga, saya menambahkan timelineOffset sebagai opsi animasi, jika ada yang perlu membuat sesuatu yang mirip dengan timeline di animejs.
  3. Saya ingin membuat @okikio/animate sekecil mungkin.
  4. Dengan efek grup dan efek urutan segera hadir, saya pikir akan lebih baik untuk membiarkan paket kecil sampai kebutuhan yang sebenarnya muncul. Pada catatan itu, saya sangat menyarankan membaca seri Daniel C. Wilson di WAAPI , khususnya angsuran keempat yang mencakup efek grup dan efek urutan.

Keterbatasan lain dari @okikio/animate adalah kurangnya dukungan untuk easing khusus, seperti pegas, elastis, dll. Tapi lihat proposal Jake Archibald untuk worklet easing . Dia membahas beberapa standar yang saat ini sedang dibahas. Saya lebih suka proposalnya, karena ini yang paling mudah diterapkan, belum lagi yang paling elegan. Sementara itu, saya mengambil inspirasi dari artikel Kirill Vasiltsov tentang animasi Musim Semi dengan WAAPI dan saya berencana untuk membangun sesuatu yang serupa ke dalam perpustakaan.

Batasan terakhir adalah @okikio/animate hanya mendukung unit otomatis pada fungsi transformasi misalnya translateX , translate , scale , skew , dll. Ini tidak lagi berlaku pada @okikio/animate@2.2.0, tetapi masih ada beberapa batasan pada properti CSS yang mendukung warna. Periksa rilis GitHub untuk detail lebih lanjut.

Sebagai contoh:

 animate({ targets: [".div", document.querySelectorAll(".el")], // By default "px", will be applied translateX: 300, left: 500, margin: "56 70 8em 70%", // "deg" will be applied to rotate instead of px rotate: 120, // No units will be auto applied color: "rgb(25, 25, 25)", "text-shadow": "25px 5px 15px rgb(25, 25, 25)" });

Melihat ke masa depan

Beberapa fitur masa depan, seperti ScrollTimeline , sudah dekat. Saya tidak berpikir ada orang yang benar-benar tahu kapan itu akan dirilis tetapi karena ScrollTimeline di Chrome Canary 92, saya pikir aman untuk mengatakan peluang rilis dalam waktu dekat terlihat cukup bagus.

Saya membangun opsi animasi timeline ke @okikio/animate untuk membuktikannya di masa depan. Berikut ini contohnya:

Terima kasih kepada Bramus atas inspirasi demonya ! Selain itu, Anda mungkin memerlukan Chrome versi Canary atau perlu mengaktifkan fitur Platform Web Eksperimental di Bendera Chrome untuk melihat demo ini. Tampaknya berfungsi dengan baik di Firefox, jadi… .

Jika Anda ingin membaca lebih lanjut di ScrollTimeline, Bramus menulis artikel yang sangat bagus tentangnya . Saya juga menyarankan untuk membaca artikel Pengembang Google tentang Worklet Animasi .

Harapan saya adalah untuk membuat perpustakaan lebih kecil. Saat ini ~ 5,79 KB yang tampaknya tinggi, setidaknya bagi saya. Biasanya, saya akan menggunakan embed bundlephobia tetapi itu memiliki masalah dalam menggabungkan proyek, jadi jika Anda ingin memverifikasi ukurannya, saya sarankan menggunakan bundle.js.org karena itu sebenarnya menggabungkan kode secara lokal di browser Anda. Saya secara khusus membuatnya untuk memeriksa ukuran bundel @okikio/animate, tetapi perhatikan itu tidak seakurat bundlephobia.

Polyfill

Salah satu demo sebelumnya menunjukkan polyfill beraksi. Anda akan membutuhkan web-animations-next.min.js dari web-animasi-js untuk mendukung garis waktu. Fitur modern lainnya yang diperlukan konstruktor KeyframeEffect

Polyfill menggunakan JavaScript untuk menguji apakah KeyframeEffect didukung dan, jika tidak, polyfill akan memuat dan melakukan tugasnya. Hindari menambahkan async/defer ke polyfill, atau itu tidak akan berfungsi seperti yang Anda harapkan. Anda juga ingin melakukan polyfill Map , Set , dan Promise .

 <html> <head> <!-- Async --> <script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=default,es2015,es2018,Array.prototype.includes,Map,Set,Promise" async></script> <!-- NO Async/Defer --> <script src="./js/webanimation-polyfill.min.js"></script> </head> <body> <!-- Content --> </body> </html>

Dan jika Anda sedang membangun untuk ES6+, saya sangat menyarankan menggunakan esbuild untuk transpiling, bundling, dan minifying. Untuk ES5, saya sarankan menggunakan esbuild (dengan minify off), TypeScript (dengan target ES5), dan terser ; sampai sekarang, ini adalah pengaturan tercepat untuk transpile ke ES5, lebih cepat dan lebih dapat diandalkan daripada babel. Lihat Gulpfile dari demo untuk lebih jelasnya.

Kesimpulan

@okikio/animate adalah pembungkus di sekitar Web Animation API (WAAPI) yang memungkinkan Anda untuk menggunakan semua fitur yang Anda sukai dari animejs dan perpustakaan animasi lainnya, dalam paket kecil dan ringkas. Jadi, apa pendapat Anda setelah membacanya? Apakah itu sesuatu yang Anda pikir akan Anda raih saat Anda perlu membuat animasi yang rumit? Atau, yang lebih penting lagi, apakah ada sesuatu yang menghalangi Anda untuk menggunakannya? Tinggalkan komentar di bawah atau bergabunglah dalam diskusi di Github Discussions .


Artikel ini awalnya muncul di dev.to, juga muncul di hackernoon.com dan hashnode.com .
Foto oleh Pankaj Patel di Unsplash .


PostingBagaimana Saya Menggunakan WAAPI untuk Membangun Perpustakaan Animasi muncul pertama kali di CSS-Tricks .

Anda dapat mendukung Trik-CSS dengan menjadi Pendukung MVP .

June 16, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *