Belajar Snap.svg yuk!

Maret 20, 2019


Apa sih Snap.svg?

Snap.svg merupakan library SVG javascript buatan Adobe. Adobe sendiri merupakan perusahaan perangkat lunak ternama yang bergerak di bidang grafis, animasi, video, dan pengembangan web. 

Contoh penerapan Snap.svg bisa dilihat di website kota Surabaya. https://surabaya.go.id/



Mengapa Snap.svg?

Snap.svg merupakan jalan terbaik dalam membuat objek yang berhubungan dengan vektor grafis karena Snap.svg bekerja dengan menggunakan aset SVG sebagaimana jQuery bekerja dengan DOM.


Sesuai dengan semboyannya,


“The JavaScript SVG library for the modern web”

Snap.svg Team

Snap.svg dirancang untuk browser modern karenanya Snap.svg mendukung beberapa fitur modern SVG seperti masking, clipping, patterns, full gradients, groups, dan masih banyak lagi. 


Snap.svg kaya akan animasi yang nantinya akan membawamu ke dalam dunia SVG yang sesungguhnya. Oh ya satu lagi, Snap.svg ini bersifat Open Source di bawah lisensi Apache 2. Siapa tahu jika kalian ingin turut berpartisipasi ke dalam projek milik adobe ini bisa kunjungi link github berikut Snap.svg Repositori.


Bagaimana Menggunakannya?

Oke setelah kita berkenalan dengan Snap.svg, sekarang saatnya kita untuk memulainya. Tapi sebelum itu kita harus download dulu file Snap.svg di website resminya Snap.svg atau bisa clone melalui github di sini Snap.svg Repositori.


Kemudian buka teks editor, buat file baru dengan nama terserah kalian dengan ekstensi .html, tempatkan file Snap.svg tadi pada lokasi yang sama dengan file yang kalian buat ini. Oke saatnya happy coding!


Buat format file html terlebih dahulu


‘Panggil’ file Snap.svg sesuai lokasi dengan tag <script> di dalam tag <head>


Sebelum menggambar atau membuat sebuah objek kita memerlukan sebuah ‘kertas’. Maka dari itu di sini kita akan memakai tag <svg> sebagai ‘kertasnya’. Kita atur ukuran dari ‘kertasnya’ sebesar width=”1000px” dan height=”1000px” dengan id=”kertas”.


Selanjutnya kita buat variabel media untuk mendefinisikan kertas yang telah kita siapkan tadi, bersamaan dengan itu, kita juga mulai membuat objek lingkaran yang disimpan dalam variabel lingkaran dengan koordinat (x=100), koordinat (y=100), dan radius (r=50). 


Jika ingin menambah ‘aksesoris’ dari lingkaran tersebut kita bisa buat sebuah objek dengan berisi macam-macam properti seperti warna, border, dan lain-lain


Kemudian kita buat sebuah fungsi bernama looping dengan parameter radius (r). Kemudian kita buat variabel newRadius dengan definisi jika r sama dengan 50 maka radius akan berubah menjadi 100 jika tidak maka akan kembali ke 50, ini merupakan sebuah operator ternary dalam pemrograman Javascript


Kemudian objek lingkaran tersebut kita animasikan dengan fungsi animate(). Dalam fungsi animate() terdapat beberapa parameter yang kita gunakan, parameter pertama (attrs) mengindikasikan pasangan nilai (radius) dari atribut tujuan, parameter kedua merupakan durasi dengan satuan milliseconds.


Panggil fungsi looping dengan nilai parameter 50 dan lihat pada browser apa yang terjadi. Wow!


Oh ya tolong kalian tambahkan potongan kode berikut di atas ketika fungsi looping dipanggil.



Apa yang terjadi? Tak ada? Coba gerakkan objek lingkaran kalian. Bisa? Oke sekian dan terimakasih banyak. Full kodenya di bawah ya 🙂



Kategori