Menganimasikan File SVG Dengan SVGator

( Artikel ini disponsori oleh SVGator .) File animasi SVG telah menjadi sangat populer. Mereka sepenuhnya dapat diskalakan (karena mereka adalah vektor), kecil dan 100% berbasis kode, yang memungkinkan begitu banyak transformasi dan penyesuaian. Namun, ini ada harganya: kurva belajar yang curam untuk pemula yang lengkap.

SVGator berjanji untuk memecahkan masalah ini, membuatnya sangat mudah bagi siapa saja untuk membuat animasi sederhana menggunakan antarmuka yang sudah dikenal. Ini adalah aplikasi animasi berbasis web yang memungkinkan Anda mengimpor, menganimasikan, dan mengekspor animasi SVG, dan ini menghilangkan kebutuhan bagi pemula untuk belajar coding. Kami mencobanya, dan kami sangat menyukainya.

Mulai Menggunakan Aplikasi

Buka https://www.svgator.com untuk mulai menggunakan aplikasi. Proses pendaftaran cukup mudah (gambar 1 hingga 3): Klik “Animate now”, lalu “Create account”, isi detail Anda, dan Anda siap melakukannya.

Anda akan dibawa langsung ke contoh proyek "Stopwatch", yang memungkinkan Anda menjelajahi fitur-fitur SVGator. Jika Anda tidak dapat menemukan jalan Anda di dalam aplikasi, ada tutorial rapi (gambar 4) yang akan memandu Anda tentang cara mulai menggunakannya: Impor SVG statis, tambahkan elemen ke timeline, dan tambahkan animator ke elemen dan bingkai utama ke menghidupkan empat properti yang tersedia saat ini (skala, opasitas, posisi, dan rotasi).

Jika Anda pernah menggunakan aplikasi animasi, antarmuka pengguna SVGator akan terasa cukup familiar bagi Anda, dan semuanya mungkin akan terasa di tempat yang tepat. Anda hanya menambahkan elemen yang akan Anda animasikan, yang membuat garis waktu tetap bersih dan mudah dipindai.

Proyek jam animasi pemula melakukan pekerjaan yang baik untuk memperkenalkan Anda ke SVGator. Anda selalu dapat kembali ke sana dan menggunakannya sebagai referensi.

Sekarang setelah kita memiliki dasar-dasarnya, mari kita mulai membuat animasi kita sendiri!

Apa yang Akan Kami Buat

Lihat ikon amplop sederhana yang kami rancang di Sketch (gambar 5). Itu dimulai tertutup, lalu terbuka, dan sebuah surat muncul, diikuti dengan isinya. Kemudian, surat itu melompat keluar dari amplop dan naik untuk menunjukkan kotak centang hijau.

Berikut ringkasan prosesnya:

• Kita akan mulai dengan membuat storyboard sederhana untuk memvisualisasikan ikon kita dalam keadaan yang berbeda. Saat kami melakukannya, kami akan terus menyinkronkan dengan SVGator dan mengimpor elemen ikon untuk memastikan semuanya berfungsi seperti yang diharapkan.
• Kemudian, kita akan membuat salinan utama dari ikon, yang akan menyertakan setiap elemen yang kita perlukan, dan mengekspornya ke SVGator. Kita mungkin perlu banyak memodifikasi salinan master ini selama proses berlangsung.
• Selanjutnya, kita akan melakukan seluruh animasi dalam satu proyek SVGator dan mengekspornya, memastikannya berfungsi seperti yang diharapkan.
• Terakhir, kami akan menyertakan ikon dalam formulir buletin sederhana yang telah dikodekan sebelumnya untuk melihat tampilannya di lingkungan web yang sebenarnya. Kami juga akan melihatnya mengubah ukuran untuk resolusi yang lebih kecil.
• Anda dapat mengunduh semuanya di sini.

Mari kita mulai!

Bagian 1: Membuat Dan Mengekspor Ikon Dari Sketsa

