Membuat Animasi pada Aplikasi Tizen Menggunakan Library TAU Animation

Ditulis oleh Toni Haryanto, dipublikasi pada 16 Aug 2016 dalam kategori Tutorial
Membuat Animasi pada Aplikasi Tizen Menggunakan Library TAU Animation

Pada tutorial Membuat Aplikasi Tizen berbasis HTML5, kita sudah melihat bagaimana cara memanfaatkan framework Tizen Advanced UI (TAU) pada proses pembuatan aplikasi web Tizen. TAU memiliki gaya tampilan dan animasi yang sangat mirip dengan versi aplikasi native, sehingga cukup sulit untuk membedakan aplikasi native atau web. Disamping itu, TAU juga memiliki library animation yang dapat kita manfaatkan untuk melakukan serangkaian animasi pada aplikasi web kita. Pada tutorial kali ini, kita akan menjelaskan bagaimana cara menggunakan library animation tersebut.

Persiapan

Buat sebuah project aplikasi web di IDE, dengan mengakses menu File > New > Tizen Web Project. Kemudian buka tab Online Sample dan pilih type TAU UI Components. Kita memilih tipe template tersebut karena didalamnya sudah terdapat berbagai sampel interaksi dan juga library TAU Animation. Kamu dapat menjalankan project tersebut dan bermain-main dengan contoh program yang sudah dibuat. Semua kebutuhan antarmuka aplikasi web untuk Tizen sudah ada contohnya pada project ini. 1

TAU Animation adalah modul untuk menganimasikan objek HTML tanpa perlu menggunakan library eksternal lain.TAU Animation menyediakan usabilitas yang bagus, performa tinggi dan beragam fungsional. Beberapa fitur yang disediakan oleh TAU Animation diantaranya:

  • Animasi tunggal dan grup, memungkinkan kita untuk meminimalisir parameter sehingga pembuatan animasi menjadi lebih sederhana.
  • Efek siap pakai (predefined effects), yang telah disediakan dan langsung dapat digunakan tanpa harus menspesifikkan nilai-nilai yang panjang.
  • Efek grup, tersedia dengan menggunakan stagger, yang memungkinan kita untuk menjalankan animasi dari sekumpulan elemen secara berurutan.
  • Kontrol waktu, seperti penggunaan ease, durasi dan delay.
  • Animasi CSS, yakni mengubah nilai CSS sebagai bahan untuk dianimasikan, seperti warna background, border, margin, padding, shadow dan lain-lain.
  • Fungsi callback, tersedia fungsi callback seperti onStart, onUpdate, dan onComplete.

Untuk menggunakan TAU Animation, kita harus memuat file lib/tau/animation/tau.animation.min.js ke dalam dokumen HTML. Library ini sebenarnya tidak memerlukan library core TAU, sehingga dapat digunakan berbarengan dengan library atau framework JavaScript lainnya. Buka file index.html. Hapus file tau.js dari dalam dokumen html dan tambahkan script tau.animation.min.js sebelum tag tutup :

[removed]

Hapus file style.css dari dalam dokumen html dan tambahkan CSS berikut di bagian <head>:

<style>
.box {
     position: absolute;
     width: 100px;
     height: 100px;
     left: 100px;
     top: 100px;
     background-color: red;
}
</style>

Hapus semua elemen yang ada di dalam tag, kemudian tambahkan elemen berikut:

Persiapan sudah siap. Sekarang buka file js/app.js lalu tuliskan kode berikut:

var t = tau.animation.target;
t('.box').tween('swing', 1000);

Apabila kita jalankan kode tersebut di web simulator, akan nampak kotak berwarna merah bergerak dengan animasi ‘swing’.

2

Teknik Menjalankan Animasi

Seperti pada kode yang sudah kita coba sebelumya, kita menggunakan method target dari library TAU Animation, dengan menggunakan selector seperti halnya selector pada CSS. Kita juga dapat menggunakan elemen HTML murni sebagai nilai parameter target. Kita juga sudah menggunakan method tween(). Method inilah yang kita gunakan untuk menerapkan animasi pada elemen yang menjadi target. Method tween() menerima dua buah parameter:

