Создание переиспользуемых анимаций

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

Создание конфигурационных объектов

Конфигурация анимации в anime.js задается объектом с параметрами, такими как targets, translateX, rotate, duration, easing и другими. Для переиспользования удобно хранить эти параметры в отдельной переменной:

const fadeInConfig = {
  opacity: [0, 1],
  duration: 1000,
  easing: 'easeOutQuad'
};

Теперь эту конфигурацию можно применять к любым элементам, изменяя только свойство targets:

anime({ ...fadeInConfig, targets: '.box1' });
anime({ ...fadeInConfig, targets: '.box2' });

Использование оператора spread (...) позволяет сохранять неизменность исходного объекта и адаптировать его под конкретные элементы.

Функции для создания анимаций

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

function createSlideAnimation(target, delay = 0, duration = 1000) {
  return anime({
    targets: target,
    translateX: [0, 250],
    opacity: [0, 1],
    delay: delay,
    duration: duration,
    easing: 'easeOutExpo'
  });
}

createSlideAnimation('.item1', 0, 800);
createSlideAnimation('.item2', 300, 1200);

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

Использование Timeline для комплексных анимаций

Anime.js предоставляет объект anime.timeline, который позволяет создавать цепочки анимаций, сохранять их логику и повторно использовать как единое действие:

const fadeInSlideTimeline = anime.timeline({
  easing: 'easeOutExpo',
  duration: 800
});

fadeInSlideTimeline
  .add({
    targets: '.card1',
    opacity: [0, 1],
    translateY: [-50, 0]
  })
  .add({
    targets: '.card2',
    opacity: [0, 1],
    translateY: [-50, 0]
  }, '-=400'); // перекрытие по времени

Использование timeline делает анимации более структурированными и позволяет легко изменять порядок и время воспроизведения элементов.

Параметры в виде функций

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

anime({
  targets: '.list-item',
  translateX: el => el.dataset.offset || 100,
  delay: (el, i) => i * 100,
  duration: 600,
  easing: 'easeInOutSine'
});

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

Комбинирование конфигураций

Для сложных анимаций полезно создавать несколько конфигураций и комбинировать их через функции или timeline:

const fadeConfig = { opacity: [0, 1], duration: 500 };
const moveConfig = { translateY: [-20, 0], easing: 'easeOutQuad' };

function animateElement(target) {
  return anime({
    targets: target,
    ...fadeConfig,
    ...moveConfig
  });
}

animateElement('.header');
animateElement('.footer');

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

Переиспользуемые анимации с обратной связью

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

function animateCard(target) {
  return anime({
    targets: target,
    scale: [0, 1],
    duration: 600,
    easing: 'spring(1, 80, 10, 0)',
    complete: () => {
      anime({
        targets: target,
        rotate: [0, 360],
        duration: 800,
        easing: 'easeInOutSine'
      });
    }
  });
}

animateCard('.card');

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

Практические советы

  • Хранить повторяющиеся конфигурации в отдельных объектах или функциях.
  • Использовать timeline для последовательных анимаций.
  • Применять функции для параметров, чтобы создавать динамические эффекты.
  • Сохранять неизменность объектов конфигурации через spread-оператор.
  • Для масштабируемости анимаций всегда учитывать возможность передачи параметров в функции.

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

Оглавление