Callback после завершения анимации

Bliss.js предоставляет удобные методы для работы с анимациями и событиями, позволяя управлять последовательностью действий после завершения визуальных эффектов. Одним из ключевых механизмов является использование callback-функций, которые выполняются после окончания анимации элемента. Это особенно важно при создании сложных интерфейсных взаимодействий, где порядок событий критичен.

Основы работы с анимацией

В Bliss.js анимация задается через метод animate(), который принимает два основных параметра: CSS-свойства для анимации и опции анимации. Опции включают длительность (duration), тип эффекта (easing) и callback (complete).

bliss.$('#box').animate(
  { opacity: 0, transform: 'translateX(100px)' },
  {
    duration: 500,
    easing: 'ease-in-out',
    complete: function() {
      console.log('Анимация завершена');
    }
  }
);

В этом примере элемент с id box постепенно исчезает и смещается вправо на 100 пикселей за 500 миллисекунд. После окончания анимации выполняется функция complete.

Ключевые моменты:

  • animate() возвращает элемент, что позволяет строить цепочки методов.
  • complete всегда вызывается после окончания всех анимационных эффектов, независимо от их количества.

Использование анонимных и именованных функций

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

function afterAnimation() {
  console.log('Элемент полностью анимирован');
  bliss.$('#box').addClass('done');
}

bliss.$('#box').animate(
  { opacity: 1, transform: 'translateX(0)' },
  { duration: 400, complete: afterAnimation }
);

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

Цепочки анимаций с несколькими callback

Bliss.js поддерживает последовательные анимации через вложенные callback. Каждая следующая анимация запускается только после завершения предыдущей.

bliss.$('#box').animate(
  { opacity: 0.5 },
  {
    duration: 300,
    complete: function() {
      bliss.$('#box').animate(
        { transform: 'scale(1.5)' },
        {
          duration: 300,
          complete: function() {
            bliss.$('#box').animate(
              { opacity: 1, transform: 'scale(1)' },
              { duration: 300 }
            );
          }
        }
      );
    }
  }
);

Такой подход позволяет управлять сложными визуальными эффектами без использования сторонних библиотек вроде jQuery или GSAP.

Асинхронные операции внутри callback

Callback-функции могут содержать асинхронный код. Bliss.js корректно работает с промисами и setTimeout, что позволяет интегрировать анимации с логикой задержек, загрузки данных или сетевыми запросами.

bliss.$('#box').animate(
  { opacity: 0 },
  {
    duration: 500,
    complete: async function() {
      await fetch('/api/data');
      bliss.$('#box').text('Данные загружены').animate({ opacity: 1 });
    }
  }
);

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

Контекст выполнения callback

Внутри функции complete ключевое слово this указывает на анимируемый элемент, а не на глобальный объект. Это позволяет напрямую изменять свойства или методы элемента.

bliss.$('#box').animate(
  { opacity: 0.5 },
  {
    duration: 400,
    complete: function() {
      this.classList.add('highlight');
    }
  }
);

Использование this делает код компактным и интуитивно понятным, особенно при работе с несколькими элементами через коллекции Bliss.js.

Советы по организации callback

  1. Минимизировать вложенность: при сложных цепочках лучше разбивать callback на отдельные функции.
  2. Проверка состояния элемента: перед выполнением действий внутри callback убедиться, что элемент существует и доступен в DOM.
  3. Объединение анимаций: если несколько эффектов должны происходить одновременно, их можно задавать в одном вызове animate() и использовать один complete.

Пример комплексного использования

function animateSequence(el) {
  el.animate(
    { opacity: 0.3, transform: 'translateY(50px)' },
    { duration: 300, complete: stepTwo }
  );

  function stepTwo() {
    el.animate(
      { opacity: 1, transform: 'translateY(0) scale(1.2)' },
      { duration: 300, complete: stepThree }
    );
  }

  function stepThree() {
    el.animate(
      { transform: 'scale(1)' },
      { duration: 200, complete: () => el.classList.add('finished') }
    );
  }
}

animateSequence(bliss.$('#box'));

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

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

Оглавление