Математические операции в значениях

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

Простейшая анимация числа задается через объект targets и свойства value:

anime({
  targets: { x: 0 },
  x: 100,
  duration: 2000,
  easing: 'linear',
  update: function(anim) {
    console.log(anim.animatables[0].target.x);
  }
});

В этом примере объект { x: 0 } изменяет своё свойство x от 0 до 100 за 2 секунды. Важный момент — аниме.js автоматически вычисляет интерполяцию значений между начальным и конечным, используя выбранную функцию easing.

Использование относительных значений

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

Примеры относительных выражений:

  • '+=50' — увеличить текущее значение на 50
  • '-=30' — уменьшить текущее значение на 30
anime({
  targets: { x: 0 },
  x: '+=50',
  duration: 1000
});

В этом случае начальное значение x = 0 увеличится на 50. Относительные значения особенно полезны для создания последовательных или цикличных анимаций, где конечное положение зависит от текущего состояния объекта.

Арифметические выражения в свойствах

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

Примеры:

anime({
  targets: { x: 0 },
  x: function(el, i, t) {
    return i * 100 + 50;
  },
  duration: 1500
});
  • el — текущий элемент в массиве целей
  • i — индекс элемента
  • t — общее количество целей

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

anime({
  targets: '.box',
  translateX: function(el, i) {
    return 50 + i * 30;
  },
  duration: 2000
});

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

Применение функций для динамических изменений

Функции в качестве конечного значения открывают доступ к сложной математике:

anime({
  targets: { x: 0 },
  x: function() {
    return Math.sin(Date.now() / 500) * 100;
  },
  duration: 3000,
  loop: true
});

Использование Math.sin, Math.cos, Math.random и других встроенных функций позволяет создавать эффект пульсации, дрожания или случайных движений.

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

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

Можно анимировать одновременно несколько числовых свойств, используя массивы или объекты:

anime({
  targets: '.circle',
  translateX: [
    { value: 100, duration: 1000 },
    { value: 0, duration: 1000 }
  ],
  scale: [
    { value: 1.5, duration: 500 },
    { value: 1, duration: 500 }
  ],
  loop: true
});

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

Интерполяция и дробные значения

Anime.js корректно работает с дробными числами, автоматически поддерживая интерполяцию:

anime({
  targets: { opacity: 0 },
  opacity: 0.75,
  duration: 1200
});

Это особенно важно при работе с графикой и CSS-свойствами, такими как opacity, scale или rotate, где точность до десятых долей влияет на визуальный результат.

Заключение по математическим операциям

  • Простые числа — базовый способ анимации.
  • Относительные значения (+=, -=) позволяют строить динамику относительно текущего состояния.
  • Функции дают доступ к сложным математическим выражениям для уникальных эффектов.
  • Множественные свойства могут анимироваться параллельно с различными выражениями.
  • Дробные значения интерполируются плавно, обеспечивая визуальную точность.

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

Оглавление