Cara Membuat Animasi SVG Menggunakan CSS
Animasi SVG dapat dilakukan melalui elemen asli seperti
Animasi CSS juga bisa menjadi cara alternatif menggunakan perpustakaan JavaScript seperti SnapSVG. Dalam postingan ini kita akan melihat apa yang mungkin bisa kami sampaikan dengan Animasi CSS di SVG.
1. Membuat Bentuk
Pertama-tama, kita perlu menggambar bentuk dan objek yang ingin kita animasikan. Anda dapat menggunakan aplikasi seperti Sketsa, Adobe Illustrator, atau Inkscape untuk membuat satu.
Untuk contoh ini, saya telah menggambar langit berawan sebagai latar belakang, dan sebuah kapal roket menembak ke atas, termasuk api:
Setelah selesai dengan gambar, kita perlu mengekspor setiap objek yang kita buat ke SVG.
Saya akan menggunakan Sketsa sebagai contoh untuk langkah ini. Pilih objek yang ingin Anda ubah menjadi format SVG. Di kanan bawah jendela Anda, klik Jadikan Dapat Diekspor. Pilih format SVG, lalu klik Ekspor objek-nama. Anda perlu melakukan objek yang satu ini sekaligus.
2. Masukkan SVG ke dalam HTML
Ketika Anda membuka file SVG di editor kode, Anda akan menemukan bahwa kode SVG cukup berantakan. Karenanya, sebelum kita menyebarkan file SVG, mari kita merapikan kode dan mengoptimalkannya dengan alat baris perintah ini yang disebut SVGO.
Meluncurkan Terminal atau Prompt Perintah, dan instal SVGO dengan baris perintah ini:
[sudo] npm instal -g svgo
Tun perintah, svgo, pada file SVG menggunakan --cantik untuk menghasilkan kode SVG yang dapat dibaca:
svgo rocket.svg --pretty
Jika Anda memiliki beberapa SVG di direktori, Anda dapat mengoptimalkan semuanya secara bersamaan. Dengan asumsi direktori tersebut bernama / gambar, lalu dari direktori induk gunakan perintah ini:
svgo -f gambar --pretty
Mari kita lihat perbedaannya sebelum dan sesudah menggunakan SVGO.
Salin kode dalam file SVG dan rekatkan ke file HTML. Kami akan mengerjakan ruang kerja seluas 800px kali 600px, jadi jangan lupa untuk mendefinisikan lebar pada elemen SVG.
SVG diatur dalam file HTML. Kita perlu mendefinisikan ID untuk setiap objek, sehingga kita dapat memilihnya dalam CSS nanti.
Untuk tutorial ini, kita perlu mendefinisikan ID untuk roket dan nyala api, dan beberapa awan. Agar objek untuk menangani tahap animasi nanti, kita perlu menambahkan id - Anda juga bisa menggunakan kelas - untuk setiap objek. Pada tahap ini, kode akan terlihat seperti ini:
3. Animate Menggunakan CSS
Sekarang mari kita bersenang-senang. Rencananya adalah untuk meningkatkan roket ke ruang angkasa. Roket itu terbagi menjadi dua kelompok; roket itu sendiri dan nyala api.
Pertama-tama, kami menempatkan roket di tengah ruang kerja, sebagai berikut:
#rocket transform: translate (260px, 200px);
Yang Anda lihat adalah ini:
Sekarang untuk membuat roket terlihat seperti naik, kita perlu membuat ilusi awan jatuh. CSS yang kami gunakan untuk ini adalah:
# cloud1 animasi: fall 1s linear infinite; @keyframes jatuh dari transform: translateY (-100px); ke transform: translateY (1000px)
Untuk membuatnya terlihat lebih realistis, mari kita buat animasi empat awan, dan buatlah “jatuh” pada kecepatan yang berbeda. Kami juga akan memposisikan mereka berbeda dari sumbu X.
Cloud kedua akan memiliki kode seperti ini:
# cloud2 animation: fall-2 2s linear infinite; @keyframes fall-2 from transform: translate (200px, -100px); ke transform: translate (200px, 1000px)
Perhatikan bahwa kami telah memindahkan cloud # 2 sedikit ke kanan, oleh 200px dengan menterjemahkan. Pada tahap ini, hasilnya akan terlihat seperti ini.
Selanjutnya, mari kita buat roket itu menjadi hidup. Kami akan menetapkan kerangka tombol animasi, sebagai berikut:
#rocket animation: popup 1s easy infinite; @keyframes popup 0% transform: translate (260px, 200px); 50% transform: translate (260px, 240px); 100% transform: translate (260px, 200px);
Dan tambahkan animasi ke api roket juga:
#flame animation: shake .2s linear tak terbatas; @keyframes goyang 0% transform: translate (55px, 135px) rotate (7deg); 20% transform: translate (55px, 135px) rotate (0deg); 40% transform: translate (55px, 135px) rotate (-7deg); 60% transform: translate (55px, 135px) rotate (0deg); 100% transform: translate (55px, 135px) rotate (0deg);
Kanan! Sekarang kode kita sudah siap, animasi seharusnya bekerja pada SVG kita.
Lihatlah peledakan roket kami ke ruang angkasa.
Pemikiran Akhir
Animasi bukan fitur termudah dalam CSS untuk dipahami. Namun semoga Anda akan menemukan tutorial ini sebagai titik awal yang baik untuk menjelajahi Animasi CSS di SVG lebih lanjut; Anda akan terkejut mengetahui apa yang dapat dicapai dengan Animasi CSS yang ada.
Jika Anda ingin memulai dengan dasar-dasarnya, Anda dapat mulai di sini dengan postingan ini: A Look Into: Animation Scalable Vector Graphics (SVG) atau ikuti seri SVG lainnya.
- Lihat Demo
- Sumber Unduhan
