0Pricing
jQuery Academy · Lekcja

Niestandardowe funkcje easing i callbacki animacji

Proszę implementować niestandardowe funkcje easing do sterowania szybkością i przebiegiem animacji oraz korzystać z callbacków, aby wykonywać kod dokładnie po zakończeniu lub wykonaniu kroku animacji.

Niestandardowe funkcje easing i callbacki animacji to bezpłatna lekcja jQuery Academy na CoddyKit. To lekcja 2 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej jQuery Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs jQuery Academy zawiera 3 lekcji w sumie.

Poza podstawową szybkość animacji

Animacje nie polegają tylko na przemieszczaniu elementów — ważny jest także sposób, w jaki się poruszają. Easing steruje przyspieszaniem i zwalnianiem animacji, dzięki czemu wygląda ona bardziej naturalnie lub efektownie.

jQuery udostępnia dwie wbudowane opcje easing: 'linear' (stała prędkość) i 'swing' (powolny początek, szybki środek i powolne zakończenie). Co jednak zrobić, gdy potrzebują Państwo większych możliwości?

Poznawanie domyślnych opcji easing

Przyjrzyjmy się różnicom między domyślnymi opcjami easing w jQuery:

  • 'linear': animacja porusza się ze stałą prędkością od początku do końca.
  • 'swing': jest to opcja domyślna. Animacja rozpoczyna się powoli, przyspiesza w połowie i ponownie zwalnia pod koniec.

Obie opcje są proste, ale często potrzebują Państwo większej kontroli nad charakterem animacji.

Niestandardowe easing z jQuery UI

Aby uzyskać bardziej zaawansowane efekty easing, często korzysta się z wtyczek. Popularnym wyborem jest komponent jQuery UI Easing.

Rozszerza on obiekt jQuery $.easing o wiele nowych funkcji, takich jak 'easeOutBounce', 'easeInOutQuad' i inne. Dzięki temu otrzymują Państwo bogatą bibliotekę predefiniowanych krzywych ruchu.

Aby z nich korzystać, zazwyczaj trzeba dołączyć bibliotekę jQuery UI do projektu.

Demonstracja kodu: odbicie z easeOutBounce

Wypróbujmy animację z niestandardową funkcją easing z jQuery UI. Proszę zwrócić uwagę, że pudełko odbija się pod koniec, zamiast nagle się zatrzymać. Ten efekt uzyskano za pomocą 'easeOutBounce'.

(Uwaga: ten przykład zakłada dołączenie podstawowej biblioteki jQuery UI oraz jej efektów).

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

Zrozumienie callbacków animacji

Animacje są asynchroniczne, co oznacza, że kod nadal się wykonuje, gdy animacja trwa. Co zrobić, jeśli trzeba wykonać jakieś działanie po zakończeniu animacji?

Metoda jQuery .animate() przyjmuje funkcję callback. Najczęściej używany jest callback complete.

  • Callback complete jest wywoływany, gdy animacja wybranych elementów zostanie w pełni zakończona.
  • Doskonale nadaje się do łańcuchowego wykonywania działań lub wyświetlania komunikatu „gotowe”.

Demonstracja kodu: callback `complete`

W tym przykładzie najpierw animujemy pudełko, a następnie zmieniamy jego kolor tła i wyświetlamy komunikat dopiero po całkowitym zakończeniu animacji.

Zapewnia to spójność wizualną i właściwe wyczucie czasu dla kolejnych działań.

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

Czasami trzeba wykonać działanie w trakcie animacji, a nie tylko na jej końcu. Właśnie do tego służy callback step.

Callback step jest wywoływany dla każdej animowanej właściwości przy każdym kroku animacji. Wywołuje się go nieprzerwanie podczas działania animacji.

Otrzymuje on argumenty takie jak now (bieżąca wartość właściwości), fx (obiekt zawierający szczegóły animacji) oraz tween (do bardziej zaawansowanej kontroli).

Demonstracja kodu: callback `step`

Użyjmy callbacku step, aby wyświetlać bieżące położenie animowanego pudełka podczas jego ruchu.

Pokazuje to, jak uzyskiwać aktualizacje w czasie rzeczywistym i reagować na postęp animacji. W szczególności użyjemy argumentu 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>

Korzystanie z wielu callbacków

W tej samej animacji można użyć zarówno callbacku step, jak i complete.

Metoda animate() przyjmuje jako drugi argument obiekt opcji, w którym można zdefiniować zarówno duration i easing, jak i funkcje callback.

Pozwala to precyzyjnie sterować animacją: śledzić jej postęp w trakcie oraz wykonać końcowe działanie po jej zakończeniu.

Sprawdzenie callbacków

Który callback jQuery animate() najlepiej nadaje się do ciągłego aktualizowania paska postępu podczas trwania animacji?

Easing i callbacki: podsumowanie

Świetna praca! Dowiedzieli się Państwo, jak wzbogacać animacje jQuery:

  • Niestandardowe easing: dzięki wtyczkom, takim jak jQuery UI, można stosować bardziej dynamiczne krzywe prędkości niż tylko 'linear' lub 'swing'.
  • Callback complete: wykonuje kod dokładnie po zakończeniu animacji.
  • Callback step: zapewnia aktualizacje w czasie rzeczywistym i pozwala wielokrotnie wykonywać działania podczas postępu animacji.

Narzędzia te zapewniają znacznie większą kontrolę nad wizualnym przebiegiem i interaktywnym wyczuciem czasu elementów stron internetowych.

Często zadawane pytania

Czy lekcja „Niestandardowe funkcje easing i callbacki animacji” jest bezpłatna?

Tak — pełny tekst „Niestandardowe funkcje easing i callbacki animacji” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu jQuery Academy, przejdź na CoddyKit PRO. Kurs jQuery Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Niestandardowe funkcje easing i callbacki animacji”?

Proszę implementować niestandardowe funkcje easing do sterowania szybkością i przebiegiem animacji oraz korzystać z callbacków, aby wykonywać kod dokładnie po zakończeniu lub wykonaniu kroku animacji. Ćwiczysz jQuery Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć jQuery Academy?

Nie wymagamy żadnego doświadczenia. jQuery Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 3.

Ile czasu zajmuje lekcja „Niestandardowe funkcje easing i callbacki animacji”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji jQuery Academy?

Tak. Każda lekcja jQuery Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Łączenie i kolejkowanie animacji
  2. Niestandardowe funkcje easing i callbacki animacji
  3. Zaawansowane efekty przełączania i wysuwania
← Powrót do jQuery Academy