0Pricing
jQuery Academy · Урок

Пользовательские функции плавности и обратные вызовы анимации

Реализуйте пользовательские функции плавности для управления скоростью и ходом анимации, а также используйте обратные вызовы для точного выполнения кода после завершения или шага анимации.

«Пользовательские функции плавности и обратные вызовы анимации» — бесплатный урок jQuery Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения jQuery Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс jQuery Academy содержит 3 уроков всего.

За пределами базовой скорости анимации

Анимации — это не только перемещение элементов, но и то, как именно они перемещаются. Сглаживание управляет ускорением и замедлением анимации, делая её более естественной или выразительной.

jQuery предоставляет два встроенных варианта сглаживания: 'linear' (постоянная скорость) и 'swing' (медленное начало, быстрое движение в середине и медленное завершение). Но что делать, если Вам нужно больше возможностей?

Изучаем сглаживание по умолчанию

Посмотрим на разницу между вариантами сглаживания jQuery по умолчанию:

  • 'linear': анимация движется с постоянной скоростью от начала до конца.
  • 'swing': используется по умолчанию. Анимация начинается медленно, ускоряется в середине и снова замедляется в конце.

Оба варианта просты, но часто требуется более точно управлять характером анимации.

Пользовательское сглаживание с jQuery UI

Чтобы получить более сложные эффекты сглаживания, часто используют плагины. Популярный вариант — компонент сглаживания jQuery UI.

Он расширяет объект jQuery $.easing множеством новых функций, например 'easeOutBounce', 'easeInOutQuad' и другими. Благодаря этому Вы получаете богатую библиотеку заранее определённых кривых движения.

Чтобы использовать их, обычно необходимо подключить библиотеку jQuery UI к проекту.

Демонстрация кода: отскок с EaseOutBounce

Попробуем анимацию с пользовательской функцией сглаживания из jQuery UI. Обратите внимание: в конце блок подпрыгивает, а не просто резко останавливается. Этот эффект создаётся с помощью 'easeOutBounce'.

(Примечание: предполагается, что ядро и эффекты jQuery UI уже подключены.)

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

Разбираемся с обратными вызовами анимации

Анимации выполняются асинхронно: Ваш код продолжает работать, пока они идут. Но что делать, если Вам нужно выполнить действие после завершения анимации?

Метод jQuery .animate() принимает функцию обратного вызова. Наиболее часто используется обратный вызов complete.

  • Обратный вызов complete срабатывает один раз, когда анимация выбранного элемента или элементов полностью завершена.
  • Он отлично подходит для последовательного запуска действий или отображения сообщения «готово».

Демонстрация кода: обратный вызов `complete`

Здесь мы анимируем блок, а затем изменяем цвет его фона и показываем сообщение только после полного завершения анимации.

Это обеспечивает визуальную согласованность и правильный момент выполнения последующих действий.

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

Иногда действие нужно выполнять во время анимации, а не только в конце. Здесь пригодится обратный вызов step.

Обратный вызов step срабатывает для каждого анимируемого свойства на каждом шаге анимации. Он вызывается непрерывно, пока анимация выполняется.

Он получает такие аргументы, как now (текущее значение свойства), fx (объект с подробностями анимации) и tween (для более сложного управления).

Демонстрация кода: обратный вызов `step`

Используем обратный вызов step, чтобы отображать текущее положение анимируемого блока во время его движения.

Так Вы сможете получать обновления в реальном времени и реагировать на ход анимации. В частности, мы используем аргумент 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>

Использование нескольких обратных вызовов

В одной анимации можно использовать обратные вызовы step и complete.

Метод animate() принимает объект параметров в качестве второго аргумента. В нём можно указать duration, easing и функции обратного вызова.

Это обеспечивает точный контроль: отслеживание хода анимации во время её выполнения и запуск завершающего действия после её окончания.

Проверка обратных вызовов

Какой обратный вызов jQuery animate() лучше всего подходит для непрерывного обновления индикатора выполнения во время анимации?

Сглаживание и обратные вызовы: итоги

Отличная работа! Вы узнали, как улучшать анимации jQuery:

  • Пользовательское сглаживание: используйте плагины, например jQuery UI, чтобы применять более динамичные кривые скорости, чем просто 'linear' или 'swing'.
  • Обратный вызов complete: выполняйте код точно после завершения анимации.
  • Обратный вызов step: получайте обновления в реальном времени и многократно выполняйте действия по мере продвижения анимации.

Эти инструменты обеспечивают гораздо более тонкий контроль над визуальным потоком и временем взаимодействия веб-элементов.

Часто задаваемые вопросы

Урок «Пользовательские функции плавности и обратные вызовы анимации» бесплатный?

Да — полный текст урока «Пользовательские функции плавности и обратные вызовы анимации» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс jQuery Academy, подпишись на CoddyKit PRO. Курс jQuery Academy содержит 3 уроков всего.

Чему я научусь в уроке «Пользовательские функции плавности и обратные вызовы анимации»?

Реализуйте пользовательские функции плавности для управления скоростью и ходом анимации, а также используйте обратные вызовы для точного выполнения кода после завершения или шага анимации. Ты практикуешь jQuery Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать jQuery Academy?

Предыдущий опыт не требуется. jQuery Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.

Сколько времени занимает урок «Пользовательские функции плавности и обратные вызовы анимации»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке jQuery Academy?

Да. Каждый урок jQuery Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Цепочки и очереди анимаций
  2. Пользовательские функции плавности и обратные вызовы анимации
  3. Расширенные эффекты переключения и скольжения
← Назад к jQuery Academy