• Ada beberapa perbedaan antara mendesain ikon SVG sederhana dan mendesain ikon SVG yang Anda rencanakan untuk dianimasikan nanti. Sebagai permulaan, penting untuk dicatat bahwa itu harus terdiri dari bentuk yang cukup sederhana, dan Anda harus merencanakan animasi Anda di sekitar transisi sederhana berdasarkan manipulasi hanya berikut: skala, rotasi, posisi dan opacity. Ini adalah satu-satunya empat properti yang saat ini dapat Anda animasikan oleh SVGator, jadi jika Anda telah menyusun sesuatu yang lebih kompleks, Anda tidak akan dapat melakukannya.

Buat Storyboard Sederhana Untuk Menghemat Waktu

Storyboarding memungkinkan Anda memvisualisasikan semua transisi Anda sebelum Anda benar-benar mengimpornya di SVGator. Ini juga memudahkan untuk menguji transformasi sebelum berkomitmen untuk membuat keseluruhan animasi. Sering terjadi bahwa Anda akan menemukan masalah dengan ilustrasi yang seharusnya dilakukan secara berbeda di Sketch, sehingga Anda harus masuk kembali dan mengubahnya. Kemudian, Anda perlu mengimpor ulang seluruh file di SVGator dan mulai dengan animasi dari awal. Karena Anda tidak ingin melakukan ini setiap saat, storyboard membantu dengan memaksa Anda untuk merencanakan berbagai hal sebelumnya.

Misalnya, saya awalnya berencana untuk amplop untuk tetap lebih ke bagian bawah layar, tetapi setelah mengimpornya ke SVGator dan bermain dengan penutupan dan pembukaan, jelas bahwa itu harus tetap di tengah saat ditutup dan sedikit ke bawah ketika dibuka — detail yang dihilangkan dalam gambar statis.

Tip: Lihat storyboard di file Sketch → Artboard “storyboard” .

Penamaan Lapisan Dan Organisasi

Jika Anda memberi nama layer Anda di Sketch, itu akan berfungsi seperti yang diharapkan, dan semua nama yang Anda tetapkan di Sketch akan ditransfer ke proyek Anda di SVGator. Tetapi jika Anda menggunakan SVGO Compressor atau plugin serupa untuk membuat file SVG lebih kecil, namanya akan hilang , dan SVGator akan menggantinya dengan yang berdasarkan tag HTML, dan Anda akan mendapatkan sesuatu yang mirip dengan yang ditunjukkan pada gambar 7 .

Tip: Jika Anda sudah menggunakan SVGO Compressor untuk SVG lain dan tidak ingin menonaktifkannya, cukup seret dan lepas file dari area pratinjau ekspor di Sketch ke lokasi yang Anda inginkan (gambar 8). Ini akan menghindari Kompresor SVGO dan mengekspor SVG apa adanya!

Menggunakan grup juga bagus, karena aplikasi mengenalinya, dan Anda bahkan dapat secara bersamaan menganimasikan layer dan grup induknya, menambahkan sedikit lebih banyak kerumitan.

Kami tidak menemukan batasan pada jumlah lapisan yang digunakan, tetapi sekali lagi, ikon kami cukup sederhana.

Mempersiapkan Ikon untuk Animasi

Sekarang setelah kita memiliki ide dalam storyboard dan kita telah menyiapkan file master, mari mengekspornya dengan cara yang dapat kita pahami di SVGator. Pastikan untuk memeriksa ulang hierarki layer. Pikirkan bagaimana lapisan tertentu akan berinteraksi dengan yang lain dan di mana harus ditempatkan di panel Lapisan. Pada gambar 9, Anda akan melihat bahwa kami telah memilih "top_opened" — itulah penutup atas amplop yang terbuka. Itu harus berdiri di belakang selembar kertas putih. Dan sebaliknya, "top_closed" adalah penutup amplop yang tertutup, dan harus tetap di atas segalanya; itulah mengapa ini adalah lapisan pertama dalam grup "konten" kami.

