Memulai Anime JS

Untuk memulai, download dan masukan file AnimeJS didalam halaman HTML kamu:

Copy to Clipboard

 

atau bisa juga menggunakan CDN :

Copy to Clipboard

 

Untuk membuat animasinya, kita menggunakan fungsi anime(), yang mana fungsi ini sudah disediakan oleh AnimeJS. Fungsi ini menggunakan objek sebagai bentuk argumentasi fungsinya. Kita akan menulis semua animasi yang kita butuhkan didalam objek tersebut.

Copy to Clipboard

 

Terdapat beberapa properti yang digunakan untuk mendeskripsikan animasi. Properti-properti tersebut dibagi menjadi 4 kategori:

  1. Targets – ini adalah sebuah referensi pada elemen yang akan kita targetkan untuk dibuat animasi. Bisa saja sebuah selector CSS (seperti, div, #targetID, .class), DOM node atau node list, atau bahkan objek JavaScript. Terdapat juga pilihan untuk menggabungkan selector selector diatas menggunakan array
  2. Properties – termasuk semua properti -properti dan atribut yang dapat di buat animasi ketika berhubungan dengan CSS, objek JavaScript, DOM, dan SVG.
  3. Property Parameters – termasuk parameter properti yang berhubungan, seperti duration, delay, easing, dll
  4. Animation Parameters – termasuk parameter properti yang berhubungan, seperti direction, loop, dll

Mari kita coba langsung praktekan dengan contoh sederhana, buatlah JS seperti dibawah

Copy to Clipboard

See the Pen Memulai Anime JS by Sayudha (@Sayudhawebdesign) on CodePen.

Catatan: Saya tidakan menjelaskan tentang HTML dan CSS yang ada di codepen di atas, saya akan lebih fokus menjelaskan tentang JSnya, karena HTML dan CSS di atas sangat mudah dan sangat dasar, bisa dilihat langsung di bagian HTML/Pug dan CSS nya.

Pada contoh diatas:

  1. Kita memilih si kotak hijau (class .test-div)
  2. Kita gerakan 100px ke kiri sambil merubahnya menjadi lingkaran
  3. Kita lakukan perubahan ini semulus mungkin dalam 2 detik (2000 ms)
  4. Linear artinya kita tidak menggunakan efek easing pada animasi
  5. Dengan menambahkan properti alternate, kita memerintahkan class .test-div untuk kembali ke posisi awalnya dan bentuk awalnya. AnimeJS melakukannya memutarbalikan animasi.

 

Sekian dari saya, pada postingan berikutnya kita akan membuat animasi yang lebih bagus, yaitu membuat animasi bandul.