Animasi Kaca Mosaik dengan SVG dan JavaScript

Pada artikel sebelumnya aku sudah membahas bagaimana cara membuat tekstur mosaik dengan SVG, sekarang mari kita bawa ke tahap lebih lanjut, yakni membuat efek animasi pada kaca mosaik tersebut, sehingga nampak seolah-olah bergelimang cahaya.

Persiapan

Untuk memulai, kita akan menggunakan gambar tekstur mosaik yang sudah dibuat pada tutorial sebelumnya. Kamu bisa mengunduhnya di sini.

Kemudian untuk menyederhanakan, kita akan hapus beberapa bagian yang tidak perlu. Pertama, mari buka gambar SVG tersebut dengan Inkscape, lalu pindahkan grup mosaik ke bawah dengan memilih Lower selection to bottom (end), dan hapus foto kursi.

Setelah gambar kursi dihapus, tersisa gambar mosaik saja, sekarang pilih gambar tersebut, buang clipping dengan memilih menu Object » Clip » Release, lalu ungroup dengan memilih menu Object » Ungroup (Shift+Ctrl+G).

Hapus kotak abu-abu yang digunakan untuk clipping.

Kini tersisa segitiga-segitiga mosaik saja. Karena kita tidak akan menggunakan foto dibelakang mosaik, set Opacity (%) untuk seluruh mosaik menjadi 100%.

Gradasi kolom-kolom

Oke, persiapan sudah selesai. Mari kita mulai!

Seperti pada tutorial sebelumnya, sekalipun warnanya terlihat acak, kita akan buat gradasi dari terang ke gelap. Untuk itu, kita bagi gambar ini menjadi 4 kelompok vertikal. Pilih sebanyak 4 kolom segitiga ke kanan, lalu kelompokkan dengan memilih menu Edit » Group (Ctrl+G).

Ulangi langkah di atas untuk kolom-kolom berikutnya sehingga diperoleh 4 grup.

Selanjutnya, pilih grup pertama, lalu buka Object Properties dengan memilih menu Object » Object Properties… (Shift+Ctrl+O). Pada panel Object Properties, set ID menjadi “mosaik0” (tanpa kutip) dan klik Set. Ulangi langkah ini pada grup lainnya, sehingga diperoleh ID grup dari kiri ke kanan:

mosaik0, mosaik1, mosaik2, mosaik3

Simpan gambar SVG, misalnya dengan nama mosaic-anim.svg, lalu tutup aplikasi Inkscape.

Berikutnya kita akan memulai pemrograman JavaScript. Gambar SVG sebenarnya menggunakan struktur XML, sehingga kita bisa mengedit gambar tersebut menggunakan editor teks biasa. Untuk koding pun kita akan melakukannya dengan editor teks. Buka gambar mosaic-anim.svg menggunakan editor teks atau kode, lalu sisipkan kode berikut di akhir file, setelah penutup tag </g> sebelum penutup tag </svg>.

  <script type="text/javascript">
    //<![CDATA[
    var paletWarna = [
      '#30a0c4',
      '#309bba',
      '#3096b0',
      '#2f90a7',
      '#2c89a0',
      '#2b8397',
      '#2c7f8c',
      '#2c7a82'
    ];
    function animasiMosaik() {
      for (var i = 0; i < 10; i++) {
        var grup = Math.floor(Math.random() * 4);
        var mosaik = document.getElementById('mosaik' + grup).children;
        var segitiga = Math.floor(Math.random() * mosaik.length);
        var warna = 2 + grup + (Math.floor(Math.random() * 5) - 2);
        if (warna < 0) {
          warna = 0;
        } else if (warna >= paletWarna.length) {
          warna = paletWarna - 1;
        }
        mosaik[segitiga].style.fill = paletWarna[warna];
      }
    }
    setInterval(animasiMosaik, 100);
    //]]>
  </script>

Penjelasan kode JavaScript

