Cara Membuat Animasi SVG Dengan CSS

Animasi web sangat digemari akhir-akhir ini, dan tidak ada batasan untuk apa yang dapat Anda desain dengan SVG. Jika Anda siap mencobanya di situs Anda sendiri, mengetahui konsep animasi dasar akan membantu Anda membangun desain yang lebih kompleks. SVG sangat bagus untuk animasi di web karena dapat diskalakan dan bebas resolusi (artinya dapat diskalakan tanpa kehilangan kualitas), tidak seperti file JPEG dan PNG. Mereka juga mudah ditata karena Anda dapat menggunakan CSS, filter, dan interaktivitas untuk menyempurnakan SVG.

Sebelum kita masuk ke tutorial, Anda harus terbiasa dengan transisi dan transformasi CSS. Beberapa konsep yang sama akan digunakan dengan SVG.

dasar-dasar SVG

SVG, atau Scalable Vector Graphics, menggunakan format teks berbasis XML untuk mendeskripsikan tampilan gambar. SVG adalah file teks dengan sekumpulan XML di dalamnya. Jika Anda membukanya dengan editor kode, Anda akan mengerti maksud kami. Alasan mengapa SVG dapat diskalakan ke berbagai ukuran tanpa kehilangan kualitas adalah karena teks digunakan untuk mendeskripsikan grafik.

Informasi visual dalam file SVG dihitung dan dirender oleh browser atau perangkat lunak grafik apa pun yang Anda gunakan untuk memodifikasinya. Mereka tidak serumit JPG atau format file gambar lainnya, yang memungkinkannya dirancang dan diedit secara manual dalam editor teks, jika Anda memilih untuk melakukannya. Mereka dapat diubah dan diberi gaya dengan CSS, membuatnya mengagumkan untuk didesain di web.

Dukungan browser untuk grafik SVG cukup universal; IE8 mungkin memberikan beberapa masalah, tetapi browser modern menangani SVG dengan luar biasa. Mungkin ada bug kecil di sana-sini, tetapi biasanya lancar.

Cara membuat grafik SVG

Adobe Illustrator adalah salah satu program pilihan saat membuat SVG. Pada kenyataannya, mereka dapat dibuat dari awal karena semuanya XML, tetapi mungkin lebih mudah menggunakan program desain, terutama untuk SVG yang lebih kompleks.

Tips saat mendesain di Adobe Illustrator

Seperti halnya proyek Adobe Illustrator lainnya, kotak pembatas adalah tempat ilustrasi dibuat, jadi penting untuk memastikan semuanya ada. Cara terbaik untuk melakukannya adalah dengan memilih karya seni yang ingin Anda miliki di SVG Anda dan kemudian pergi ke Object > Artboards > Fit to Artwork Bounds.

Ini adalah langkah yang sangat penting. Ada beberapa kejadian di mana kami belum melakukan ini, dan gambar terlihat sangat kecil di situs karena ruang putih ekstra. Membuat semuanya pas dalam batas-batas menyelesaikan masalah.

Ini mungkin bukan hal yang paling menyenangkan untuk dilakukan saat Anda berada dalam mode desain, tetapi berhati-hati dan konsisten dengan penamaan lapisan akan membantu Anda saat Anda melakukan pekerjaan animasi di masa mendatang dengan grafik. "Lapisan Satu, Lapisan Dua" akan membuat sulit untuk mengingat lapisan mana yang berisi bagian mana dari grafik. Alasannya adalah Illustrator akan menggunakan nama-nama ini untuk menghasilkan ID dalam kode SVG.

Grup lapisan luar biasa, terutama untuk grafik yang lebih kompleks. Mereka juga digunakan untuk membuat grup dalam file SVG. Saat Anda mengerjakannya, kami sangat menyarankan untuk memastikan bahwa grup lapisan hanya berisi bentuk terkait, agar file Anda tetap bersih dan mudah diedit nanti.

Dalam file ini, Anda akan melihat bagian luar roda diberi nama "roda luar" dan bagian dalamnya diberi nama "roda dalam". Ini dasar, tetapi berhasil.