tween({animation}, {option})

Parameter pertama adalah opsi animasi. Parameter ini dapat diisi oleh predefined effects, transform dan CSS property. Parameter kedua adalah opsi untuk animasi. Opsi ini terdiri dari durasi, ease, delay, callback, dan stagger. Bila kita mengisikan nilai tanpa menspesifikkan properti, maka nilai tersebut diset untuk properti durasi.

Predefined Effects

Seperti pada contoh kode sebelumnya, kita menggunakan efek ‘swing’. Efek ini menghasilkan animasi berayun. Selain itu masih ada banyak lagi efek yang sudah disediakan yang bisa Kamu coba satu per satu. Berikut diantaranya: bounce, flash, pulse, rubberBand, shake, swing, tada, wobble, jello, bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp, fadeIn, fadeInDown, fadeInLeft, fadeInRight, fadeInUp, fadeOut, fadeOutDown, fadeOutLeft, fadeOutRight, fadeOutUp, flip, flipInX, flipInY, flipOutX, flipOutY, lightSpeedIn, lightSpeedOut, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight, slideInUp, slideInDown, slideInLeft, slideInRight, slideOutUp, slideOutDown, slideOutLeft, slideOutRight, zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp, zoomOut, zoomOutDown, zoomOutLeft, zoomOutRight, zoomOutUp, hinge, rollIn, rollOut.

Transform

Kita juga dapat mengisi parameter pertama ini dengan manipulasi opsi transform, diantaranya adalah:

  • translateX: memindahkan posisi elemen pada sumbu X
  • translateY: memindahkan posisi elemen pada sumbu Y
  • translateZ: memindahkan posisi elemen pada sumbu Z
  • rotateX: memutar objek berdasarkan sumbu X
  • rotateY: memutar objek berdasarkan sumbu Y
  • rotateZ: memutar objek berdasarkan sumbu Z
  • scaleX: mengubah skala objek ke arah sumbu X
  • scaleY: mengubah skala objek ke arah sumbu Y
  • skewX: menarik kedua sisi objek yang sejajar sumbu X
  • skewY: menarik kedua sisi objek yang sejajar sumbu Y

Sebagai contoh, ganti kode yang sudah kita coba dengan kode berikut:

t('.box').tween({rotateZ: 360}, 1000);

Pada kode di atas, kita memutar objek sebesar 360 derajat selama 1000 milidetik atau 1 detik. Hasil dari kode di atas akan seperti gambar berikut:

3

CSS Properties

Kita dapat membuat animasi pada elemen dengan memanipulasi properti CSSnya. Beberapa properti yang didukung diantaranya adalah:

left, top, width, height, background-color, color, border, border-width, border-color, margin, marginTop, marginRight, marginBottom, marginLeft, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, font-size, line-height, clip-path, background-position, background-size, box-shadow

Coba kode berikut:

t('.box').tween({backgroundColor: 'blue'}, 1000);

Hasil dari kode di atas akan nampak seperti pada gambar berikut:

4

Method Chain

TAU Animation menerapkan method chaining untuk membuat animasi yang berurutan. Method chaining maksudnya adalah kita memanggil method berturut-turut setelah method lain tanpa mesti menuliskan selector lagi. Agar lebih jelasnya kita coba kode berikut:

t('.box').tween({rotateZ: 90}, 1000);
t('.box').tween({translateX: 240}, 1000);

Kode di atas akan memberikan hasil yang sama dengan kode berikut:

t('.box').tween({rotateZ: 90}, 1000).tween({translateX: 240}, 1000);

Kode di atas akan menghasilkan animasi kotak berputar 90 derajat selama 1 detik, kemudian dilanjutkan dengan animasi bergeser ke kanan sejauh 240px.

5

Pada contoh di atas, satu animasi diselesaikan terlebih dahulu baru kemudian dilanjutkan dengan animasi selanjutnya. Bila kita hendak melakukan dua atau lebih jenis animasi di satu waktu, kita harus memasukkan jenis animasi di dalam satu method. Perhatikan contoh berikut:

