Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Animasi JavaScript yang Berfungsi (Bagian 1 dari 4)

by
Read Time:7 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Ridho Aulia (you can also view the original English article)

HTML adalah bahasa tempat web dibangun dan itu semacam binatang aneh. Meskipun awalnya dimaksudkan sebagai cara untuk dengan mudah berbagi informasi akademik di Internet, perlahan-lahan telah diubah untuk mengakomodasi lingkungan yang kaya media yang kita kenal dan cintai. Karena sifat HTML yang serampangan (dan JavaScript, bahasa pemrograman yang memanipulasi elemen dalam HTML dan menjadikannya interaktif), terkadang kita harus sedikit berpikir di luar kotak. Dalam seri tutorial ini, saya akan menunjukkan kepada Anda bagaimana melakukan animasi lintas-browser menggunakan metode yang disebut spriting. Dan, karena ini adalah kesempatan belajar, kita akan melakukan semuanya tanpa perpustakaan eksternal (seperti jQuery).

Ini akan menjadi seri empat bagian. Saya akan menjelaskan penulisan itu sendiri di bagian satu (artikel ini) dengan beberapa JavaScript dasar, tetapi kemudian dalam angsuran nanti kita akan beralih ke beberapa teknik menengah seperti enkapsulasi, penanganan peristiwa, dan dukungan layar sentuh.

Jadi mari kita mulai!


Apa itu animasi?

Animasi didasarkan pada fenomena yang disebut persistence of vision, yang pada dasarnya mengatakan bahwa jika otak Anda melihat banyak gambar diam yang serupa dengan cukup cepat, maka itu akan tampak seolah-olah itu adalah satu gambar bergerak. Setiap jenis film atau video menggunakan teknik dasar ini — banyak frame yang sedikit berbeda diperlihatkan secara berurutan untuk membuat sesuatu tampak bergerak. Film biasanya berjalan pada 24 frame per detik (₁), sementara siaran televisi di Amerika Utara ditampilkan pada 29,97 frame per detik (₂). Jadi, dengan kata lain, apa yang ingin kita lakukan adalah membuat sesuatu yang menunjukkan bingkai serupa dengan sangat cepat (beberapa kali per detik).


Kesulitan di Web

Ada dua alasan utama animasi sulit digunakan di web:

  1. Yang pertama adalah bahwa browser web yang berbeda memiliki cara yang berbeda untuk menginterpretasikan HTML dan JavaScript, jadi apa yang berfungsi pada satu perangkat seringkali tidak berfungsi pada yang lain. Flash berfungsi dengan baik di sebagian besar browser, tetapi dukungan mulai turun untuk itu dan perangkat iOS tidak mengizinkannya sama sekali. Canvas memiliki banyak potensi, tetapi Internet Explorer 8 tidak mendukungnya. Sama halnya dengan Adobe Edge Animate. GIF bekerja pada semuanya, tetapi Anda tidak dapat mengontrol animasi atau membuatnya interaktif.
  2. Dan untuk yang kedua, setiap kali sebuah gambar disajikan di halaman web, permintaan terpisah dibuat antara browser dan server. Permintaan ini dapat bertambah, bahkan melalui koneksi Internet cepat, membuat beberapa frame setiap detik tidak dapat dikelola.

Solusi: Menulis

Salah satu cara mengatasi masalah ini adalah membuat sprite sheet. Dalam elemen seperti div, kita dapat mengatur gambar latar belakang untuk divthat yang mungkin lebih besar dari elemen itu sendiri. Kita juga dapat mengatur posisi latar belakang sehingga kita menentukan dengan tepat bagian mana dari gambar yang lebih besar akan ditampilkan. Sprite sheet adalah gambar yang lebih besar yang terbuat dari beberapa gambar kecil yang bisa kita pindahkan sehingga bisa menggantikan banyak gambar kecil. Lihatlah contoh di bawah ini, menggunakan J, maskot perusahaan saya Joust Multimedia:

javascript-spriting-jjavascript-spriting-jjavascript-spriting-j

Meskipun ada sepuluh gambar J yang berbeda, mereka ditempatkan bersama pada satu file PNG yang lebih besar (kami menggunakan PNG karena mereka dapat menunjukkan transparansi). Jika kita memiliki div yang hanya seukuran salah satu gambar, dan kita mengatur PNG ini sebagai latar belakang, itu akan terlihat seperti gambar tunggal.

Lihat hazdm CodePen.

Meskipun ini sepertinya banyak kesulitan untuk menunjukkan gambar, metode ini dengan baik memperbaiki dua masalah yang kita miliki sebelumnya. Dengan JavaScript yang sangat sedikit (satu baris!) Anda dapat mengubah posisi latar belakang div, dan itu berfungsi pada semuanya. Juga, karena semua bingkai ini pada gambar yang sama, hanya dibutuhkan satu permintaan untuk memuat gambar dalam halaman. Jadi, setelah halaman load, hal itu dapat beralih di antara sprite tanpa masalah sama sekali.

Jadi bagaimana kita mengaturnya untuk bernyawa dengan mudah? Langkah pertama adalah membuat lembaran sprite. Anda akan ingin tahu berapa dimensi akhir dari gambar Anda seharusnya, dan ruang sprite sesuai dengan grid. Sebagai contoh, gambar J saya akan menjadi 40px lebar dengan 50px tinggi, jadi saya berbaris sprite persis 40px terpisah secara horizontal dan tepat 50px terpisah secara vertikal. Mungkin akan lebih mudah jika Anda mengatur sprite awal Anda di sudut kiri atas.

