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

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.

<script src="https://www.codepolitan.com/lib/tau/animation/tau.animation.min.js">

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

<div class="box"></div>

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

Teknik Menjalankan Animasi

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

Transform

• 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

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

CSS Properties

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:

Method Chain

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

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

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);

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

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

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

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

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

Menggunakan Callback

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

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