Ini opsional, tetapi menjalankannya melalui pengoptimal CSS sangat membantu. Ada kemungkinan besar Anda dapat mengurangi ukuran file dengan melakukan ini. Satu pilihan bagus adalah Pengoptimal SVG oleh Peter Collingridge. SVG OMG juga merupakan opsi yang patut diperhatikan.

Mengekspor grafik SVG di Adobe Illustrator

Sekarang setelah Anda memiliki gambar SVG akhir, itu perlu diekspor agar dapat digunakan di web. Buka File > Simpan Sebagai > SVG. Anda juga dapat membuka File, Ekspor, .SVG, tergantung pada versi Illustrator mana yang Anda gunakan. Ini akan disimpan sebagai flyweel_wheel.

Setelah Anda melakukannya, akan ada kotak dialog dengan beberapa opsi (jika Anda tidak melihat semua opsi berikut, buka “Opsi Lainnya”):

Profil: SVG 1.1

Jenis: Ini mengontrol bagaimana Anda ingin menangani font apa pun dalam desain Anda dan menyematkan font sebagai SVG. Kami tidak memilikinya, jadi kami akan membiarkan set ini sebagai SVG.

Subsetting: Opsi ini menyematkan detail karakter ke dalam file SVG bila diperlukan. Ini memungkinkan file untuk menampilkan font yang mungkin tidak ada di sistem pengguna. Dimungkinkan untuk hanya menyertakan mesin terbang yang digunakan dalam SVG (yang mengurangi ukuran file) saat "Hanya Mesin Terbang yang Digunakan" (jika Anda menggunakan font khusus untuk karya seni Anda) dipilih.

Lokasi Gambar: Ini mengontrol informasi yang dapat disimpan untuk data gambar raster di dalam file SVG sebagai URI data dengan opsi "Tersemat". (Tidak terlalu relevan dalam hal ini, tetapi ini memungkinkan tautan atau gambar yang disematkan, yang akan meningkatkan ukuran file.)

Properti CSS: Atribut presentasi memungkinkan gaya CSS diletakkan tepat di SVG jika diperlukan. Bergantung pada kasus penggunaan Anda, ini mungkin optimal atau tidak. Atribut Presentasi menentukan hal-hal seperti fill: blue; daripada apa yang terlihat secara tradisional dengan gaya sebaris: . Atribut presentasi biasanya lebih mudah untuk diganti di CSS.

Opsi Lebih Lanjut: Grup kotak centang ini memungkinkan Anda untuk mengubah berbagai pengaturan, termasuk berapa banyak tempat desimal yang Anda tuju dalam berbagai angka. Satu harus cukup di sini. Opsi lanjutan sebagian besar diperlukan jika ada banyak teks yang terlibat dalam file Anda. Opsi untuk menampilkan lebih sedikit elemen <tspan> dapat secara dramatis mengurangi ukuran SVG yang diekspor.

Dalam beberapa kasus, teks mungkin digambar di sepanjang jalur khusus. Dengan opsi "Use <textPath> element for Text on path", itu diekspor sebagai teks di jalur. Opsi "Responsif" juga penting. Jika tidak dicentang, file SVG akan memiliki lebar dan tinggi hard-coded.

Cara menganimasikan SVG dengan CSS

Sekarang ada SVG yang sebenarnya untuk dikerjakan, kita bisa membuat animasi sederhana untuk melihat bagaimana semua ini bekerja. Properti transformasi CSS dan metode terjemahan akan membantu roda bergerak. Membuat animasi dengan CSS sangat bagus karena tidak ada plugin atau pustaka yang perlu diinstal; yang Anda butuhkan hanyalah HTML dan CSS untuk memulai.

SVG dapat dianimasikan dengan cara yang sama seperti elemen HTML, menggunakan keyframe CSS dan properti animasi atau menggunakan transisi CSS. Animasi yang lebih kompleks biasanya menerapkan beberapa jenis transformasi — translasi, rotasi, penskalaan, atau kemiringan.

Animasi dasar