Tip: Anda mungkin bertanya-tanya mengapa seluruh penutup atas terbuat dari dua lapisan. Itu karena kita tidak bisa memutar bentuk atau benar-benar mengubahnya dalam ruang 3D menggunakan SVGator. Kami meniru ini dengan meremas lapisan pertama dan kemudian meregangkan yang kedua, sehingga menciptakan ilusi transformasi 3D .

Jika Anda melihat storyboard kami, ide awalnya adalah membuat lembaran itu melompat keluar dari amplop dan memperbesarnya untuk akhirnya menyembunyikannya. Kita akan mencapainya dengan mendorong lembar asli ke atas, sementara memiliki lembar tersembunyi lainnya (“sheet_top”) di depan amplop (gambar 10). Saat mereka bertemu di titik paling atas, mereka akan beralih, dan lembaran depan akan jatuh di depan amplop. Itu juga ilusi visual — kita tidak bisa benar-benar memindahkan lembar dalam ruang-z, jadi itu salah satu cara untuk menirunya.

Mempertimbangkan semua ini, sekarang kita dapat mengekspor ikon. Ini praktis SVG tunggal yang berisi semua elemen yang kita perlukan, ditumpuk di atas satu sama lain dengan cara yang berguna.

Tip: Pastikan semua elemen ditandai terlihat (tidak disembunyikan) sebelum mengekspor. Anda dapat melihat file yang kami gunakan sebagai ekspor di file Sketch → Artboard “ekspor” .

Bagian 2: Menganimasikan Ikon

Buka SVGator dan klik “Impor baru” untuk memulai proyek baru (gambar 11):

Jika Anda telah melakukan semuanya dengan benar, Anda akan melihat sesuatu seperti gambar 12 dan klip pendek di bawah ini (klip 1): semua lapisan ditumpuk di atas satu sama lain dan siap digunakan. Jika, secara kebetulan, Anda tidak melihat semuanya, kembali ke Sketch dan periksa kembali apakah semua layer terlihat.

Menganimasikan Pembukaan Amplop

Kita akan mulai dengan mengimpor beberapa elemen di timeline. Cara SVGator berfungsi adalah Anda akan memulai dengan garis waktu kosong. Anda memilih elemen mana yang akan ditambahkan dari menu tarik-turun "Elemen". Anda harus memeriksanya secara manual menggunakan ikon mata untuk melihat lapisan mana yang Anda cari. Atau, Anda dapat mengklik langsung pada elemen di layar, yang akan melakukan hal yang sama.

Kita akan mengerjakan langkah 1 dan 2 dari storyboard, khususnya pada bukaan flap. Mari kita nonaktifkan lapisan yang tidak kita perlukan untuk saat ini; kita akan kembali lagi nanti (lihat klip 1 untuk melihat bagaimana melakukannya). Kita harus dibiarkan hanya dengan amplop dasar, yang berarti Anda harus menonaktifkan lapisan berikut: "sheet_top_content", "sheet_top_bgr" dan "sheet_bottom_bgr".

Kemudian, klik "top_opened", dan klik ikon plus di sebelah kiri, atau klik dua kali elemen untuk menambahkannya ke timeline. Lakukan hal yang sama untuk "top_closed". Sekarang Anda harus memiliki kedua lapisan di timeline (gambar 13).

Tip: Jika Anda ingin mempercepat seluruh proses, lihat klip 2 (tindakannya mungkin tidak dalam urutan yang sama seperti yang dijelaskan di bawah) .

