Panduan Cara untuk Animasi SVG

Setiap insinyur front-end yang sepadan dengan garam mereka menyadari tantangan yang dibawa oleh ekosistem perangkat yang terfragmentasi. Ukuran layar, resolusi, dan rasio aspek yang berbeda menyulitkan untuk menghadirkan pengalaman yang konsisten. Terlebih lagi bagi mereka yang ingin menghadirkan pengalaman piksel sempurna.

Scalable Vector Graphics (SVGs) membantu memecahkan sebagian dari masalah itu, dan melakukannya dengan sangat baik. Meskipun mereka memiliki keterbatasan, SVG dapat sangat membantu untuk kesempatan tertentu dan, jika Anda memiliki tim desain yang baik, Anda juga dapat menciptakan pengalaman visual yang lebih memukau tanpa membebani browser web atau menghambat waktu pemuatan.

Selama beberapa bulan terakhir, saya telah mengerjakan sebuah proyek yang menggunakan SVG secara ekstensif serta kemampuan animasi dan efeknya. Dalam artikel ini, saya akan membagikan bagaimana Anda dapat menggunakan SVG dan teknik animasinya untuk membawa kehidupan baru ke pekerjaan front-end web Anda.

Grafik Vektor yang Dapat Diskalakan

SVG adalah format gambar yang didasarkan pada XML, seperti cara kerja HTML. Ini mendefinisikan elemen yang berbeda untuk sejumlah bentuk geometris yang dikenal yang dapat digabungkan dalam markup untuk menghasilkan grafik dua dimensi.

Spesifikasi SVG adalah standar terbuka yang dikembangkan oleh World Wide Web Consortium (W3C) pada tahun 1999.

Semua browser web utama telah memiliki dukungan rendering SVG untuk sementara waktu sekarang.

Karena grafik SVG adalah dokumen XML, browser web menyediakan API berbasis simpul DOM yang dapat digunakan untuk berinteraksi dengan gambar. Bicara tentang menghidupkan gambar!

Jalur SVG

Jika ada satu elemen yang dikuasai di SVG, itu akan menjadi elemen <path> .

Elemen jalur adalah bentuk dasar yang dapat digunakan untuk membuat hampir semua bentuk 2D tingkat lanjut yang dapat Anda bayangkan.

Elemen bekerja dengan mengambil urutan perintah menggambar. Ini sangat mirip dengan bahasa pemrograman Logo dari tahun 1967, hanya dimodernisasi dan dirancang untuk grafis mewah. Elemen mengambil urutan perintah menggambar ini melalui atribut d .

 <!-- A right-angled triangle --> <path d="M10 10 L75 10 L75 75 Z" />

Anda dapat memikirkan pena virtual yang menggambar di layar, dan komentar gambar di elemen jalur hanya mengontrol pena. Pada contoh di atas, pena diinstruksikan untuk pindah ke posisi (10, 10) ( M10 10 ), menggambar garis ke (75, 10) ( L75 10 ), menggambar garis ke (75, 75) L75 75 dan kemudian menutup jalur dengan kembali ke titik awal ( Z ).

Menggunakan perintah menggambar lainnya, seperti busur ( A ), kurva bezier kuadrat ( Q ), kurva bezier kubik ( C ), dll, Anda dapat membuat bentuk dan grafik yang jauh lebih kompleks di SVG.

Anda dapat mempelajari lebih banyak tentang elemen jalur di sini.

Jalur SVG dan CSS

"Oke Juan, aku mengerti. Path sangat kuat, tapi bagaimana cara menganimasikannya?” kamu bilang.

Untuk teknik pertama kita, kita akan memanfaatkan dua atribut SVG: stroke-dasharray dan stroke-dashoffset .

Atribut stroke-dasharray mengontrol pola garis putus-putus dan celah yang digunakan untuk menggores jalan. Jika Anda ingin menggambar garis Anda sebagai sekelompok tanda hubung dan celah alih-alih satu goresan tinta terus menerus, ini adalah atribut yang akan Anda gunakan.

Dengan gambar SVG menjadi bagian dari DOM browser web dan stroke-dasharray menjadi elemen presentasi, atribut juga dapat disetel menggunakan CSS.

Demikian pula, atribut stroke-dashoffset (yang menentukan seberapa jauh ke dalam pola tanda hubung untuk memulai tanda hubung) juga dapat dikontrol menggunakan CSS.

Kedua atribut SVG ini, bersama-sama, dapat digunakan untuk menganimasikan jalur SVG, memberikan ilusi kepada pemirsa bahwa jalur sedang digambar secara bertahap.

Ambil kurva bezier kuadrat ini, misalnya:

 <path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>

Untuk menganimasikan jalur ini seolah-olah sedang digambar secara bertahap dan mulus di layar, kita harus mengatur panjang tanda hubung (dan celah), menggunakan atribut stroke-dasharray, sama dengan panjang jalur. Hal ini dimaksudkan agar panjang setiap garis putus-putus dan celah pada kurva putus-putus sama dengan panjang seluruh lintasan.

Selanjutnya, kita akan mengatur offset tanda hubung, menggunakan atribut stroke-dashoffset, ke 0. Ini akan membuat jalur muncul di layar sebagai kurva padat (pada dasarnya kita melihat tanda hubung pertama, dan kita telah membuat setiap tanda hubung menjangkau seluruh panjang kurva). Dengan mengatur offset tanda hubung sama dengan panjang kurva, kita akan berakhir dengan kurva yang tidak terlihat (kita sekarang melihat kurva yang dirender sebagai seluruh celah—bagian yang segera mengikuti tanda hubung).

Sekarang dengan menganimasikan properti stroke-dashoffset, Anda dapat membuat kurva muncul di layar secara bertahap.

