Panduan Pemula untuk Animasi SVG Dengan CSS

Scalable Vector Graphics (SVGs) lebih dari sekedar file gambar. Sebagai aplikasi XML, SVG berisi markup yang terlihat dan berfungsi seperti HTML. Anda juga dapat menggunakannya bersama dengan kode CSS dan JavaScript. Ini memungkinkan untuk menganimasikan file SVG, membuat gambar kompleks yang berfungsi dengan baik untuk desain web dan lingkungan dinamis lainnya.

Tapi bagaimana Anda membuat animasi SVG? Mulailah dengan bentuk SVG, animasikan menggunakan CSS, dan bangun di atas prinsip-prinsip ini untuk menggunakan animasi dalam pekerjaan Anda sendiri.

Menganimasikan SVG Dengan HTML dan CSS

Meskipun Anda dapat menggunakan JavaScript untuk menganimasikan SVG secara terprogram, CSS sekarang juga memiliki dukungan yang baik untuk animasi. Anda dapat menemukan semua kode sampel di CodePen untuk proyek ini.

Membangun Gambar SVG Di Dalam HTML

Langkah pertama dalam proses ini adalah membangun gambar SVG yang akan Anda kerjakan. Anda dapat menemukan markup SVG di panel HTML pada CodePen.

Struktur SVG

Meskipun SVG memiliki format yang mirip dengan HTML, tag yang Anda gunakan untuk membuatnya berbeda. SVG memiliki tag pembuka dan penutup () yang dapat berisi berbagai properti yang berbeda. Dalam kasus kami, kami menggunakan Indo dan kotak tampilan properti. Properti id berfungsi seperti ID HTML lainnya, memberi Anda pengidentifikasi unik untuk digunakan di CSS/JS Anda. Properti viewBox mengatur ukuran SVG kami.

<!-- SVG dengan ukuran responsif -->
<id svg ="MUOSVGAanimasi" kotak tampilan="0 0 800 600">
<!-- Konten SVG -->
</svg>

Anda dapat menggunakan properti lebar dan tinggi sebagai gantinya, seperti yang ditunjukkan contoh berikut. Namun, viewBox membuat SVG responsif yang akan cocok dengan ukuran area pandang tanpa merusak rasio aspeknya.

 SVG dengan ukuran statis 
<id svg ="MUOSVGAanimasi" lebar ="800" tinggi ="600">
<!-- Konten SVG -->
</svg>

Bentuk SVG

Anda dapat membuat gambar mendetail dengan SVG, dengan serangkaian alat bentuk berbeda yang Anda inginkan. Contoh SVG ini menggunakan tiga bentuk yang tersedia, tetapi ada banyak bentuk lainnya. Setiap bentuk dalam contoh ini memiliki ID unik yang dapat digunakan oleh animasi CSS nanti.

• SVG Ellipse: Ini adalah alat lingkaran/oval. Ini menentukan properti untuk radius sumbu y/x (rx/ry), warna isian, dan lebar goresan. Penting untuk diingat bahwa radius yang Anda pilih dengan alat ini akan menjadi setengah dari diameter bentuk.

<id elips ="lingkaran" rx="100" ry ="100" isi ="#ffed00" lebar goresan="0"/>

• SVG Rect: Alat SVG rect membuat persegi atau persegi panjang. Yang ini memiliki properti untuk lebar/tinggi, transformasi, warna isian, dan lebar goresan.

<id lurus ="kotak" lebar ="200" tinggi ="200" mengubah ="menerjemahkan (300 200)" isi ="#05f"
 lebar goresan="0"/>

• Poligon SVG: Gunakan poligon SVG untuk menetapkan jumlah titik tertentu dan membuat bentuk arbitrer dengan ukuran berbeda. Poligon dalam contoh adalah tiga sisi, membuatnya menjadi segitiga, dan Anda dapat melihat posisi setiap titik yang diplot dalam propertinya. Bersamaan dengan ini, kami memiliki properti untuk posisi, warna isian, dan lebar goresan segitiga.

<id poligon ="segi tiga" poin ="15,-97 115,102 -84,102 15,-97"
 mengubah ="terjemahkan (0,0)" isi ="#f00" lebar goresan="0"/>

Setelah animasi di tempat, bentuk akan berbaris di samping satu sama lain.

Ketiga bentuk SVG ini adalah yang paling umum, tetapi ada lebih banyak lagi yang bisa Anda pilih. Anda dapat menggunakan bentuk berikut ketika bekerja dengan animasi SVG:

• SVG Circle: Bentuk ini mirip dengan elips, tetapi selalu memiliki radius X dan Y yang sama.
• Garis SVG: Garis SVG adalah segmen garis tunggal dengan dua titik, satu di setiap ujungnya.
• SVG Polyline: Polylines seperti garis dasar, hanya saja mereka dapat memiliki lebih dari dua titik.
• Poligon SVG: Poligon SVG seperti persegi panjang, hanya saja mereka dapat memiliki lebih dari empat titik, membuat bentuk yang rumit menjadi mungkin.
• Jalur SVG: Jalur SVG bekerja mirip dengan alat pena di Adobe Photoshop. Garis dapat terhubung seperti polyline/poligon, tetapi mereka juga dapat memiliki kurva yang diterapkan padanya.

Cara Menganimasikan SVG Dengan CSS

Sekarang Anda memiliki beberapa bentuk di dalam SVG Anda, saatnya untuk beralih ke animasi CSS. Masing-masing bentuk memiliki animasi yang berbeda untuk mendemonstrasikan beberapa opsi yang Anda miliki, tetapi ada banyak lagi untuk dijelajahi dengan desain Anda sendiri. Lingkaran bergerak melintasi layar, sudut persegi menjadi bulat, dan segitiga berputar. Semua ini menggunakan Keyframe CSS untuk membuat animasi yang halus.

