Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Easing jQuery

jquery easing plugin

BAB 1: Pengertian

Plugin Easing jQuery digunakan untuk memanipulasi langkah animasi dalam jQuery yang biasanya didominasi oleh easing 'linear' dan 'swing'. Dengan menerapkan easing, maka langkah-langkah animasi dapat dimanipulasi sedemikian rupa sehingga menjadi jauh lebih hidup.

Sebagai gambaran awal, kamu bisa melihat contoh modelnya di sini:

Seperti yang telah kamu lihat, bahwa efek animasi pada contoh ke dua tampak jauh lebih hidup dibandingkan dengan contoh pertama. Pada contoh ke dua yang Saya buat, Saya memakai easing easeInBack untuk efek penutupannya dan easeOutBounce pada efek pembukaannya.

Pembagian langkah easing (untuk saat ini) dapat dibagi menjadi tiga, yaitu easeIn, easeOut dan easeInOut. Setelah itu akan diikuti dengan tipe easingnya.easeIn cenderung memulai animasi dari klimaksnya terlebih dahulu, berbeda dengan easeOut yang akan memunculkan klimaks animasi pada akhir waktu. easeInOut akan memunculkan klimaks animasi pada awal dan akhir waktu.

Terdapat 10 tipe percepatan dalam paket easing 1.3 yaitu Quad, Cubic, Quart, Quint, Sine, Expo, Circ, Elastic, Back dan Bounce. linear dan swing sebenarnya juga termasuk tipe easing, namun meski tanpa menambahkan plugin easing jQuery, efek easing linear dan swing tetap bisa dibuat karena kedua tipe easing tersebut merupakan bawaan dari jQuery. Jika semua tipe dan langkah easing digabungkan, maka akan menghasilkan 32 macam easing seperti ini:

  • linear
  • swing
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInSine
  • easeOutSine
  • easeInOutSine
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInCirc
  • easeOutCirc
  • easeInOutCirc
  • easeInElastic
  • easeOutElastic
  • easeInOutElastic
  • easeInBack
  • easeOutBack
  • easeInOutBack
  • easeInBounce
  • easeOutBounce
  • easeInOutBounce

Untuk memahami efeknya secara langsung, lihat demo-demo langkah easingnya di sini:

BAB 2: Dasar Penggunaan

Ada dua metode penerapan tipe easing dalam efek animasi. Secara umum dapat dituliskan dengan mudah di samping durasi animasi seperti ini:

Tanpa Easing Dengan Easing
.show(5000) .show(5000, "easeInBack")
.hide(5000) .hide(5000, "easeInBack")
.slideDown(5000) .slideDown(5000, "easeInBack")
.slideUp(5000) .slideUp(5000, "easeInBack")
.fadeIn(5000) .fadeIn(5000, "easeInBack")
.fadeOut(5000) .fadeOut(5000, "easeInBack")
.fadeTo(5000) .fadeTo(5000, "easeInBack")
.toggle(5000) .toggle(5000, "easeInBack")
.slideToggle(5000) .slideToggle(5000, "easeInBack")
.fadeToggle(5000) .fadeToggle(5000, "easeInBack")

Atau dengan penulisan yang sedikit lebih rumit seperti ini:

Tanpa Easing Dengan Easing
.slideUp(1000); .slideUp({duration: 1000, easing: "easeInBack"});
.animate({color: "#f10c0c"}, 1000); .animate({color: "#f10c0c"}, {duration: 1000, easing: "easeInBack"});

Pada efek .animate(), nama easing tidak bisa diterapkan secara langsung , jadi kamu harus menggunakan metode yang ke dua untuk menerapkan easing pada efek .animate().

Pembaharuan: 27 Februari 2012

Easing pada .animate() sudah bisa diterapkan menggunakan cara biasa:

$('#elemen').animate({height:"toggle"}, 1000, "easeInOutExpo");

Penerapan Secara Keseluruhan

Tambahkan plugin easing jQuery di dalam template, kemudian barulah deklarasi easing dapat bekerja:

<script src='... /jquery.js'></script>
<script src='... /jquery-easing-1.3.pack.js'></script>
<script>
$(document).ready(function() {
    $('#pemicu').click(function() {
        $('#target').slideToggle(1000, "easeInBack");
    });
});
</script>

Referensi

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 15 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!