Perbandingan Animasi Css Dan Javascript Pada Web b

TUGAS TEKNOLOGI WEB

PENGGUNAAN ANIMASI CSS DAN JAVASCRIPT PADA WEB BROWSER

DISUSUN OLEH

NAMA : RAHMAT HUSSEIN

NIM : 14/371428/PPA/04590

PROGRAM STUDI S2/S3 ILMU KOMPUTER

JURUSAN ILMU KOMPUTER DAN ELEKTRONIKA

UNIVERSITAS GADJAH MADA

YOGYAKARTA

1

2015

2

PENGGUNAAN ANIMASI CSS DAN JAVASCRIPT PADA WEB BROWSER

1. Pendahuluan

Kebanyakan dari pengembang menggunakan jQuery untuk membuat suatu animasi

pada browser. Fade, expand, merupakan contoh yang sederhana. Sebagai project interaktif

membuat lebih agresif dan perangkat mobile semakin berkembang pada layarnya, serta

kinerja yang semakin penting. Flash memudar dan animator berbakat membuat HTML5

untuk melakukan sesuatu yang tidak pernah bisa sebelumnya. Mereka membutuhkan tools

yang lebih baik untuk pengurutan kompleks dan kinerja dengan hasil terbaik. jQuery tidak

dirancang untuk itu. Browser semakin bagus dan mulai menawarkan beberapa solusi.

Solusi yang paling banyak ditawarkan adalah dengan menggunakan animasi CSS.

Perindustrian telah menyuarakan “akselarasi hardware” dan “mobile-friendly” selama

bertahun - tahun dalam konferensi yang menggelitik pendengar Animasi berbasis

JavaScript diperlakukan seolah - olah itu kuno dan jelek.

2. CSS (Cascading Style Sheet)

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa

komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan

merupakan bahasa pemograman.Sama halnya styles dalam aplikasi pengolahan kata

seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab,

bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam

beberapa berkas. Pada umumnya CSS dipakai untuk memformat tampilan halaman web

yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna

tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar

paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS

adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan

adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format

yang berbeda.

Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat

diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak (parent-

child) pada setiap style. CSS sendiri merupakan sebuah teknologi internet yang

direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah

CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka

yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS

Contoh file CSS seperti di bawah ini:

3

<html>

<head>

<style type="text/css">

Body

{

background-color:#d0e4fe;

}

h1

{

color:orange;

text-align:center;

}

P

{font-family:"Times New Roman";

font-size:20px;

}

</style>

</head>

<body>

<h1>CSS example!</h1><p>This is a paragraph.</p>

</body>

</html>

3. JavaScript

JavaScript adalah bahasa pemrograman berbasis java yang merupakan interface

pembantu dalam pemrograman web. JavaScript populer di internet dan dapat bekerja di

sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox,

Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan

tag SCRIPT.

JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape di bawah

nama Mocha, yang nantinya namanya diganti menjadi LiveScript, dan akhirnya menjadi

JavaScript. Navigator sebelumnya telah mendukung Java untuk lebih bisa dimanfaatkan

para programmer yang non-Java. Maka dikembangkanlah bahasa pemrograman bernama

LiveScript untuk mengakomodasi hal tersebut. Bahasa pemrograman inilah yang akhirnya

berkembang dan diberi nama JavaScript, walaupun tidak ada hubungan bahasa antara Java

dengan JavaScript.

JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk membuat efek

rollover baik di gambar maupun teks, dan yang penting juga adalah untuk membuat

4

AJAX. JavaScript adalah bahasa yang digunakan untuk AJAX.

Kode JavaScript biasanya dituliskan dalam bentuk fungsi yang ditaruh di tag <head> yang

dibuka dengan tag <script type="text/javascript">.

<script type="text/javascript">

alert("Halo Dunia!");</script>

Kode JavaScript juga bisa diletakkan di file tersendiri yang berekstensi .js (singkatan dari

JavaScript). Untuk memanggil kode JavaScript yang terdapat di file sendiri, di bagian

awal <head> harus ditentukan dahulu nama file .js yang dimaksud menggunakan contoh

kode seperti berikut:

<script type="text/javascript" src="alamat.js"></script>

Contoh peletakan JavaScript pada html seperti berikut ini.

<html>

<head>

<script type="text/javascript">

...

</script>

</head>

</html>

4. Animasi menggunakan CSS

Menggunakan CSS merupakan cara termudah untuk mendapatkan sesuatu yang

bergerak dalam layar. Di bawah ini adalah beberapa CSS yang akan memindahkan elemen

100px pada sumbu X & Y. Ini dilakukan dengan menggunakan transisi CSS yang diatur

untuk mengambil 500ms. Ketika class move ditambahkan, nilai transform berubah dan

