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.
<h3>Persiapan</h3>
Buat sebuah project aplikasi web di IDE, dengan mengakses menu <strong>File &gt; New &gt; Tizen Web Project</strong>. Kemudian buka <strong>tab Online Sample</strong> dan pilih <strong>type</strong> <strong>TAU UI Components</strong>. 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. <img class="alignnone size-full wp-image-12084" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/08/1.jpg" alt="1" width="694" height="236" />

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:
<ul>
 	<li><strong>Animasi tunggal dan grup</strong>, memungkinkan kita untuk meminimalisir parameter sehingga pembuatan animasi menjadi lebih sederhana.</li>
 	<li><strong>Efek siap pakai (<em>predefined effects</em>)</strong>, yang telah disediakan dan langsung dapat digunakan tanpa harus menspesifikkan nilai-nilai yang panjang.</li>
 	<li><strong>Efek grup</strong>, tersedia dengan menggunakan <em>stagger</em>, yang memungkinan kita untuk menjalankan animasi dari sekumpulan elemen secara berurutan.</li>
 	<li><strong>Kontrol waktu</strong>, seperti penggunaan <em>ease</em>, durasi dan <em>delay</em>.</li>
 	<li><strong>Animasi CSS</strong>, yakni mengubah nilai CSS sebagai bahan untuk dianimasikan, seperti warna background, border, margin, padding, shadow dan lain-lain.</li>
 	<li><strong>Fungsi callback</strong>, tersedia fungsi callback seperti onStart, onUpdate, dan onComplete.</li>
</ul>
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 :
<pre>&lt;script src="https://www.codepolitan.com/lib/tau/animation/tau.animation.min.js"&gt;
</pre>
Hapus file style.css dari dalam dokumen html dan tambahkan CSS berikut di bagian &lt;head&gt;:
<div>
<pre>&lt;style&gt;
.box {
     position: absolute;
     width: 100px;
     height: 100px;
     left: 100px;
     top: 100px;
     background-color: red;
}
&lt;/style&gt;</pre>
</div>
Hapus semua elemen yang ada di dalam tag, kemudian tambahkan elemen berikut:
<pre>&lt;div class="box"&gt;&lt;/div&gt;</pre>
Persiapan sudah siap. Sekarang buka file <strong>js/app.js</strong> lalu tuliskan kode berikut:
<pre>var t = tau.animation.target;
t('.box').tween('swing', 1000);</pre>
Apabila kita jalankan kode tersebut di web simulator, akan nampak kotak berwarna merah bergerak dengan animasi ‘swing’.

<img src="https://www.codepolitan.com/uploads/image/source/2/2.gif?1471323156304" alt="2" />
<h3>Teknik Menjalankan Animasi</h3>
Seperti pada kode yang sudah kita coba sebelumya, kita menggunakan <strong>method target</strong> 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 <strong>tween()</strong>. Method inilah yang kita gunakan untuk menerapkan animasi pada elemen yang menjadi target. Method tween() menerima dua buah parameter:

<code>tween({animation}, {option})</code>

Parameter pertama adalah opsi animasi. Parameter ini dapat diisi oleh <strong><em>predefined effects</em></strong>, <strong>transform</strong> dan <strong>CSS property</strong>. 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.
<h3>Predefined Effects</h3>
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: <code>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.</code>
<h3>Transform</h3>
Kita juga dapat mengisi parameter pertama ini dengan manipulasi opsi transform, diantaranya adalah:
<ul>
 	<li><code>translateX</code>: memindahkan posisi elemen pada sumbu X</li>
 	<li><code>translateY</code>: memindahkan posisi elemen pada sumbu Y</li>
 	<li><code>translateZ</code>: memindahkan posisi elemen pada sumbu Z</li>
 	<li><code>rotateX</code>: memutar objek berdasarkan sumbu X</li>
 	<li><code>rotateY</code>: memutar objek berdasarkan sumbu Y</li>
 	<li><code>rotateZ</code>: memutar objek berdasarkan sumbu Z</li>
 	<li><code>scaleX</code>: mengubah skala objek ke arah sumbu X</li>
 	<li><code>scaleY</code>: mengubah skala objek ke arah sumbu Y</li>
 	<li><code>skewX</code>: menarik kedua sisi objek yang sejajar sumbu X</li>
 	<li><code>skewY</code>: menarik kedua sisi objek yang sejajar sumbu Y</li>