Lihat jalur Pen Toptal - SVG & CSS oleh Toptal Blog (@toptalblog) di CodePen.

Seperti yang Anda lihat, kurva selalu ada. Kami hanya mengubah offset tanda hubung untuk membuat bagian putus-putus muncul sedikit demi sedikit.

Anda dapat mengambil langkah lebih jauh dengan menggunakan prinsip yang sama tetapi dengan lebih banyak jalur:

Lihat jalur Pen Toptal - SVG & CSS oleh Toptal Blog (@toptalblog) di CodePen.

Di sini Anda memiliki satu kurva hitam yang tetap, yang merah bergerak di sepanjang jalan, dan satu lagi hitam mengikuti yang merah tetapi 40px di belakang.

Stroke-dasharray dan stroke-dashoffset adalah dua atribut yang sangat kuat yang dapat digunakan untuk menerapkan banyak animasi dan efek ke jalur SVG Anda. Anda dapat mencoba alat praktis ini yang dapat Anda gunakan untuk bereksperimen dengan dua atribut.

Menganimasikan Objek Sepanjang Jalur SVG

Dengan SVG dan CSS, hal keren lainnya yang dapat Anda lakukan adalah menganimasikan objek atau elemen yang mengikuti jalur.

Ada 2 atribut SVG yang akan kita gunakan untuk animasi:

• offset-path: Properti CSS offset-path menentukan jalur offset tempat elemen diposisikan.

• offset-distance: Properti CSS offset-distance menentukan posisi di sepanjang jalur offset.

Dengan menggabungkan kedua properti ini, Anda dapat membuat animasi seperti ini dengan mudah:

Lihat jalur Pen Toptal - SVG & CSS oleh Toptal Blog (@toptalblog) di CodePen.

Seperti yang Anda lihat, kami memiliki elemen baru div.ball .

Elemen ini bisa apa saja, div, gambar, teks, apa pun. Ide dalam contoh ini adalah bahwa dengan penggunaan jalur offset dan jarak offset Anda dapat memberikan elemen jalur untuk diikuti dan menganimasikan jarak dan elemen akan bergerak melalui jalur.

Animasi SVG Menggunakan JavaScript

Jika semua ini belum cukup mewah, Anda selalu dapat menggunakan JavaScript.

Menganimasikan elemen SVG dengan JavaScript bisa sangat mirip dengan menganimasikan elemen DOM. Namun, dengan JavaScript, Anda dapat mencapai teknik animasi yang telah kami periksa di atas, tetapi dengan lebih mudah.

Sebelumnya, kami harus membuat hardcode panjang jalur di CSS kami. Dengan bantuan fungsi JavaScript path.getTotalLength() dimungkinkan untuk menghitung panjang jalur dengan cepat dan menggunakannya sesuai kebutuhan. Anda dapat mempelajarinya lebih lanjut di sini.

Selain itu, sejumlah perpustakaan sudah siap membantu Anda yang dapat membuat animasi SVG jauh lebih mudah daripada yang sudah ada.

Snap.svg tidak hanya memudahkan menggambar gambar SVG menggunakan JavaScript, tetapi juga membuat animasinya semudah memanggil .animate({}) .

Pustaka lain, anime.js, memungkinkan Anda membuat elemen div mengikuti jalur SVG hanya dengan beberapa baris kode.

Jika Anda mencari perpustakaan yang melakukan lebih banyak hal sendiri tetapi membuat hasilnya tetap terlihat memukau, maka Vivus adalah yang Anda cari. Dibutuhkan pendekatan yang berbeda dan lebih didorong oleh konfigurasi untuk animasi jalur SVG. Dengan library ini, Anda hanya perlu menambahkan ID ke elemen SVG yang ingin Anda gambar dan mendefinisikan objek Vivus dengan ID tersebut. Vivis akan mengurus sisanya.

Bacaan lebih lanjut

Di bawah ini adalah daftar sumber daya yang mungkin berguna bagi Anda saat menangani gambar SVG dan menganimasikannya:

Untuk lebih mendalami animasi SVG, Anda dapat membaca artikel singkat ini tentang tiga cara menganimasikan gambar SVG dan menonton video screencast dengan Trik CSS.

Satu hal yang tidak dibahas artikel ini adalah menganimasikan gambar SVG dengan Synchronized Multimedia Integration Language (SMIL). Saat menggunakan CSV untuk SVG memberi Anda keuntungan bekerja dengan sesuatu yang sudah Anda kenal, SMIL membawa banyak hal ke tingkat berikutnya.

Dengan SMIL, Anda dapat menerapkan efek animasi tingkat lanjut seperti perubahan bentuk menggunakan SVG saja. Panduan singkat namun efektif untuk menggunakan SMIL untuk efek seperti itu tersedia di sini.

Meskipun, dukungan untuk SMIL agak tegang saat ini (tidak ada permainan kata-kata).

Animasi tanpa kompromi untuk Web

Dalam artikel ini, Anda telah melalui beberapa cara untuk menganimasikan elemen SVG menggunakan elemen CSS atau HTML di jalur SVG.

SVG ringan dan dapat digunakan untuk menghasilkan grafik yang tajam terlepas dari ukuran layar, tingkat zoom, dan resolusi layar. Dengan SVG, menghadirkan pengalaman modern dan jelas sekarang lebih mudah dari sebelumnya, sambil menuai manfaat dari penggunaan teknologi web standar.

Dan itu saja! Semoga tutorial animasi SVG ini bermanfaat bagi Anda dan senang membacanya.

Bacaan Lebih Lanjut di Blog Teknik Toptal:

• Cara Mendekati Animasi SVG di CSS