5 Perpustakaan JavaScript Teratas untuk Animasi SVG

Pustaka JavaScript yang direkomendasikan untuk animasi SVG

Saat ini, SVG banyak digunakan dalam aplikasi web. Kemampuannya untuk berkembang tanpa kehilangan kualitas adalah alasan utama keberhasilannya.

Namun tahukah Anda bahwa kita dapat menggunakan SVG selain menggunakan gambar statis?

Pada artikel ini, saya akan memperkenalkan 5 perpustakaan JavaScript yang dapat kita gunakan untuk menganimasikan SVG.

1. BonsaiJS — API Grafik Intuitif

Pustaka grafis ringan dengan API grafis intuitif dan penyaji SVG.

BonsaiJS adalah pilihan terbaik untuk membuat grafik tujuan umum, dari ikon sederhana hingga bagan kompleks. Ini memberi Anda kendali penuh atas jalur dalam SVG dan efek animasi menggunakan bingkai utama.

Selain itu, BonsaiJS terpelihara dengan baik dengan dokumentasi yang bagus dan memiliki beberapa fitur luar biasa.

Fitur BonsaiJS

Mendukung kanvas grafis HTML5 dan SVG.
Pelari dan penyaji dipisahkan secara arsitektural.
Menyediakan keyframe dan animasi tradisional.
konteks berjalan iFrame, Worker, dan Node.
Mendukung semua browser utama, termasuk Chrome, Safari, Firefox dan Opera.

Instalasi dan Penggunaan

Anda dapat dengan mudah menginstal BonsaiJS untuk proyek Anda menggunakan perintah npm install bonsai. Kemudian Anda dapat menggunakan BonsaiJS API untuk menyematkan dan menganimasikan gambar SVG Anda seperti di bawah ini:

bonsai.run(document.body, {
  width: 600,
  height: 600,
  code: function() {
    var url = 'example.svg';
    new Bitmap(url).on('load', function() {
      this.attr('width', 200);
      this.addTo(stage);
      this.animate('3s', {
        x: 200
      });
    });
  }
});

Anda dapat mencoba beberapa contoh dari editor online Bonsai dan lihat dokumentasi mereka untuk lebih jelasnya.

2. VivusJS — Tanpa Ketergantungan

VivusJS adalah perpustakaan JavaScript ringan yang memungkinkan Anda menganimasikan SVG.

Ini menyediakan berbagai animasi untuk dipilih dan memungkinkan Anda menulis skrip untuk menggambar SVG sesuai kebutuhan. Selain itu, VivusJS tidak memiliki ketergantungan dan memiliki beberapa fitur fantastis untuk menarik pengguna.

Fitur VivusJS

Menyediakan 3 jenis animasi utama seperti tertunda, sinkron, dan satu per satu.
Menyediakan 5 opsi waktu untuk jalur dan animasi.
Kinerja tinggi.
Memungkinkan membuat SVG Anda sendiri.
Dapat menguji sebelum menginstal dengan Vivus instan.

Instalasi dan Penggunaan

VivusJS memiliki lebih dari 4500 unduhan NPM mingguan dan 13,5 ribu bintang GitHub.

Anda dapat menginstal VivusJS menggunakan NPM, Bower atau CDN.

// NPM
npm install vivus
// Bower
bower install vivus
// jsDelivr CDN
cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js

Kemudian, Anda dapat menggunakan VivusJS untuk menganimasikan SVG inline atau dinamis sebagai berikut:

// Inline
<svg id="my-svg">
  <path...>
</svg>

<script>
  new Vivus('example.svg', {duration: 200}, myCallback);
</script>
----------------------------------------------------------
// Dynamic
<div id="svg-div"></div>
<script>
  new Vivus('svg-div', { duration: 200, file: 'example.svg' }, callback);
</script>

3. SVG.js — Dukungan Plugin

SVG.js adalah pustaka JavaScript sumber terbuka untuk memanipulasi dan menganimasikan SVG.

Ini memungkinkan Anda menganimasikan SVG pada 3 aspek berbeda: ukuran, posisi, dan warna. SVG.js sederhana dan ringan dibandingkan dengan banyak perpustakaan animasi lainnya dan dilengkapi dengan beberapa fitur menarik.

Fitur SVG.js