• Klik "top_closed" di timeline dan kemudian pada dropdown "Animator". Tambahkan animator Skala.
• Tambahkan animator Skala untuk "top_opened", juga.
• Kemudian, klik ikon target kecil di sebelah nama layer di timeline. Ini adalah properti transform-origin, dan memungkinkan Anda menetapkan titik pivot untuk transformasi elemen. Mari kita pilih top-center untuk "top_closed", karena kita akan mengecilkannya ke atas (gambar 14), dan kemudian bottom-center untuk "top_opened".
• Sekarang, dengan "top_closed" dipilih, klik tanda plus pada properti Scale untuk menambahkan keyframe ke timeline. Bentuk berlian kuning akan muncul di timeline. Mari kita pindah ke 0.4s dan klik tanda plus lagi (gambar 15). Keyframe kedua itu akan menjadi titik transformasi terakhir kita, ketika flap sudah terbuka. Jadi, mari kita buat Skalanya 100% 0%, biarkan keyframe pertama sebagai 100% 100%.
• Aktifkan Ease-in untuk “top_closed” dengan mengklik ikon target kecil di sebelah nama layer (gambar 16).
• Saat di 0.4s, tambahkan keyframe Opacity untuk "top_closed" dengan mengklik dua kali Opacity di menu "Animators" dan kemudian mengklik tanda plus di sebelah properti Opacity di timeline. Ubah menjadi 0%.
• Kembali beberapa frame, dan tambahkan 100% untuk Opacity. Kami melakukan itu untuk menghindari kesalahan pada bagian penutup atas.

Kiat: Easing akan membuat gerakan terlihat lebih alami, dan karena kami mendesain animasi yang mengemulasi gerakan satu elemen, wajar untuk memudahkan di awal dan memudahkan akhir animasi .

Sekarang, mari kita berurusan dengan bagian "top_opened", akhir dari animasi. Seperti yang kami catat sebelumnya, kami melakukan ini dalam dua bagian untuk meniru bukaan tutup 3D.

• Ambil layer "top_opened" di timeline, pergi ke 0.4s di timeline, dan tambahkan keyframe Scale, lalu keyframe lain di 0.8s . Jadikan Scale pada 0.4s menjadi 100% 0% dan biarkan nilai Scale 0.8s tetap 100% 100%.
• Aktifkan Ease-out. Tekan putar untuk melihat pratinjau animasi.

Terlihat keren, tetapi sekarang seluruh amplop harus dipindahkan ke bawah agar pas dengan latar belakang yang dilingkari. Temukan grup yang disebut hanya "g" di Elemen, dan tambahkan animator Posisi ke dalamnya. Tambahkan keyframe posisi ke 0.2s dan kemudian ke 0.8s. Ubah nilai 0.8s menjadi 0 35. Tambahkan Ease-in-out untuk animasi yang halus. Dan itu saja! Kami telah berhasil menganimasikan amplop terbuka dan bahkan membuatnya bergerak sedikit ke bawah.

Menambah Kompleksitas: Surat Muncul

Pembukaan amplop memang rapi, tapi kita bisa membuatnya lebih menarik dengan memperkenalkan selembar kertas. Untuk melakukannya, kita perlu membuka layer sheet, yang kita sebut "sheet_bottom_bgr".

• Klik ikon mata di sebelah “sheet_bottom_bgr” di menu “Elements” untuk membuatnya terlihat. Tambahkan ke timeline (klik dua kali di atasnya).
• Sekarang, pergi ke suatu tempat di tengah animasi — misalnya, 0,5 detik — dan tambahkan bingkai kunci Posisi. Tambahkan satu lagi setelah 0,4 detik. Pilih keyframe pertama dan offset layer dengan 140 piksel pada sumbu y (0 140).
• Tambahkan efek Ease-in-out. Sekarang kita memiliki animasi yang sedikit lebih menarik.

Tip: Jika Anda lebih suka menonton ini dalam video, lihat klip 3 di bawah ini .

Bahkan Lebih Kompleks: Menganimasikan Penskalaan Huruf

Untuk melangkah lebih jauh, mari kita animasikan surat yang muncul dari amplop, dan mari kita ungkapkan beberapa baris teks "tertulis" dalam surat itu. Untuk melakukan itu, kita harus sedikit memodifikasi animasi sebelumnya. (Jika Anda ingin maju cepat, Anda bisa menonton screencast dan mengulanginya.)

