BAB 1: Pengertian
Plugin Easing jQuery dipakai untuk memanipulasi langkah animasi dalam jQuery yang biasanya didominasi oleh easing 'linear' dan 'swing'. Dengan menerapkan easing, maka langkah-langkah animasi sanggup dimanipulasi sedemikian rupa sehingga menjadi jauh lebih hidup.
Sebagai citra awal, kau sanggup melihat rujukan modelnya di sini:
Seperti yang telah kau lihat, bahwa imbas animasi pada rujukan ke dua tampak jauh lebih hidup dibandingkan dengan rujukan pertama. Pada rujukan ke dua yang Saya buat, Saya menggunakan easing easeInBack untuk imbas penutupannya dan easeOutBounce pada imbas pembukaannya.
Pembagian langkah easing (untuk ketika ini) sanggup dibagi menjadi tiga, adalah 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 titik puncak animasi pada final waktu. easeInOut akan memunculkan titik puncak animasi pada awal dan final waktu.
Terdapat 10 tipe percepatan dalam paket easing 1.3 adalah Quad, Cubic, Quart, Quint, Sine, Expo, Circ, Elastic, Back dan Bounce. linear dan swing bekerjsama juga termasuk tipe easing, namun meski tanpa menambahkan plugin easing jQuery, imbas easing linear dan swing tetap sanggup dibentuk sebab kedua tipe easing tersebut merupakan bawaan dari jQuery. Jika semua tipe dan langkah easing digabungkan, maka akan menghasilkan 32 macam easing menyerupai 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 imbas animasi. Secara umum sanggup dituliskan dengan gampang di samping durasi animasi menyerupai 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 menyerupai ini:
| Tanpa Easing | Dengan Easing |
|---|---|
| .slideUp(1000); | .slideUp({duration: 1000, easing: "easeInBack"}); |
| .animate({color: "#f10c0c"}, 1000); | .animate({color: "#f10c0c"}, {duration: 1000, easing: "easeInBack"}); |
Pada imbas .animate(), nama easing tidak sanggup diterapkan secara eksklusif , jadi kau harus menggunakan metode yang ke dua untuk menerapkan easing pada imbas .animate().
Pembaharuan: 27 Februari 2012
Easing pada .animate() sudah sanggup diterapkan menggunakan cara biasa:
$('#elemen').animate({height:"toggle"}, 1000, "easeInOutExpo");Penerapan Secara Keseluruhan
Tambahkan plugin easing jQuery di dalam template, lalu barulah deklarasi easing sanggup 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>