Berikut ini adalah animasi sederhana yang membuat roda tumbuh saat melayang:

 svg {
   tinggi: 20%;
   lebar: 20%;
   isi: #50c6db;
}
svg: arahkan {
   transformasi: skala(1,25);
   durasi transisi: 1,5 detik;
} 

Animasi roda berputar

Di sinilah kerja keras dalam Adobe Illustrator terbayar. Upaya penamaan lapisan secara efektif akan dimanfaatkan dengan baik. Dengan grup lapisan luar dan dalam, animasi dapat dikontrol dan disesuaikan, yang merupakan keuntungan besar dibandingkan menganimasikan grafik raster.

Roda SVG akan berfungsi sebagai grafik pemintal pemuatan. Roda luar akan berputar dan bagian dalam akan tumbuh sedikit saat warna berpindah dari terang ke gelap.

Sebagian besar elemen SVG cukup dapat diprediksi, tetapi ada beberapa hal pemosisian yang mungkin sedikit lebih rumit. Jika Anda terbiasa dengan elemen HTML lainnya, mereka merespons transformasi dan asal transformasi dengan cara yang sama. Satu hal yang perlu diperhatikan adalah bahwa mereka tidak mengikuti model kotak, artinya margin, border, padding, dll. Ini membuat penentuan posisi dan transformasi elemen-elemen ini sedikit lebih menantang.

Dasar-dasar transformasi-asal

Properti transform-origin digunakan untuk mengubah posisi asal transformasi suatu elemen. Asal transformasi elemen HTML adalah (50%, 50%), yang merupakan pusat elemen.

Asal transformasi elemen SVG diposisikan pada titik (0, 0), yang merupakan sudut kiri atas kanvas.

Bagaimana elemen SVG berputar di sekitar pusatnya sendiri? Penyesuaian diperlukan dengan properti transform-origin. Ini dapat diatur menggunakan nilai persentase atau nilai absolut (piksel, ems, atau rem). Nilai ini akan ditetapkan relatif terhadap kotak pembatas elemen.

Jika kita mengatur asal transformasi dari <rect> ke tengah menggunakan nilai persentase, itu akan dilakukan seperti ini:

 lurus {
  asal transformasi: 50% 50%;
}

Membuat roda

Pertama, menyiapkan bingkai kunci rotasi adalah kuncinya. Ini akan menjadi grafik pemintal, jadi diperlukan rotasi penuh. Juga akan ada efek fade-in yang diterapkan. Contoh ini dapat ditemukan di Codepen.

 @keyframes berputar {
    dari {transform:rotate(0deg);}
    ke {transform:rotate(360deg);}
}
@keyframes fadeIn {
    0% {
        opasitas: 0,35;
    }
    50% {
        opasitas: .5;
    }
    75% {
        opasitas: 0,75;
    }
    100% {
        opasitas: .25;
    }
}

Selanjutnya, penting untuk membuat pembungkus SVG.

 .svg-wadah {
  tinggi: 100%;
  lebar: 100%;
  max-tinggi: 15cm;
  lebar maks: 15cm;
  margin: 0 otomatis;
}

Gaya SVG umum telah dibuat dan di sinilah asal transformasi ditentukan.

 svg {
  atas: 50%;
  kiri: 50%;
  posisi: absolut;
  max-tinggi: 15cm;
  lebar maks: 15cm;
  lebar: 20%;
  tinggi: 20%;
  isi: #50c6db;
  transformasi: terjemahkan(50%, 50%);
} 

Di sinilah penamaan layer menjadi sangat membantu. Animasi pemintalan diterapkan ke seluruh grafik SVG karena ditentukan pada #outer-wheel , tetapi roda bagian dalam memiliki efek fading yang hanya dimaksudkan untuk bagian dalam grafik tersebut. Dengan hanya menargetkan #inner-wheel , animasi fade in telah diterapkan.

 #roda luar {
  animasi: spin 4s linear tak terbatas;
}
#roda dalam {
  animasi: fadeIn 2s linier tak terbatas;
} 

Semoga ini memberi Anda pengenalan yang baik tentang SVG dan teknik animasi dasar. Semakin sering Anda menggunakannya, ide dasar ini akan membantu Anda membuat animasi yang lebih kompleks.