• Mulailah dengan memindahkan keyframe Posisi terakhir dari “sheet_bottom_bgr” dari 0.9s ke 1.1s, dan ubah ke 0 -190. Apa yang kami lakukan dengan ini adalah mengeluarkan lembar dari amplop, sehingga kami dapat dengan cepat menukarnya dengan lembar lain yang telah kami siapkan.
• Pergi ke 1.1s, aktifkan “sheet_top_content” dan “sheet_top_bgr” dan tambahkan ke timeline dengan Position keyframes untuk keduanya 0 -190.
• Tambahkan bingkai utama pada 1,5 detik dan jadikan 0 40.
• Aktifkan Ease-out untuk keduanya.

Ini adalah gerakan lembar depan, dan seharusnya terlihat seperti yang Anda lihat pada gambar 17.

Sekarang mari kita perbaiki lembar belakang. Itu akan menghilang begitu bagian depan muncul, dan lembaran depan hanya akan muncul setelah itu.

• Pergi ke 1.1s, dan pilih "sheet_bottom_bgr". Tambahkan animator Opacity dan bingkai utama. Setel ke 0%.
• Pindahkan satu bingkai ke belakang dan atur bingkai utama Opacity lainnya, menjadikannya 100%.

Mari kita juga membuat perubahan masing-masing pada lembar depan:

• Pergi ke 1.1s, pilih "sheet_top_bgr" dan tambahkan keyframe Opacity 100%.
• Pindahkan bingkai ke belakang, dan buat opacity 0%.

Anda akan melihat sesuatu seperti gambar 18 di bawah ini. Kita dapat menemukan dua masalah di sini:

• Konten ditampilkan di atas amplop sebelum transisi terjadi.
• Ada kesalahan saat menukar sprei belakang dan sprei depan.

Mari kita perbaiki masalah pertama. Mari sembunyikan konten dan kotak centang dan tunjukkan setelah lembar depan muncul.

• Pergi ke 1.5s, pilih “sheet_top_content” dan tambahkan keyframe Opacity 100%.
• Pergi satu frame ke belakang dan atur keyframe Opacity lainnya ke 0%.
• Sekarang, kita akan membuatnya sedikit lebih menarik dengan menganimasikan setiap layer di dalam konten depan.
  • Buka 1.5s dan cari konten “sheet_top_content” di menu Elemen.
  • Tambahkan keyframe Opacity untuk ketiga lapisan dalam "sheet_top_content".
  • Jadikan Opacity untuk ketiga layer 0%.
  • Pindah ke 1.7s dan atur ke 100% untuk ketiga lapisan.
  • Tetap pada 1.7s dan pilih Combined-shape , dan tambahkan keyframe Rotate.
  • Pergi ke 1.5s dan atur rotasi ke -45deg.
  • Tambahkan Ease-in-out untuk rotasi.

Masalah kedua adalah kesalahan yang terjadi karena lembar belakang kami menghilang terlalu dini.

• Pergi ke 1.1s, pilih "sheet_bottom_bgr" dan geser keyframes Opacity dengan satu frame ke depan. Inilah yang harus Anda lihat (gambar 19):

Untuk membuatnya lebih menarik, mari skalakan lembar depan dan konten saat muncul dari amplop. Kami dapat menskalakan keseluruhan "top_sheet_content", tetapi itu mungkin menyebabkan beberapa ketidakselarasan di beberapa browser. Yang terbaik adalah menskalakan masing-masing lapisan anaknya sendiri.

• Pergi ke 1.1s, pilih "sheet_top_bgr" dan tambahkan keyframe Skala.
  • Lakukan hal yang sama untuk Combined-Shape, “line_top” dan “line_bottom”.
• Pergi ke 1.5s dan tambahkan keyframe Skala lain dengan nilai 120% 120%.
  • Lakukan hal yang sama untuk Combined-Shape, “line_top” dan “line_bottom”.
• Aktifkan Ease-in-out.
• Karena kami menskalakannya, kami perlu mengurangi jumlah pergerakan seluruh lembar depan ke bawah. Pergi ke 1.5s, pilih “sheet_top_content” dan “sheet_top_bgr”, dan ubah posisinya dari 0 40 menjadi 0 20.

