Относительные значения

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

Синтаксис относительных значений

Относительные значения задаются с помощью строк с математическими операторами:

anime({
  targets: '.box',
  translateX: '+=250px',  // увеличение значения на 250px относительно текущего
  translateY: '-=100px',  // уменьшение значения на 100px
  duration: 1000
});
  • +=value — добавление к текущему значению
  • -=value — вычитание из текущего значения
  • *= и /= — умножение или деление текущего значения (редко используется, но поддерживается)

Такие выражения работают со всеми числовыми свойствами, которые поддерживаются в CSS и JavaScript, включая translateX, translateY, scale, rotate, opacity и т.д.

Применение относительных значений к transform-свойствам

translate, scale, rotate и другие transform-свойства отлично подходят для относительных изменений:

anime({
  targets: '.circle',
  translateX: '+=100px',
  translateY: '+=50px',
  scale: '+=0.5',
  rotate: '+=45deg',
  duration: 1500,
  easing: 'easeInOutQuad'
});

Здесь элемент с классом .circle сдвинется на 100px по X, 50px по Y, увеличится в 1.5 раза и повернется на 45 градусов относительно текущего состояния.

Относительные значения в ключевых кадрах (keyframes)

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

anime({
  targets: '.square',
  keyframes: [
    { translateX: '+=50px', rotate: '+=15deg' },
    { translateX: '+=50px', rotate: '+=15deg' },
    { translateX: '+=50px', rotate: '+=15deg' }
  ],
  duration: 1200,
  easing: 'easeInOutSine'
});

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

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

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

anime({
  targets: '.dot',
  translateX: el => '+=' + (10 * el.dataset.index) + 'px',
  translateY: el => '-=' + (5 * el.dataset.index) + 'px',
  duration: 800,
  easing: 'easeOutCubic'
});

Функции возвращают строку с относительным значением ('+=' или '-='), позволяя строить динамические и кастомные эффекты для нескольких элементов одновременно.

Совмещение относительных и абсолютных значений

В одной анимации можно комбинировать относительные и абсолютные значения:

anime({
  targets: '.line',
  translateX: '+=50px',
  translateY: 200,       // абсолютное значение
  scale: '+=0.3',
  duration: 1000
});

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

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

  • Всегда указывать единицы измерения (px, deg, %) при использовании относительных значений для transform-свойств.
  • Для свойств типа opacity относительные значения можно задавать без единиц (+=0.2).
  • При цепочке анимаций timeline относительные значения позволяют строить эффекты без постоянного пересчета начальных координат.
  • Относительные значения хорошо работают с loop и direction: 'alternate', создавая плавные циклические движения.

Пример комплексной анимации с timeline

const tl = anime.timeline({
  easing: 'easeInOutQuad',
  duration: 500
});

tl.add({
  targets: '.ball',
  translateX: '+=100px',
  scale: '+=0.2'
})
.add({
  targets: '.ball',
  translateY: '+=50px',
  rotate: '+=30deg'
})
.add({
  targets: '.ball',
  translateX: '-=50px',
  scale: '-=0.2'
});

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

Оглавление