Kemudian kita akan mengatur div dengan sedikit CSS untuk memastikan bahwa semuanya muncul dengan benar:

Dan di sini adalah CSS kita untuk memastikan sprite ditampilkan dengan benar:

Perhatikan hal-hal berikut:

  • Kita menentukan lebar dan tinggi div dengan ukuran sprite kita
  • Kita menentukan pengulangan latar belakang untuk 'no-repeat'
  • Kita menentukan posisi latar belakang ke '0 0'— ini akan menunjukkan sprite di sudut kiri atas

Sekarang, hanya perlu satu baris JavaScript untuk mengubah posisi latar belakang untuk menampilkan sprite berikutnya.

Di sini, kita memilih elemen (dengan id = 'j'), dan mengatur atribut style 'backgroundPosition'. Perhatikan bahwa itu dieja 'backgroundPosition' dalam JavaScript, dan tidak seperti 'background-position' di CSS. Juga perhatikan bahwa dalam JavaScript, 'px' diperlukan untuk jumlah x dan y — kita tidak bisa hanya memberikan angka. Dan karena kita memindahkan gambar latar belakang, kita harus memindahkannya ke arah yang berlawanan dari yang Anda harapkan. Untuk pindah ke sprite di sebelah kanan, kita harus memindahkan gambar 40px ke kiri.

Sekarang, jika kita hanya memiliki sesuatu yang sederhana untuk mengeksekusi kode ini (seperti tombol), kita dapat melihat bingkai berubah dalam tindakan: checkout DIsgk pada Codepen.

Selain itu, Anda mungkin tertarik untuk melihat kode sumber untuk halaman ini juga. Ini memiliki semua contoh di sini dengan komentar menyeluruh. Dan inilah sprite sheet yang saya gunakan.

Selanjutnya

Apa yang telah kita bahas dalam tutorial ini adalah awal yang baik, tetapi itu bukan animasi yang tepat. Pada bagian kedua dari seri ini kita benar-benar akan menghidupkan seolah berlari dan melompat, dengan membuat loop dengan sprite yang berbeda.

Pada bagian empat, kita akan membuat mouseover untuk aksi robot. Lihat ByGtv Codepen untuk pratinjau.


Kesimpulan & kelemahan

Meskipun ini bisa menjadi metode yang bagus untuk animasi di web, ada beberapa kelemahannya. Pertama, ini mengharuskan Anda untuk membuat setiap frame animasi, yang dapat memakan waktu. Kedua, browser tidak memiliki timer yang paling akurat untuk animasi, jadi jika itu sangat penting agar animasi Anda diatur dengan sempurna, maka ini mungkin tidak berfungsi. Akhirnya, Safari seluler (digunakan pada iPhone dan iPad) memiliki "fitur" di mana jika Anda memiliki gambar latar belakang yang lebih besar dari 2MB atau lebih besar dari 1024 x 1024 x 3 piksel (atau total piksel 3.145.728), ia akan secara otomatis mengubah skala gambar, merusak efek penulisan. Ini berarti bahwa sprite yang sangat besar, atau animasi dengan jumlah sprite yang sangat besar, tidak perlu dipertanyakan. Tetapi, untuk animasi kecil dan sederhana yang Anda inginkan sangat interaktif, ini adalah cara yang mudah dan bagus untuk mendapatkan sesuatu yang berfungsi di mana-mana.

Catatan Sisi Menarik

1. Sebelum suara diperkenalkan dengan film, sebenarnya tidak ada frame rate standar. Kamera dioperasikan oleh engkol tangan, jadi jika Anda memiliki juru kamera pemula tingkat frame mungkin melambat dan mempercepat tanpa disengaja. Demikian pula, teater yang kurang bereputasi terkenal karena memberitahu proyeksi mereka untuk menghidupkan proyektor lebih cepat untuk mempercepat pertunjukan sehingga mereka bisa masuk lebih banyak pemutaran. Ini juga mengapa kita secara stereotip menganggap film pra-suara bergerak sangat cepat — kebanyakan difilmkan sekitar 16 hingga 18 fps, jadi ketika kita memutarnya hari ini dengan 24 frame per detik, mereka bergerak lebih cepat daripada yang semula dimaksudkan.

2. Televisi awalnya disiarkan pada 30 fps di Amerika Utara, tetapi televisi berwarna menyebabkan kesalahan ketika ditampilkan pada kecepatan itu. Insinyur menemukan bahwa mereka dapat memperbaikinya dengan memperlambat laju bingkai sebesar 0,1%, itulah sebabnya sekarang ditetapkan pada 29,97 fps. Selain itu, di samping semua masalah teknis aneh yang terlibat dengan mengkonversi film dalam 24 fps untuk ditayangkan di televisi pada 29,97 fps, menunjukkan televisi pada fps yang lebih cepat memiliki efek menarik pada publik. Banyak orang yang menonton pemutaran tes "The Hobbit" pada 48 fps melaporkan bahwa peningkatan frame rate membuat film terlihat "lebih murah", meskipun kualitasnya jauh lebih tinggi daripada film biasa, hanya karena mereka telah tumbuh untuk mengasosiasikan frame rate yang lebih cepat. dengan menonton sesuatu di televisi.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.