From-to синтаксис

Синтаксис from-to является одним из ключевых способов задания анимации в библиотеке anime.js. Он позволяет определить начальное и конечное состояние свойств анимируемого элемента, задавая плавный переход между ними. Такой подход часто используется для анимации позиций, размеров, прозрачности, поворотов и других CSS-свойств.

Формат записи

Базовый синтаксис выглядит следующим образом:

anime({
  targets: '.element',
  translateX: [0, 250],
  opacity: [0, 1],
  duration: 1000,
  easing: 'easeInOutQuad'
});
  • targets — один или несколько элементов, к которым применяется анимация. Может быть CSS-селектор, DOM-элемент или массив элементов.
  • translateX — свойство, задающее горизонтальное смещение элемента. Используется массив [начальное_значение, конечное_значение].
  • opacity — прозрачность, также задается массивом [начальное, конечное].
  • duration — длительность анимации в миллисекундах.
  • easing — функция плавности, определяющая характер перехода.

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

Анимация нескольких свойств одновременно

Можно задавать несколько свойств одновременно, каждое с собственным from-to:

anime({
  targets: '.box',
  translateX: [0, 300],
  translateY: [0, 150],
  scale: [1, 2],
  rotate: [0, 360],
  duration: 2000,
  easing: 'easeInOutSine'
});

В этом примере элемент .box одновременно перемещается по X и Y, увеличивается в размере и совершает полный оборот. Каждое свойство плавно переходит из начального состояния в конечное, создавая комплексную анимацию.

Использование с цветами

Синтаксис from-to поддерживает анимацию цветовых свойств:

anime({
  targets: '.text',
  color: ['#ff0000', '#0000ff'],
  backgroundColor: ['#ffffff', '#000000'],
  duration: 1500,
  easing: 'linear'
});

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

Анимация сложных CSS-свойств

Некоторые свойства CSS, такие как transform, strokeDashoffset или clip-path, также можно анимировать через from-to:

anime({
  targets: '.circle',
  strokeDashoffset: [anime.setDashoffset, 0],
  duration: 1200,
  easing: 'easeInOutQuart'
});

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

Отложенные и последовательные анимации

С помощью массива from-to можно создавать последовательные анимации, используя параметр delay:

anime({
  targets: '.item',
  translateY: [0, 50],
  opacity: [0, 1],
  duration: 800,
  delay: anime.stagger(200),
  easing: 'easeOutCubic'
});

Каждый элемент .item начинает анимацию с задержкой, что создает эффект каскадного появления. From-to синтаксис позволяет точно управлять стартовыми и конечными значениями каждого элемента, сохраняя предсказуемость анимации.

Варианты записи from-to

  1. Массив значений [from, to] — стандартный вариант.
  2. Объект с value и duration:
anime({
  targets: '.box',
  translateX: { value: [0, 200], duration: 1000, easing: 'easeInOutQuad' }
});

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

  1. Функции для динамических значений:
anime({
  targets: '.circle',
  translateX: el => [0, el.offsetWidth],
  duration: 1200,
  easing: 'easeInOutCubic'
});

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

Преимущества синтаксиса from-to

  • Контроль над стартовым состоянием — полезно, когда элементы могут иметь разные текущие стили.
  • Простота комплексных анимаций — одновременно изменяются несколько свойств.
  • Гибкость с динамическими значениями — функции позволяют вычислять начальные и конечные состояния в реальном времени.
  • Поддержка всех CSS-свойств — позиция, размер, цвет, прозрачность, трансформации, SVG-пути и многое другое.

Синтаксис from-to является фундаментальным инструментом для создания предсказуемых и мощных анимаций с anime.js, позволяя точно управлять визуальными переходами и комбинировать несколько эффектов в одном элементе.

Оглавление