Tip: Tidak apa-apa untuk menskalakan konten di SVG karena semuanya berbasis vektor, jadi Anda tidak akan kehilangan kualitas apa pun .

Berikut tampilannya sekarang (gambar 20):

Semuanya bagus, tetapi seluruh animasi perlu mengulang kembali ke frame pertama. Itu karena kami ingin menggunakannya kembali. Ide kami adalah membuat lembaran depan digeser ke bawah dan amplop ditutup dan diputar ke posisi semula.

• Pergi ke 2.8s, pilih "sheet_top_bgr" dan tambahkan keyframes Posisi.
  • Lakukan hal yang sama untuk “sheet_top_content”.
• Kita perlu menambahkan lebih banyak waktu, karena timeline default adalah 3 detik. Klik ikon roda gigi di pojok kiri bawah di atas timeline, ubah durasinya menjadi 00:04:50 (gambar 21), dan tekan "Enter". Kami sekarang telah memperpanjang timeline.
• Pindah ke 3.6s, tambahkan sepasang keyframe Position lainnya, dan buat nilainya menjadi 0 360. Ubah easing untuk kedua layer Position menjadi Ease-in-out.

• Pada 1.3s, pilih "top_closed" dan "top_opened", dan tambahkan bingkai kunci Skala.
• Tambahkan dua lagi pada 1,5 detik. Untuk keyframe kedua, “top_closed” harus 100% 100% dan “top_opened” 100% 0%. Kami telah berhasil menutup penutup di belakang lembaran yang bersisik.
• Sekarang, yang harus kita lakukan adalah memindahkan amplop kembali ke tengah dan memastikan tutup atas muncul lagi. Pergi ke 3s dan tambahkan keyframe Posisi untuk "g". Tambahkan satu lagi di 3.4s, dan buat 0 0. Pergi ke 2.8s, dan tambahkan keyframe Opacity 0% untuk "top_closed". Kemudian, pindah ke 3s dan ubah opacity menjadi 100%.

Selamat! Kami telah menganimasikan seluruh ikon. Berikut tampilannya (gambar 22):

Bagian 3: Menerapkan Animasi yang Diekspor Dalam Lingkungan Web Nyata

Mari kita tempatkan ikon di lingkungan nyata. Kami telah mengkodekan formulir buletin sederhana dan menyertakan ikon di sana. Anda dapat mengekspor ikon dari SVGator dengan mengklik "Ekspor SVG".

Setelah Anda mengklik "Berlangganan", pesan terima kasih ditampilkan, dan animasi ikon dimulai.

Ia bekerja dengan memiliki dua ikon SVG: Yang pertama adalah yang statis dengan hanya bingkai pertama dari animasi yang disertakan, dan yang kedua adalah yang animasi. Anda dapat menemukan ikon statis di file Sketch → Artboard "ekspor statis". Kami telah memasukkannya sebagai elemen SVG sebaris di dalam kode. Kami juga menyertakan animasi SVG sebaris, tetapi menyembunyikannya secara default. Anda dapat memeriksa kode di unduhan. Ketika "Berlangganan" menerima klik, kami menyembunyikan SVG statis dan menampilkan yang animasi, yang secara otomatis dimulai.

Penyesuaian kecil yang kami buat di SVG statis adalah mengganti baris ini:

 <rect fill="#E6E7EB" fill-rule="evenodd" x="0" y="162" width="384" height="131"></rect>

… dengan ini:

 <rect fill-rule="evenodd" x="0" y="162" width="384" height="131"></rect>

Ini akan menghapus persegi panjang abu-abu yang ditampilkan secara tidak benar di atas semua elemen.

Contoh ini juga menunjukkan betapa bagusnya SVG dalam desain responsif: Jika Anda membuat jendela lebih kecil, tata letak akan diatur ulang, dan ikon akan diperbesar tanpa kehilangan kualitas sama sekali.

