Абсолютные значения

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

Задание абсолютных значений

Абсолютные значения задаются напрямую через объект targets и свойства анимации. Например, чтобы переместить элемент на точные координаты:

anime({
  targets: '.box',
  translateX: 250, // абсолютное значение по оси X в пикселях
  translateY: 100, // абсолютное значение по оси Y в пикселях
  duration: 2000,
  easing: 'easeInOutQuad'
});

Здесь translateX и translateY не зависят от исходной позиции элемента: после анимации его координаты будут точно равны 250px и 100px относительно родителя или точки отсчета.

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

  • Поддерживаются числовые значения с единицами (px, %, deg).
  • Если единица не указана, библиотека подразумевает пиксели.
  • Абсолютные значения работают для любых анимируемых свойств: позиции, масштаба, прозрачности, угла поворота.

Сравнение с относительными значениями

Относительные значения (+=50 или -=) изменяют текущую позицию элемента относительно исходного состояния, в то время как абсолютные значения фиксируют конечное положение. Например:

// Относительное изменение
anime({
  targets: '.box',
  translateX: '+=50', // сдвигает элемент на 50px от текущей позиции
  duration: 1000
});

// Абсолютное значение
anime({
  targets: '.box',
  translateX: 50, // перемещает элемент в точку X = 50px
  duration: 1000
});

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

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

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

anime({
  targets: '.circle',
  translateX: 300,
  translateY: 200,
  scale: 1.5,
  rotate: 180,
  opacity: 0.7,
  duration: 1500,
  easing: 'easeInOutSine'
});

В данном примере все свойства получают конкретные значения, к которым элемент приходит синхронно, независимо от начальных состояний.

Использование массивов для ключевых кадров

Абсолютные значения отлично сочетаются с ключевыми кадрами. Массив значений позволяет задать последовательность точных состояний:

anime({
  targets: '.square',
  translateX: [0, 100, 50, 200], // последовательные абсолютные значения
  rotate: [0, 90, 45, 180],
  duration: 4000,
  easing: 'linear'
});

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

Анимация SVG с абсолютными координатами

Для работы с SVG атрибутами cx, cy, r или stroke-dashoffset также применяются абсолютные значения:

anime({
  targets: 'circle',
  cx: 150, // абсолютная координата центра по оси X
  cy: 100, // абсолютная координата центра по оси Y
  r: 50,   // радиус круга
  duration: 1200,
  easing: 'easeOutExpo'
});

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

Важные рекомендации

  • Всегда указывать единицы измерения, если это не пиксели, чтобы избежать непредвиденных результатов.
  • При анимации нескольких элементов с разными начальными состояниями абсолютные значения упрощают синхронизацию.
  • Для сложных последовательностей лучше использовать массивы значений, чтобы явно задавать ключевые кадры.
  • Абсолютные значения хорошо комбинируются с функциями easing для создания плавных и контролируемых движений.

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

Оглавление