0Pricing
jQuery Academy · Pelajaran

Easing Kustom dan Callback Animasi

Terapkan fungsi easing kustom untuk mengendalikan kecepatan dan alur animasi, serta gunakan callback untuk menjalankan kode secara tepat saat animasi selesai atau berpindah langkah.

Easing Kustom dan Callback Animasi adalah pelajaran jQuery Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar jQuery Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus jQuery Academy mencakup 3 pelajaran total.

Melampaui Kecepatan Animasi Dasar

Animasi bukan hanya tentang memindahkan elemen, tetapi juga tentang bagaimana elemen tersebut bergerak. Easing mengatur percepatan dan perlambatan animasi, sehingga animasi terlihat lebih alami atau dramatis.

jQuery menyediakan dua opsi easing bawaan: 'linear' (kecepatan konstan) dan 'swing' (awal lambat, bagian tengah cepat, akhir lambat). Namun, bagaimana jika Anda memerlukan lebih banyak opsi?

Menjelajahi Easing Bawaan

Mari kita lihat perbedaan antara opsi easing bawaan jQuery:

  • 'linear': Animasi bergerak dengan kecepatan konstan dari awal hingga selesai.
  • 'swing': Ini adalah opsi bawaan. Animasi dimulai dengan lambat, dipercepat di bagian tengah, lalu kembali melambat di akhir.

Keduanya sederhana, tetapi sering kali Anda menginginkan kontrol lebih besar atas nuansa animasi.

Easing Kustom dengan jQuery UI

Untuk mendapatkan efek easing yang lebih canggih, kita sering menggunakan plugin. Salah satu pilihan yang populer adalah komponen jQuery UI Easing.

Komponen ini memperluas objek $.easing milik jQuery dengan banyak fungsi baru seperti 'easeOutBounce', 'easeInOutQuad', dan lainnya. Dengan demikian, Anda mendapatkan pustaka kurva gerakan siap pakai yang kaya.

Untuk menggunakannya, biasanya Anda perlu menyertakan pustaka jQuery UI dalam proyek Anda.

Demo Kode: Pantulan dengan EaseOutBounce

Mari kita coba animasi dengan fungsi easing kustom dari jQuery UI. Perhatikan bagaimana kotak memantul di akhir, bukan sekadar berhenti secara mendadak. Efek ini dicapai menggunakan 'easeOutBounce'.

(Catatan: Contoh ini mengasumsikan inti dan efek jQuery UI telah disertakan.)

<!DOCTYPE html>
<html>
<head>
<title>Custom Easing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, 1500, 'easeOutBounce'); // Using a jQuery UI easing
      });
    });
  </script>
</body>
</html>

Memahami Callback Animasi

Animasi berjalan secara asinkron, artinya kode Anda terus berjalan saat animasi berlangsung. Bagaimana jika Anda perlu melakukan sesuatu setelah animasi selesai?

Metode .animate() milik jQuery menerima fungsi callback. Callback yang paling umum adalah complete.

  • Callback complete dijalankan setelah animasi pada elemen yang dipilih benar-benar selesai.
  • Callback ini sangat cocok untuk merangkai tindakan atau menampilkan pesan "selesai".

Demo Kode: Callback `complete`

Di sini, kita akan menganimasikan sebuah kotak, lalu mengubah warna latar belakangnya dan menampilkan pesan hanya setelah animasi selesai 100%.

Hal ini memastikan konsistensi visual dan waktu yang tepat untuk tindakan berikutnya.

<!DOCTYPE html>
<html>
<head>
<title>Complete Callback</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #008CBA;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>
  <p id="message"></p>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, 1000, function() { // This is the complete callback
          $(this).css("background-color", "#f44336");
          $("#message").text("Animation complete! Color changed.");
        });
      });
    });
  </script>
</body>
</html>

Callback `step`

Terkadang Anda perlu melakukan tindakan selama animasi berlangsung, bukan hanya di akhir. Di sinilah callback step digunakan.

Callback step dijalankan untuk setiap properti yang dianimasikan pada setiap langkah animasi. Callback ini dipanggil terus-menerus selama animasi berjalan.

Callback ini menerima argumen seperti now (nilai properti saat ini), fx (objek yang berisi detail animasi), dan tween (untuk kontrol yang lebih lanjut).

Demo Kode: Callback `step`

Mari gunakan callback step untuk menampilkan posisi saat ini dari kotak yang sedang dianimasikan ketika kotak tersebut bergerak.

Ini menunjukkan bagaimana Anda dapat memperoleh pembaruan waktu nyata dan merespons kemajuan animasi. Kita akan secara khusus menggunakan argumen now.

<!DOCTYPE html>
<html>
<head>
<title>Step Callback</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #FFC107;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>
  <p>Current Left Position: <span id="position">0px</span></p>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, {
          duration: 1500,
          step: function(now, fx) { // This is the step callback
            $("#position").text(now.toFixed(0) + "px");
          }
        });
      });
    });
  </script>
</body>
</html>

Menggunakan Beberapa Callback

Anda dapat menggunakan callback step dan complete dalam animasi yang sama.

Metode animate() menerima objek opsi sebagai argumen keduanya. Di sana, Anda dapat menentukan duration, easing, dan fungsi callback.

Hal ini memungkinkan kontrol yang presisi: melacak kemajuan selama animasi dan menjalankan tindakan akhir setelah animasi selesai.

Pemeriksaan Callback

Callback jQuery animate() mana yang paling sesuai untuk memperbarui bilah kemajuan secara terus-menerus saat animasi berjalan?

Ringkasan Easing & Callback

Bagus! Anda telah mempelajari cara menyempurnakan animasi jQuery:

  • Easing Kustom: Gunakan plugin seperti jQuery UI untuk menerapkan kurva kecepatan yang lebih dinamis, bukan hanya 'linear' atau 'swing'.
  • Callback complete: Jalankan kode tepat ketika animasi telah selesai.
  • Callback step: Dapatkan pembaruan waktu nyata dan lakukan tindakan berulang kali selama animasi berlangsung.

Alat-alat ini memberi Anda kontrol yang jauh lebih baik atas alur visual dan waktu interaksi elemen web Anda.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Easing Kustom dan Callback Animasi” gratis?

Ya — teks lengkap “Easing Kustom dan Callback Animasi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus jQuery Academy, upgrade ke CoddyKit PRO. Kursus jQuery Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Easing Kustom dan Callback Animasi”?

Terapkan fungsi easing kustom untuk mengendalikan kecepatan dan alur animasi, serta gunakan callback untuk menjalankan kode secara tepat saat animasi selesai atau berpindah langkah. Kamu berlatih jQuery Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai jQuery Academy?

Tidak diperlukan pengalaman sebelumnya. jQuery Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 3.

Berapa lama pelajaran “Easing Kustom dan Callback Animasi” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran jQuery Academy ini?

Ya. Setiap pelajaran jQuery Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Merangkai dan Mengantrikan Animasi
  2. Easing Kustom dan Callback Animasi
  3. Efek Toggle dan Slide Tingkat Lanjut
← Kembali ke jQuery Academy