Sintaksnya mudah dibaca dan dipahami.
16KB saat di-gzip dan 62KB saat diperkecil.
Ukuran, posisi, transformasi, warna, dan animasi lainnya.
Ada beberapa plugin yang tersedia untuk penyesuaian tambahan.
Jalur kliping dan masker opacity didukung sepenuhnya.

Instalasi dan Penggunaan

SVG.js dapat diinstal menggunakan NPM, Yarn, atau CDN.

// NPM
npm install @svgdotjs/svg.js
// Yarn
yarn add @svgdotjs/svg.js
// CDNs
https://cdnjs.com/libraries/svg.js
https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js
https://unpkg.com/@svgdotjs/svg.js

Setelah instalasi, Anda dapat mengimpor properti yang diperlukan dan mulai menggambar serta menganimasikan SVG.

import { SVG } from '@svgdotjs/svg.js'
var draw = SVG().addTo('body').size(300, 300)
var rect = draw.rect(100, 100).animate({
  duration: 2000,
  delay: 1000,
  when: 'now',
  swing: true,
  times: 5,
  wait: 200
}).attr({ fill: '#f06' })

4. Snap.svg — Mendukung Fitur SVG Terbaru

Snap.svg adalah perpustakaan JavaScript modern yang menghidupkan SVG Anda.

Ini dirancang untuk browser modern dan mendukung semua fitur SVG terbaru seperti masking, clipping, pattern, dan gradien penuh. Meskipun Snap.svg masih dalam versi 0.5, ia memiliki beberapa fitur luar biasa untuk bersaing dengan yang lain.

Fitur Snap.svg

Mendukung fitur SVG terbaru — masking, clipping, pola, gradien penuh, dan grup.
Tidak perlu membuat konten SVG dengan Snap untuk bekerja dengannya Snap.
Dapat membuat konten SVG di Illustrator, Inkscape, atau Sketch, lalu menggunakan Snap untuk menganimasikan atau memanipulasinya.
Dukungan peramban modern.
100% gratis dan sumber terbuka.

Instalasi dan Penggunaan

SVG.js dapat diinstal menggunakan NPM dan Bower sebagai berikut:

// NPM
npm i snapsvg
// Bower
bower install snap.svg

5. Pelukis Garis Malas — Animasi Jalur

Pustaka JavaScript modern untuk animasi jalur SVG.

Lazy Line Painter sedikit berbeda dari perpustakaan di atas karena khusus untuk animasi jalur. Selain itu, ia menyediakan alat online bernama Lazy Line Composer yang memungkinkan Anda membuat animasi SVG dalam hitungan detik.

Instalasi dan Penggunaan

Selain Lazy Line Composer, Lazy Line Painter dapat langsung diinstal ke proyek Anda menggunakan NPM atau CDN.

// NPM
npm i lazy-line-painter
// CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/lazy-line-painter-1.9.4.min.js"></script>

Setelah instalasi, Anda dapat mengimpor Lazy Line Painter dan mulai menganimasikan SVG.

import LazyLinePainter from 'lazy-line-painter'

let el = document.querySelector('#example-svg')
let myAnimation = new LazyLinePainter(el, { strokeWidth : 10 })
myAnimation.paint()

Kesimpulan

Pada artikel ini, saya membahas 5 perpustakaan animasi JavaScript SVG yang berbeda. Masing-masing memiliki beberapa fitur unik dan dapat digunakan berdasarkan kebutuhan Anda.

Saya harap saran saya akan membantu Anda memilih opsi animasi SVG terbaik untuk proyek Anda. Dan jangan lupa untuk membagikan pemikiran Anda setelah bekerja dengan perpustakaan ini.

Terima kasih telah membaca !!!

Membangun aplikasi web yang dapat disusun

Jangan membangun monolit web. Gunakan Bit untuk membuat dan menyusun komponen perangkat lunak yang dipisahkan — dalam kerangka kerja favorit Anda seperti React atau Node. Bangun frontend dan backend yang skalabel dengan pengalaman pengembangan yang kuat dan menyenangkan.

Bawa tim Anda ke Bit Cloud untuk menghosting dan berkolaborasi dalam berbagai komponen, dan mempercepat, menskalakan, dan menstandardisasi pengembangan sebagai sebuah tim. Mulailah dengan frontend yang dapat dikomposisi seperti Sistem Desain atau Frontend Mikro, atau jelajahi backend yang dapat dikomposisi. Cobalah →