Pengenalan Animation di Angular

Gambar di ambil di Google : lynda.com

Assalamu’alaikum wr.wb.

Di perkembangan teknologi web modern sekarang ini, animasi merupakan suatu aspek yang penting. Animasi di web memberikan kesan tidak kaku, sehingga user nyaman menggunakan aplikasi kita. Oleh karena itu, pada kesempatan ini, saya mau berbagi hasil belajar saya tentang animasi di Angular.

Untuk dapat menggunakan fungsi-fungsi yang ada dalam animasi di angular, kita harus meng-import-kan module BrowserAnimationsModule dari package ‘@angular/platform-browser/animations’ terlebih dahulu.

cuplikan code di app.module.ts

Dalam pembuatan animasi, angular menyediakan beberapa fungsi yand dapat kita pakai. Berikut adalah fungsi pada animasi Angular yang saya ketahui :

  • trigger : fungsi trigger digunakan untuk memulai animasi, dimana trigger ini akan di binding di element template kode kita.
  • state : berisi state animasi yang ada di dalam trigger. State biasanya diikuti dengan style. Di angular terdapat 3 jenis state, yaitu Void, Default(*), Custom.
  1. Void adalah state dari suatu elemen bernilai kosong.
  2. Default, menurut saya adalah state global, jadi apapun state yang diterima oleh animasi, maka akan diproses.
  3. Custom adalah state yang kita buat sendiri, misal seperti contoh, state hilang, dan muncul.
  • style : berisi key-value object yang merupakan property dari CSS.
  • animate : fungsi ini berguna untuk menerapkan style, tetapi dengan durasi waktu yang diberikan.
  • transition : merupakan langkah/urutan animasi antar state.
  • query: mencari satu atau lebih inner element yang nantinya akan diberikan urutan animasi.
  • stagger: dipakai dengan query, dan memberikan waktu “gap” setelah animasi setiap itemnya dijalankan.

Untuk lebih lanjutnya kita coba dengan menggunakan fungsi, trigger, state, style. Kita membuat contoh animasi menghilangkan button 😅

Pertama, kita buat animasi trigger di app.component.ts.

cuplikan code di app.component.ts

Nah,… dari animasi yang kita buat di atas, kita coba memberikan state hilang pada button yang akan kita terapkan animasi.

Kedua, kita tambahkan tag elemen html button dengan binding animasi trigger kita tadi, beserta statenya.

cuplikan code di app.component.html

Setelah kita lihat :

Hasil Belajar State dengan state “hilang”

Kemudian, kita buat statenya menjadi “muncul” :

cuplikan code di app.component.ts

Dari sini kita tahu, bahwa button tadi hilang karena ketika state kita buat “hilang” maka akan menerapkan style “opacity:0”.

Hasil Belajar State dengan state “muncul”

Selanjutnya kita tambahkan animasi transition 😄

Pada kali ini kita menggunakan fungsi animate(), jadi jangan lupa di import ya dari “@angular/animations”.

Agar lebih mudah, kita tambahkan satu tombol sebagai toggle, untuk menampilkan tombol, dan menghilangkan tombol “pencet gan” tersebut.

cuplikan code di app.component.html

Kemudian kita tambahkan fungsi untuk mengubah state menjadi “hilang” atau “muncul”, sekaligus kita membuat transition antara state “muncul” ke “hilang”.

cuplikan code di app.component.ts

Hasil yg diberikan adalah sebagai berikut 😺 :

Hasil Belajar Transition dg state muncul => hilang

Jika dilihat dari tampilan di atas animasi tombol hanya tampil ketika saat menghilangkan tombol saja, dan saat menampilkan tidak ada animasi. Kita dapat menuliskan ulang seperti ini.

cuplikan code di app.component.ts

Agar lebih singkat, transition untuk state1 => state2 atau state2 => state1, bisa kita rangkap dengan menggunakan tanda <=>.

Berikut adalah kode nya

cuplikan code di app.component.ts

Dan hasilnya adalah sebagai berikut :

Hasil Belajar Transition dg state muncul => hilang & hilang => muncul

Nah,, sekarang kita belajar menggunakan query, dan stagger. Saya akan memberikan contoh menampilkan tulisan seperti dipower point 😅.

Pertama kita buat tampilan tag html seperti berikut, tulisan bebas 👍

cuplikan code di app.component.html

Kemudian kita tambahkan animasi di app.component.ts

cuplikan kode di app.component.ts

Ketika dijalankan akan menjadi seperti berikut :

Hasil Belajar Query & Stagger

Sekian hasil belajar tentang pengenalan animasi.

Sebagai bahan belajar, berikut saya lampirkan source code di github :

Terima Kasih. 😄 😄

Wassalamu’alaikum wr.wb.