transisi dimulai.

.box {

-webkit-transform: translate(0, 0);

-webkit-transition: -webkit-transform 500ms;

transform: translate(0, 0);

transition: transform 500ms;}

.box.move {

5

-webkit-transform: translate(100px, 100px);

transform: translate(100px, 100px);}

6

Gambar 1. Keadaan sebelum kotak diklik

8

Gambar 2. Keadaan Kotak setelah diklik

Selain durasi transisi ada pilihan untuk easing, yang mana animasi lebih dapat dirasakan.

Pada potongan coding di atas, membuat class CSS yang terpisah bertujuan untuk

mengelola animasi dan dapat juga dipergunakan JavaScript untuk mengalihkan animasi

menjadi on dan off.

box.classList.add('move');

Dengan ini akan membuat keseimbangan yang sangat menarik pada aplikasi. Dengan

mengelola suatu kondisi dengan JavaScript, dengan mudah dalam mengatur class yang

sesuai dengan elemen yang diinginkan untuk menangani animasi pada web browser. Di

event transitioned pada bagian element hanya bisa didukung atau dilakukan pada Internet

Explorer versi terakhir atau versi saat ini. Sementara web browser lainnya juga telah

mendukung event ini sejak beberapa waktu yang lalu.

JavaScript membutuhkan event tersebut pada bagian akhir transisi seperti di bawah ini.

var box =

document.querySelector('.box');box.addEventListener('transitionend',

onTransitionEnd, false);

function onTransitionEnd() {

// Handle the transition finishing.

}

Selain itu pada penggunaan transisi CSS, dapat digunakan animasi CSS, yang mana akan

membuat banyak kontrol terhadap keyframe animasi, durasi dan iterasi pada pergerakan

animasi tersebut.

Sebagai pemula untuk memakai animasi, keyframes merupakan istilah lama dari

tulisan tangan animator. Animator akan membuat frame khusus untuk satu bagian action,

yang disebut sebagai keyframe, yang akan merekam hal-hal seperti bagian yang paling

ekstrim dari beberapa gerakan, dan kemudian mereka akan mengatur tentang menggambar

semua frame individual di antara keyframes. Proses yang sama saat ini dengan animasi

CSS, pada web browser nilai properti CSS harus memiliki poin yang diberikan, dan

mengisi kekosongan yang ada.

Sebagai contoh, membuat animasi kotak sama caranya dengan menggunakan transisi,

dapat ber-animasi tanpa interaksi dari user seperti diklik, dan dengan pengulangan yang

9

tidak terbatas. Dapat juga mengubah nilai properti pada saat yang sama, seperti di bawah

ini.

/**

* This is a simplified version without

* vendor prefixes. With them included

* (which you will need) things get far

* more verbose!

*/.box {

/* Choose the animation */

animation-name: movingBox;

/* The animation’s duration */

animation-duration: 1300ms;

/* The number of times we want the animation to run */

animation-iteration-count: infinite;

/* Causes the animation to reverse on every odd iteration */

animation-direction: alternate;}

@keyframes movingBox {

0% {

transform: translate(0, 0);

opacity: 0.3;

}

25% {

opacity: 0.9;

}

50% {

transform: translate(100px, 100px);

opacity: 0.2;

}

100% {

transform: translate(30px, 30px);

opacity: 0.8;

}}

10

Gambar 3. Kotak bergerak tanpa harus ada interaksi dari user.

Dengan animasi CSS, dapat ditentukan pada animasi itu sendiri secara independen pada

element yang diinginkan, dan menggunakan properti animation-name untuk memilih

animasi yang diperlukan.

Animasi CSS oleh vendor masih menggunakan prefix, sebenarnya dengan -

Kotak bergerak ke bawah dan ke atas dengan pengulangan yang tidak terbatas

11

webkit- yang digunakan dalam Safari, Safari Mobile, dan Android Browser. Chrome,

Opera, Internet Explorer dan Firefox tanpa prefix. Banyak tools akan membantu dalam

membuat versi prefix dari CSS yang dibutuhkan, memungkinkan untuk menulis versi

unprefixed dalam file source.

5. Animasi menggunakan JavaScript dan Web Animation API

Membuat animasi menggunakan JavaScript lebih kompleks dibandingkan dengan

membuat transisi CSS atau animasi, tetapi JavaScript menyediakan keunggulan lebih

untuk membuat animasi yang baik. Web Animation API digunakan untuk memakai

properti khusus dari CSS, atau membuat efek pada objek.

Animasi JavaScript sangat penting, sebagaimana menulis dalam baris sebagai bagian

dari kode program. Serta dapat men-engkapsulasi kode di dalam sebuah objek yang