Tip: Saat kami membuat ikon lebih kecil, kami menemukan bahwa dibutuhkan terlalu banyak waktu untuk lembar keluar dari kanvas, jadi kami harus kembali dan mengedit waktu tertentu sedikit untuk membuatnya lebih pendek. Kami memindahkan keyframe Posisi terakhir dari "sheet_top_bgr" dan "sheet_top_content" ke 3,2 detik untuk membuat gerakan lebih cepat .

Jika mau, Anda dapat mengubah animasi bahkan setelah Anda mengekspornya, tetapi jauh lebih mudah untuk melakukannya di SVGator, di mana Anda akan memiliki UI yang nyaman.

Kesimpulan

Kami cukup senang dengan alat seperti SVGator, yang benar-benar mempercepat proses saat Anda membuat animasi SVG sederhana. Mudah digunakan dan Anda bisa mendapatkan animasi yang tampak hebat dalam waktu singkat.

• Ini tidak sekuat Adobe After Effects, tetapi jauh lebih adaptif, dan mengekspor semuanya dalam kode, siap digunakan di web. Membandingkannya dengan After Effects adalah apel dan jeruk, karena kedua alat itu sangat berbeda.
• Saat menggunakan SVGator untuk eksplorasi cepat , pemula akan melihat nilai yang lebih besar di dalamnya, tetapi itu tidak berarti bahwa itu hanya ditujukan untuk mereka. Pengguna tingkat lanjut dapat menggunakan alat ini untuk bertukar pikiran atau mengeksplorasi ide dengan cepat tanpa harus menggunakan alat yang lebih kompleks. Karena SVGator menghasilkan kode, Anda dapat mengambilnya dari sana dan menyesuaikan apa pun sesuka Anda. Satu-satunya kelemahan adalah bahwa seluruh animasi ditempatkan dalam satu garis waktu, yang berarti bahwa pada dasarnya adalah satu animasi CSS, dan semua yang terjadi di dalamnya memiliki jumlah penundaan yang berbeda sebelum dijalankan. Ini berarti Anda saat ini tidak dapat mengaktifkan event pada langkah animasi tertentu, karena semuanya adalah CSS all-in-one.
• Membandingkannya dengan kode vanilla juga tidak adil, karena tujuan utama SVGator adalah membuat animasi SVG lebih mudah dan lebih cepat. Jelas bahwa Anda dapat mencapai lebih banyak jika Anda membuat kode semuanya dari awal, tetapi berapa banyak waktu yang Anda butuhkan?
• Salah satu keunggulan terkuat SVGator adalah sangat ramah bagi pemula. Siapa pun dapat mulai menggunakannya, dan kurva pembelajarannya hampir tidak ada jika Anda memiliki pengalaman dengan setidaknya beberapa perangkat lunak desain atau animasi.
• Semua pengguna mendapatkan uji coba gratis selama tujuh hari setelah mereka membuat akun. Semua fitur disertakan, dan setelah uji coba selesai, mereka masih dapat mengunduh animasi dari bagian "Proyek saya". Anda dapat berlangganan aplikasi bulanan ($18 per bulan), triwulanan ($45 per kuartal) atau tahunan ($144 per tahun).

Bacaan Lebih Lanjut Tentang SVGator

• Cara Menganimasikan SVG Menggunakan SVGator (video)
• Twitter SVGator (berisi banyak tutorial mini dan pembaruan sering tentang aplikasi)
• FAQ SVGator

Bacaan Lebih Lanjut Tentang Animasi SVG Menggunakan Kode

• “Bagaimana Saya Berhenti Khawatir Dan Belajar Menganimasikan SVG,” Boaz Lederer, Medium
• “Cara Mengoptimalkan Kode SVG Dan Menganimasikan Ikon SVG Menggunakan CSS Dan Perpustakaan Snap.svg,” CodyHouse
• “Animasi CSS Untuk Non-Pengembang Bagian 2 — SVG,” Nicholas Kramer, Prototypr
• “Cara Membuat Animasi SVG yang Indah dengan Mudah,” Lewis Menelaws, Medium

Terima kasih khusus kepada Boyan Kostov karena telah membantu kami dengan artikel ini — kami menghargai waktu dan usaha Anda!