Memindahkan Lingkaran Menggunakan Transform dan Translate

Lingkaran dalam contoh SVG bergerak dari bawah ke atas layar selama siklus animasinya. Anda perlu menetapkan animasi ke lingkaran sebelum dapat bergerak, melalui properti CSS:

#lingkaran {
 animasi: circle_anim 2000ms linier ke depan normal tak terbatas
}

Kata pertama dalam nilai, lingkaran_anim, adalah nama untuk animasi. Ini berjalan selama dua detik (2000ms). Ini memiliki linier kurva yang menjaga kecepatannya tetap konsisten dan diatur untuk berjalan tak terbatas berapa kali dalam ke depan arah. Anda dapat menggunakan bingkai utama untuk menentukan fase individual dari animasi:

@keyframes lingkaran_anim {
 0% { mengubah: menerjemahkan(155px, 305px) }
 45% { mengubah: menerjemahkan(155px, -123px) }
 50% { mengubah: menerjemahkan(-123px, -123px) }
 55% { mengubah: menerjemahkan(-123px, 728px) }
 60% { mengubah: menerjemahkan(155px, 728px) }
 100% { mengubah: menerjemahkan(155px, 305px) }
}

Ada enam keyframe dalam animasi ini, sehingga lingkaran akan berpindah ke enam lokasi berbeda di setiap siklus. Itu mengubah: menerjemahkan properti mengatur posisi lingkaran di setiap tahap. Pada 0% lingkaran berada di tengah layar dan bergerak ke atas dan tidak terlihat sebesar 45%. Dengan 50% itu telah pindah ke kiri layar sebelum bergerak ke bawah di bawah viewport di 55%. Lingkaran bergerak kembali ke posisi horizontal sebesar 60%, dan animasi selesai pada 100% dengan lingkaran kembali di tengah layar.

Menganimasikan Properti Radius Perbatasan Square

Kotak dalam contoh menawarkan referensi yang bagus untuk animasi properti umum. Selama Anda mengetahui sintaks yang benar untuk digunakan, Anda dapat menganimasikan properti CSS apa pun. Properti radius perbatasan adalah demonstrasi yang bagus untuk ini. Alun-alun memiliki sudut tajam yang berubah menjadi sudut membulat dan kemudian kembali menjadi sudut persegi lagi.

#kotak { animasi: square_anim 2000ms kemudahan masuk ke depan normal tak terbatas }

Animasi persegi disebut square_anim dan memiliki run-time dua detik. Itu kemudahan masuk kurva membuat animasi lebih lambat di awal dan akhir, menciptakan efek yang halus.

@keyframes persegi_anim {
 0% { rx: 0px; ry: 0px }
 45% { rx: 40px; ry: 40px }
 55% { rx: 40px; ry: 40px }
 100% { rx: 0px; ry: 0px }
}

Seperti yang Anda lihat, animasi ini memiliki empat keyframe. Radius batas X dan Y berubah dari 0 piksel menjadi 40 piksel antara 0% dan 45%, berhenti pada 40 piksel hingga 55%. Kemudian kembali ke 0px untuk setiap radius pada saat animasi mencapai 100%.

Putar Segitiga SVG Dengan Transform

Animasi SVG terakhir dalam contoh ini adalah yang paling sederhana, dengan segitiga berputar di sekitar titik pusatnya. Bentuknya menyelesaikan revolusi penuh setiap dua detik dan terus berjalan tanpa batas. Ini memiliki kurva kemudahan-keluar yang menghasilkan animasi yang melambat di akhir. Animasi ini disebut triangle_anim.

#segi tiga { animasi: segitiga_anim 2000ms kemudahan-keluar normal ke depan yang tak terbatas }

Animasi ini memiliki dua keyframe, satu pada 0% dan yang lainnya pada 100%. Properti Transform rotate mengubah segitiga dari 0 derajat pada 0% menjadi 360 derajat pada 100%, menciptakan putaran penuh.

@keyframes segitiga_anim {
 0% { mengubah: menerjemahkan(644px, 297px) memutar(0 derajat) }
 100% { mengubah: menerjemahkan(644px, 297px) memutar(360 derajat) }
}

Cara Menganimasikan Properti Lainnya

Tiga animasi yang dibahas di atas adalah titik awal yang baik ketika Anda bekerja dengan SVG, tetapi Anda mungkin ingin mendorong ini lebih jauh. Anda dapat menggunakan aturan animasi CSS untuk menyesuaikan hampir semua nilai properti yang dapat Anda tetapkan ke SVG Anda. Ini termasuk nilai dasar, seperti ukuran dan pemosisian, serta nilai lanjutan, seperti batas, bayangan, dan mode campuran.

Dalam kasus yang jarang terjadi di mana CSS tidak dapat melakukan pekerjaan itu, Anda dapat menggunakan kode JavaScript untuk menganimasikan gambar SVG. Anda dapat menemukan banyak panduan untuk membantu Anda dengan ini setelah Anda merasa siap untuk mengambil langkah berikutnya dengan SVG Anda.

Membuat Animasi SVG Anda Sendiri

Baik Anda seorang desainer web, pengembang perangkat lunak, atau hanya orang yang kreatif, animasi SVG bisa menyenangkan dan memuaskan untuk dibuat. Anda dapat menemukan banyak sumber daya di seluruh web yang dapat membantu Anda dengan animasi berbasis web, setelah Anda merasa nyaman dengan dasar-dasarnya.

10 Pola Latar Belakang CSS yang Dapat Anda Gunakan di Situs Web Anda

Baca Selanjutnya