diinginkan. Berikut ini adalah kode JavaScript yang akan dibutuhkan untuk membuat

kembali seperti transisi CSS sebelumnya.

var target = document.querySelector('.box');

var player = target.animate([

{transform: 'translate(0)'},

{transform: 'translate(100px, 100px)'}],

500);player.addEventListener('finish', function() {

target.style.transform = 'translate(100px, 100px)';});

Secara default, Web Animation hanya memodifikasi tampilan elemen. Jika menginginkan

objek berada pada lokasi itu berpindah, maka untuk memodifikasi bagian pokok style

dilakukan pada saat animasi selesai bergerak.

12

Gambar 4. Animasi kotak bergerak dengan menggunakan JavaScript.

Web Animation API merupakan standar baru dari W3C. Standar ini didukung pada

Chrome dan Opera dan pengembangannya aktif pada Firefox. Dan pengembangannya

disebut dengan polyfill.

Dengan animasi JavaScript, dapat dikendalikan style sebuah element pada setiap

langkahnya. Dengan ini animasi dapat diperlambat pergerakannya, menjeda pergerakan,

Objek bergerak ke bawah dan berhenti

13

menghentikan pergerakan, memgembakalan ke posisi semula dan memanipulasi element

yang diinginkan. Hal ini sangat berguna untuk membangun aplikasi kompleks berorientasi

objek.

6. Kinerja dari CSS dan JavaScrip

Berikut adalah beberapa poin yang perlu diingat:

a. Animasi berbasis CSS, dan Animasi Web di mana didukung secara native, biasanya

ditangani di thread yang dikenal sebagai "compositor thread". Hal ini berbeda dengan

"main thread" browser, di mana styling, tata letak, lukisan, dan JavaScript dijalankan.

Ini berarti bahwa jika browser menjalankan beberapa task dengan cost tinggi di thread

utama, animasi ini dapat terus berjalan tanpa terganggu.

b. Perubahan lain untuk mengubah dan opacity can, dalam banyak kasus, juga ditangani

oleh thread compositor.

c. Jika animasi setiap memicu cat/warna, tata letak, atau keduanya, "main thread" akan

diminta untuk melakukannya. Hal ini berlaku untuk CSS dan animasi berbasis

JavaScript, dan overhead pada tataletak, warna mungkin akan mengesampingkan task

yang berhunbungan dengan eksekusi CSS atau JavaScript.

7. Kesimpulan

Adapun kesimpulan yang dapat diambil adalah sebagai berikut:

a. Gunakan CSS untuk kondisi yang kecil seperti untuk keperluan element pada user-

interface. Transisi CSS dan animasi ideal untuk menu atau untuk meunjukkan tooltip.

Untuk pengendali/ kontrol dapat digunakan JavaScript dan untuk animasi tetap dengan

CSS.

b. Gunakan JavaScript ketika dibutuhkan untuk pengendalian animasi yang lebih banyak.

Standar Web Animation API tersedia pada Chrome dan Opera, menyediakan object

real, ideal untuk aplikasi berorientasi objek yang kompleks. JavaScript juga berguna

pada saat animasi berhenti, jeda, gerak lambat atau membalik.

c. Gunakan requestAnimationFrame untuk mengatur seluruh layar. Ini merupakan

keunggulan dari pendekatan JavaScript, tapi akan berguna jika digunakan untuk sebuah

game dan menggambar pada canvas HTML.

8. Referensi

1. Cascading Style Sheets. Tersedia : https://id.wikipedia.org/wiki/Cascading_Style_Sheets diakses pada 2 Oktober 2015

2. JavaScript. Tersedia : https://id.wikipedia.org/wiki/JavaScript diakses pada 2 Oktober 2015

https://id.wikipedia.org/wiki/JavaScript

https://id.wikipedia.org/wiki/Cascading_Style_Sheets

14

3. Mith Busting : CSS Animation vs JavaScript. Tersedia : https://css-tricks.com/myth-busting-css-animations-vs-javascript/ diakses pada 2 Oktober 2015

4. CSS vs JavaScript Animations. Tersedia : https://developers.google.com/web/fundamentals/look-and-feel/animations/css-vs-javascript?hl=en diakses pada 3 Oktober 2015

5. Animation and Performance. Tersedia : https://css-tricks.com/myth-busting-css-animations-vs-javascript/ diakses 3 Oktober

https://css-tricks.com/myth-busting-css-animations-vs-javascript/


https://developers.google.com/web/fundamentals/look-and-feel/animations/css-vs-javascript?hl=en

https://developers.google.com/web/fundamentals/look-and-feel/animations/css-vs-javascript?hl=en



Perbandingan Animasi Css Dan Javascript Pada Web b

Documents

Transcript of Perbandingan Animasi Css Dan Javascript Pada Web b