</ul>
Sebagai contoh, ganti kode yang sudah kita coba dengan kode berikut:
<pre>t('.box').tween({rotateZ: 360}, 1000);</pre>
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:

<img src="https://www.codepolitan.com/uploads/image/source/2/3.gif?1471323189847" alt="3" />
<h3>CSS Properties</h3>
Kita dapat membuat animasi pada elemen dengan memanipulasi properti CSSnya. Beberapa properti yang didukung diantaranya adalah:

<code>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</code>

Coba kode berikut:
<pre>t('.box').tween({backgroundColor: 'blue'}, 1000);</pre>
Hasil dari kode di atas akan nampak seperti pada gambar berikut:

<img src="https://www.codepolitan.com/uploads/image/source/2/4.gif?1471323221532" alt="4" />
<h3>Method Chain</h3>
TAU Animation menerapkan <em>method chaining</em> 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:
<pre>t('.box').tween({rotateZ: 90}, 1000);
t('.box').tween({translateX: 240}, 1000);</pre>
Kode di atas akan memberikan hasil yang sama dengan kode berikut:
<pre>t('.box').tween({rotateZ: 90}, 1000).tween({translateX: 240}, 1000);</pre>
Kode di atas akan menghasilkan animasi kotak berputar 90 derajat selama 1 detik, kemudian dilanjutkan dengan animasi bergeser ke kanan sejauh 240px.

<img src="https://www.codepolitan.com/uploads/image/source/2/5.gif?1471323264822" alt="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:
<pre>t('.box').tween({rotateZ: 90, translateX: 240}, 1000).tween('tada', 1000);</pre>
<img src="https://www.codepolitan.com/uploads/image/source/2/6.gif?1471323293147" alt="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().
<h3>Efek Animasi Berantai</h3>
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 <strong>stagger</strong>. Perhatikan contoh berikut. Buat beberapa lagi elemen ber<em>class</em> “box” pada bagian body.
<pre>&lt;div class="box"&gt;&lt;/div&gt;
&lt;div class="box"&gt;&lt;/div&gt;
&lt;div class="box"&gt;&lt;/div&gt;
&lt;div class="box"&gt;&lt;/div&gt;
&lt;div class="box"&gt;&lt;/div&gt;</pre>
Kemudian tambahkan kode JavaScript berikut:
<pre>t('.box').tween({rotateZ: 180, translateX: 240, translateY: 240}, 
{duration: 500, stagger: 200});</pre>
Hasil dari kode di atas akan seperti ini:

<img src="https://www.codepolitan.com/uploads/image/source/2/7.gif?1471323335084" alt="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.
<h3>Menggunakan Variasi Ease</h3>
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:
<pre>t('.box').tween({translateY: 240}, {duration: 1000, ease: 'bounceOut'});</pre>
Hasil dari kode di atas akan nampak seperti benda yang mendarat dan memantul lalu berhenti, seperti gambar berikut:

<img src="https://www.codepolitan.com/uploads/image/source/2/8.gif?1471323384394" alt="8" />
<h3>Menggunakan Callback</h3>
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 <strong>onStart</strong> yang dipangil sebelum animasi dimulai, dan <strong>onComplete</strong> yang dipanggil setelah animasi selesai dijalankan. Perhatikan contoh kode berikut:
<pre>t('.box').tween({translateY : 240},
{
  duration : 1000,
  onStart : function() {
    document.getElementsByClassName('box')[0].innerHTML = 'start';
  },
  onComplete : function() {
    document.getElementsByClassName('box')[0].innerHTML = 'finish';
  }
});</pre>
Kode di atas akan menghasilkan animasi seperti ini:

<img src="https://www.codepolitan.com/uploads/image/source/2/9.gif?1471323408383" alt="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.
<h3>Penutup</h3>
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 <a href="https://developer.tizen.org/development/guides/web-application/user-interface/tizen-advanced-ui/" target="_blank">https://developer.tizen.org/development/guides/web-application/user-interface/tizen-advanced-ui/</a>.

Membuat Animasi pada Aplikasi Tizen Menggunakan Library TAU Animation

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Membuat Animasi pada Aplikasi Tizen Menggunakan Library TAU Animation

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Micro Python, Bahasa Python untuk Pemrograman Mikrokontroller

CodeIgniter PHP Framework Sekarang Punya Rumah Baru

Ikuti Giveaway dari CoderTalk dan Menangkan 6 Hadiah Menarik

Membuat Website Statis Gratis dengan Memanfaatkan Github Pages

Cara Install Node.js

Digital Input Output pada Arduino