0Pricing
jQuery Academy · Ders

Özel Yumuşatma ve Animasyon Geri Çağrıları

Animasyon hızını ve akışını denetlemek için özel yumuşatma işlevleri uygulayın; animasyonlar tamamlandığında veya her adımda ilerlediğinde kodu tam zamanında çalıştırmak için geri çağrılardan yararlanın.

Özel Yumuşatma ve Animasyon Geri Çağrıları, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 3 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, jQuery Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. jQuery Academy kursu toplamda 3 dersten oluşur.

Temel Animasyon Hızının Ötesi

Animasyonlar yalnızca öğeleri hareket ettirmekle ilgili değildir; nasıl hareket ettikleri de önemlidir. Yumuşatma, bir animasyonun hızlanma ve yavaşlama biçimini kontrol ederek daha doğal veya çarpıcı görünmesini sağlar.

jQuery, yerleşik iki yumuşatma seçeneği sunar: 'linear' (sabit hız) ve 'swing' (yavaş başlangıç, hızlı orta bölüm, yavaş bitiş). Peki daha fazlasına ihtiyacınız olursa?

Varsayılan Yumuşatmayı Keşfetme

jQuery'nin varsayılan yumuşatma seçenekleri arasındaki farkı görelim:

  • 'linear': Animasyon başlangıçtan bitişe kadar sabit hızla ilerler.
  • 'swing': Varsayılan seçenektir. Yavaş başlar, ortada hızlanır ve sonunda yeniden yavaşlar.

İkisi de basittir; ancak çoğu zaman animasyonun hissi üzerinde daha fazla kontrol sahibi olmak istersiniz.

jQuery UI ile Özel Yumuşatma

Daha gelişmiş yumuşatma efektleri elde etmek için genellikle eklentiler kullanırız. Popüler seçeneklerden biri jQuery UI Easing bileşenidir.

Bu bileşen, jQuery'nin $.easing nesnesini 'easeOutBounce', 'easeInOutQuad' ve daha birçok yeni işlevle genişletir. Böylece önceden tanımlanmış zengin bir hareket eğrileri kitaplığına sahip olursunuz.

Bunları kullanmak için genellikle jQuery UI kitaplığını projenize eklemeniz gerekir.

Kod Gösterimi: EaseOutBounce ile Sıçrama

jQuery UI'daki özel bir yumuşatma işleviyle animasyon deneyelim. Kutunun aniden durmak yerine sonunda nasıl sıçradığına dikkat edin. Bu efekt 'easeOutBounce' kullanılarak elde edilir.

(Not: Bu örnekte jQuery UI'nin çekirdek ve efekt bileşenlerinin eklenmiş olduğu varsayılır.)

<!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>

Animasyon Geri Çağrılarını Anlama

Animasyonlar eşzamansızdır; yani animasyonlar devam ederken kodunuz çalışmayı sürdürür. Peki bir animasyon tamamlandıktan sonra bir şey yapmanız gerekirse?

jQuery'nin .animate() yöntemi bir geri çağrı işlevi kabul eder. En yaygın olanı complete geri çağrısıdır.

  • complete geri çağrısı, seçili öğelerdeki animasyon tamamen bittiğinde bir kez çalışır.
  • İşlemleri birbirine zincirlemek veya "tamamlandı" mesajı göstermek için idealdir.

Kod Gösterimi: `complete` Geri Çağrısı

Burada bir kutuya animasyon uygulayacak, ardından arka plan rengini değiştirecek ve mesajı yalnızca animasyon %100 tamamlandıktan sonra göstereceğiz.

Bu, sonraki işlemler için görsel tutarlılığı ve doğru zamanlamayı sağlar.

<!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>

`step` Geri Çağrısı

Bazen yalnızca animasyonun sonunda değil, animasyon sırasında da bir işlem gerçekleştirmeniz gerekir. step geri çağrısı bu amaçla kullanılır.

step geri çağrısı, animasyonun her adımında animasyonu uygulanan her özellik için çalışır. Animasyon devam ettiği sürece sürekli olarak çağrılır.

now (özelliğin geçerli değeri), fx (animasyon ayrıntılarını içeren bir nesne) ve tween (daha gelişmiş kontrol için) gibi bağımsız değişkenler alır.

Kod Gösterimi: `step` Geri Çağrısı

Hareket ederken animasyon uygulanan kutumuzun geçerli konumunu görüntülemek için step geri çağrısını kullanalım.

Bu, gerçek zamanlı güncellemeleri nasıl alabileceğinizi ve animasyonun ilerlemesine nasıl tepki verebileceğinizi gösterir. Özellikle now bağımsız değişkenini kullanacağız.

<!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>

Birden Çok Geri Çağrı Kullanma

Aynı animasyonda hem step hem de complete geri çağrılarını kullanabilirsiniz.

animate() yöntemi, ikinci bağımsız değişken olarak seçenekler nesnesi kabul eder. Bu nesnede duration, easing ve geri çağrı işlevlerinin tümünü tanımlayabilirsiniz.

Bu, hassas bir kontrol sağlar: animasyon sırasında ilerlemeyi izleyebilir ve animasyon tamamlandıktan sonra son bir işlem gerçekleştirebilirsiniz.

Geri Çağrı Kontrolü

Bir animasyon çalışırken ilerleme çubuğunu sürekli güncellemek için hangi jQuery animate() geri çağrısı en uygundur?

Yumuşatma ve Geri Çağrılar: Özet

Harika iş çıkardınız! jQuery animasyonlarınızı nasıl geliştireceğinizi öğrendiniz:

  • Özel Yumuşatma: Yalnızca 'linear' veya 'swing' yerine daha dinamik hız eğrileri uygulamak için jQuery UI gibi eklentileri kullanın.
  • complete Geri Çağrısı: Kodu bir animasyon tamamlandığı anda çalıştırın.
  • step Geri Çağrısı: Gerçek zamanlı güncellemeler alın ve animasyonun ilerlemesi boyunca işlemleri tekrarlı olarak gerçekleştirin.

Bu araçlar, web öğelerinizin görsel akışı ve etkileşimli zamanlaması üzerinde çok daha hassas bir kontrol sağlar.

Sıkça Sorulan Sorular

“Özel Yumuşatma ve Animasyon Geri Çağrıları” dersi ücretsiz mi?

Evet — “Özel Yumuşatma ve Animasyon Geri Çağrıları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve jQuery Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. jQuery Academy kursu toplamda 3 dersten oluşur.

“Özel Yumuşatma ve Animasyon Geri Çağrıları” dersinde ne öğreneceğim?

Animasyon hızını ve akışını denetlemek için özel yumuşatma işlevleri uygulayın; animasyonlar tamamlandığında veya her adımda ilerlediğinde kodu tam zamanında çalıştırmak için geri çağrılardan yararla… jQuery Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

jQuery Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te jQuery Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 2. dersidir.

“Özel Yumuşatma ve Animasyon Geri Çağrıları” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu jQuery Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her jQuery Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Animasyonları Zincirleme ve Kuyruğa Alma
  2. Özel Yumuşatma ve Animasyon Geri Çağrıları
  3. Gelişmiş Açma-Kapama ve Kaydırma Efektleri
← jQuery Academy Sayfasına Dön