Pertama-tama kita daftarkan dulu palet warna-warna yang akan digunakan.

Untuk setiap grup, warna akan dipilih secara acak antara warna dasar, 2 tingkat lebih terang, hingga 2 tingkat lebih gelap. Karena kita memiliki 4 grup mosaik, maka palet warnanya ada 8 (4 tingkat warna dasar untuk masing-masing grup + 2 tingkat warna lebih terang + 2 tingkat warna lebih gelap dari keseluruhan).

Misalnya untuk grup mosaik0, pilihan warnanya adalah #30a0c4, #309bba, #3096b0, #2f90a7, #2c89a0 (indeks 0..4), untuk grup mosaik1, pilihan warnanya dari indeks 1..5, dan seterusnya.

Fungsi animasiMosaik() memilih secara acak, grup mana yang akan diubah warnanya (lihat variabel grup). Lalu memilih secara acak segitiga yang mana dari grup tersebut yang akan diubah warnanya (lihat variabel segitiga). ID yang sebelumnya kita set di Inkscape dapat digunakan pada kode JavaScript untuk memilih elemen grup tersebut.

Setelah diketahui grup dan segitiga mana yang akan diubah, pilih secara acak warna dari palet sesuai rentang indeks berdasarkan nomor grup, sehingga pengacakan warna tetap mengikuti gradasi (lihat variabel warna). Pastikan indeks warna tidak keluar dari batasan indeks array paletWarna.

Setelah itu, ubah warna (fill) segitiga dengan warna yang sudah dipilih.

Karena ada banyak segitiga, setiap kali fungsi dieksekusi, kita buat agar 10 segitiga berubah warnanya dengan menyisipkan kode di atas ke dalam for loop. Jika ingin lebih banyak lagi yang berubah, tinggal disesuaikan nilainya.

Terakhir, gunakan fungsi setInterval() untuk menjalankan fungsi animasiMosaik() setiap selang waktu 100 ms.

Coba buka gambar SVG ini menggunakan web browser.

Membuat animasi perubahan warna yang mulus

Mosaik sudah berubah warna, tapi perubahannya terlihat kurang mulus. Properti fill yang kita ubah dengan menggunakan JS, adalah bagian dari atribut style, artinya kita bisa menggunakan CSS untuk mengubahnya, termasuk memanfaatkan fitur CSS transition.

Sisipkan kode CSS atau tag <style> berikut setelah penutup </script> yang telah kita buat tadi.

  <style>
    #mosaik0 path,
    #mosaik1 path,
    #mosaik2 path,
    #mosaik3 path {
      transition: fill 1s;
    }
  </style>

Kode CSS diatas memilih seluruh segitiga (path) dari semua grup mosaik, dan memberikan efek transisi selama 1 detik ketika warnanya berubah. Sederhana!

Buka kembali gambar mosaic-anim.svg di web browser dan lihat hasilnya.

Menyisipkan gambar bergerak SVG ke dalam halaman web

Salah satu keterbatasan gambar bergerak SVG yang menggunakan kode JS adalah bahwa tidak semua aplikasi bisa mengeksekusi kode JS yang disisipkan di dalam gambar SVG. Dan hal tersebut pun sama apabila gambar mosaic-anim.svg ini disisipkan di halaman web menggunakan tag HTML <img> maupun CSS background-image: url(mosaic-anim.svg); maka kode JS tidak akan dieksekusi.

Untuk mengakalinya, kita bisa menyisipkan gambar SVG menggunakan tag HTML <object> dengan sintaks kode sebagai berikut:

<object data="https://www.meramukoding.com/files/mosaik/mosaic-anim.svg" type="image/svg+xml" width="800" height="600" style="width: 100%; height: auto;"></object>

Atribut width dan height disesuaikan dengan ukuran kanvas, dan selebihnya bisa diatur menggunakan CSS.

Unduh berkas SVG di sini.

Tulis Komentar