Условная анимация

В библиотеке anime.js анимация строится на основе объекта конфигурации, где задаются цель анимации, свойства, которые изменяются, продолжительность, задержка и функции смещения. Для реализации условной анимации важную роль играют функции обратного вызова, динамические значения и логические условия внутри конфигурации.

Динамическое определение свойств

Свойства анимации могут задаваться функциями. Это позволяет вычислять значения на основе состояния элемента или других условий:

anime({
  targets: '.box',
  translateX: function(el, i) {
    return i % 2 === 0 ? 100 : -100;
  },
  duration: 1000,
  easing: 'easeInOutQuad'
});

Разбор:

  • targets – список элементов, к которым применяется анимация.
  • translateX – функция возвращает разные значения для чётных и нечётных элементов.
  • Такой подход позволяет реализовать условное поведение на лету.

Использование функций обратного вызова

Anime.js предоставляет несколько функций обратного вызова, которые помогают контролировать анимацию в зависимости от условий: begin, update, complete.

anime({
  targets: '.circle',
  scale: 2,
  duration: 1500,
  easing: 'easeOutElastic(1, .8)',
  update: function(anim) {
    anim.animatables.forEach((item) => {
      if (item.target.offsetWidth > 100) {
        item.target.style.backgroundColor = 'red';
      }
    });
  }
});

Объяснение:

  • update вызывается на каждом кадре анимации.
  • Условие внутри цикла проверяет ширину элемента и меняет цвет, если она превышает 100px.
  • Это пример условного изменения стиля в процессе анимации.

Управление анимацией с помощью timeline

Для сложных последовательностей можно использовать анимационный таймлайн, где анимации могут выполняться условно:

let tl = anime.timeline({ autoplay: false });

tl.add({
  targets: '.box1',
  translateX: 200,
  duration: 1000
});

tl.add({
  targets: '.box2',
  translateY: 100,
  duration: 1000,
  begin: function(anim) {
    if (document.querySelector('.box1').offsetLeft > 150) {
      anim.pause();
    }
  }
});

tl.play();

Разбор:

  • Таймлайн позволяет объединять несколько анимаций в последовательность.
  • Использование begin с условием позволяет остановить или изменить поведение следующей анимации на основе состояния предыдущей.

Применение условной задержки (delay)

Параметр delay может быть функцией, что позволяет задавать разные задержки в зависимости от условий:

anime({
  targets: '.dot',
  translateY: 50,
  delay: function(el, i) {
    return i % 2 === 0 ? 0 : 500;
  },
  duration: 800,
  easing: 'easeOutCubic'
});

Пояснение:

  • Элементы с чётными индексами начинают анимацию сразу, нечётные – с задержкой 500 мс.
  • Такой подход широко используется для создания ступенчатых или волнообразных эффектов.

Условная анимация через свойства direction и loop

Свойство direction может зависеть от условий:

anime({
  targets: '.square',
  rotate: function(el) {
    return el.classList.contains('reverse') ? -360 : 360;
  },
  duration: 1200,
  easing: 'easeInOutSine',
  loop: 2
});

Объяснение:

  • Для элементов с классом reverse вращение выполняется в противоположную сторону.
  • loop повторяет анимацию заданное количество раз.
  • Комбинация direction и условий позволяет создавать динамические интерактивные эффекты.

Использование anime.stagger для условной последовательности

anime.stagger позволяет задавать задержки с учетом индекса и других параметров:

anime({
  targets: '.line',
  scaleX: [0, 1],
  delay: anime.stagger(200, { start: 0, grid: [3, 3], from: 'center' }),
  duration: 1000,
  easing: 'easeOutExpo'
});

Особенности:

  • grid и from позволяют определить порядок появления элементов.
  • Можно комбинировать с условиями внутри targets для создания сложной анимации по шаблону.

Вывод

Условная анимация в anime.js строится на основе:

  1. Функций для свойств – вычисляют значения динамически.
  2. Функций обратного вызова – управляют поведением во время анимации.
  3. Таймлайнов – позволяют комбинировать последовательности с условными остановками.
  4. Stagger и delay – обеспечивают условные задержки и порядок запуска.
  5. Свойств direction и loop – дают возможность изменять направление и повторение анимации в зависимости от состояния элементов.

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

Оглавление