t('.box').tween({rotateZ: 90, translateX: 240}, 1000).tween('tada', 1000);
6

Kita lihat hasil dari kode di atas, animasi rotateZ dan translateX dijalankan di waktu yang sama karena kedua animasi tersebut dipanggil di dalam satu method tween().

Efek Animasi Berantai

Kita dapat membuat animasi dari sejumlah elemen secara berantai, artinya animasi suatu elemen diikuti oleh elemen selanjutnya dengan jarak waktu/interval tertentu. Untuk melakukan hal ini kita menggunakan opsi stagger. Perhatikan contoh berikut. Buat beberapa lagi elemen berclass “box” pada bagian body.

Kemudian tambahkan kode JavaScript berikut:

t('.box').tween({rotateZ: 180, translateX: 240, translateY: 240}, 
{duration: 500, stagger: 200});

Hasil dari kode di atas akan seperti ini:

7

Kita membuat lima buah elemen class “box”. Kemudian kita mengeset animasi rotateZ, translateX dan translateY selama 500 milidetik. Kita juga menambahkan opsi stagger dengan nilai 200 milidetik, yang artinya kita buat supaya antar elemen box beranimasi dengan jarak waktu antar elemen 0.2 detik. Bila kita tidak menambahkan opsi stagger, maka animasi kelima elemen box ini akan berjalan berbarengan.

Menggunakan Variasi Ease

Sejauh ini kita membuat animasi objek dengan kecepatan yang linear, artinya tidak ada variasi percepatan dan perlambatan. Kita sering menemukan animasi seperti benda yang jatuh yang agar ada efek gravitasi, maka kecepatan bola harus meningkat atau dengan kata lain terjadi percepatan. Atau kita juga mungkin memerlukan animasi seperti benda jatuh yang memantul, pergerakan karet atau penggaris yang bergetar, dan lain sebagainya. Itu semua dapat dilakukan dengan menggunakan opsi ease. Perhatikan contoh kode berikut:

t('.box').tween({translateY: 240}, {duration: 1000, ease: 'bounceOut'});

Hasil dari kode di atas akan nampak seperti benda yang mendarat dan memantul lalu berhenti, seperti gambar berikut:

8

Menggunakan Callback

Adakalanya ketika kita berinteraksi dengan suatu animasi, kita ingin agar animasi tersebut menjadi trigger untuk sebuah aksi lain, apakah sebelum animasi dimulai atau setelah animasi selesai. TAU Animation menyediakan callback diantaranya onStart yang dipangil sebelum animasi dimulai, dan onComplete yang dipanggil setelah animasi selesai dijalankan. Perhatikan contoh kode berikut:

t('.box').tween({translateY : 240},
{
  duration : 1000,
  onStart : function() {
    document.getElementsByClassName('box')[0][removed] = 'start';
  },
  onComplete : function() {
    document.getElementsByClassName('box')[0][removed] = 'finish';
  }
});

Kode di atas akan menghasilkan animasi seperti ini:

9

Pada kode di atas kita menambahkan opsi callback onStart yang menampilkan terlebih dahulu teks di dalam kotak bertuliskan ‘start’ sebelum animasi dimulai, dan menampilkan teks ‘finish’ setelah animasi selesai dijalankan.

Penutup

Kamu dapat mencoba mengkombinasikan berbagai opsi animasi yang sudah tersedia di TAU Animation seperti penjelasan di atas untuk membuat animasi yang lebih kompleks. Untuk mendapatkan penjelasan teoritis yang lebih lengkap, Kamu dapat merujuk ke halaman https://developer.tizen.org/development/guides/web-application/user-interface/tizen-advanced-ui/.

Artikel Lainnya

Berlangganan Informasi CodePolitan Melalui Email

Jangan sampai kamu melewatkan informasi penting tentang pemrograman dan teknologi! Kamu bisa berlangganan Newsletter CodePolitan dengan cara mengisi formulir di samping.

Promo potongan 10% untuk bergabung dalam kelas online Menjadi Web Programmer