Вычисляемые значения на лету

Функциональные значения свойств

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

Velocity(element, {
  width: function (i, total) {
    return 100 + i * 20;
  },
  opacity: function () {
    return 0.5;
  }
});

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

  • индекс элемента в наборе
  • общее количество элементов
  • сам DOM-элемент (в некоторых версиях через this)

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

Индекс элемента и массовые анимации

При работе с коллекциями элементов вычисляемые значения особенно полезны для создания каскадных или градиентных эффектов. Значения формируются на основе позиции элемента внутри набора.

Velocity(elements, {
  translateY: function (i) {
    return i * 10;
  },
  delay: function (i) {
    return i * 50;
  }
});

Параметризация через индекс позволяет реализовать:

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

Каждое значение фиксируется на этапе старта анимации, после чего остаётся неизменным до завершения текущего tween.

Зависимость значений от состояния DOM в момент старта

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

Velocity(element, {
  width: function () {
    const currentWidth = element.offsetWidth;
    return currentWidth * 1.5;
  },
  height: function () {
    return element.offsetHeight + 50;
  }
});

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

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

Для более сложных сценариев применяется доступ к прогрессу анимации через callback progress. Он позволяет вычислять промежуточные значения в процессе выполнения tween.

Velocity(element, {
  translateX: [300, 0]
}, {
  progress: function (elements, complete, remaining, start, tweenValue) {
    const dynamicShift = complete * 50;
    elements[0].style.transform =
      `translateX(${tweenValue + dynamicShift}px)`;
  }
});

Входные параметры прогресса включают:

  • текущий процент завершения
  • оставшееся время
  • стартовые значения tween
  • текущие интерполированные значения

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

Динамические вычисления через шаги анимации

Внутренний цикл обновления Velocity позволяет модифицировать значения на каждом кадре через вычисления, зависящие от времени и easing-функции.

Velocity(element, {
  translateY: [0, 200]
}, {
  easing: function (t) {
    return Math.pow(t, 3);
  },
  step: function (now, tween) {
    const oscillation = Math.sin(now / 20);
    element.style.transform = `translateY(${now + oscillation * 10}px)`;
  }
});

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

Кастомные вычисляемые свойства

Velocity.js поддерживает анимацию нестандартных свойств через расширение набора tween-параметров. Это позволяет вычислять значения, не ограниченные CSS напрямую.

Velocity(element, {
  customProperty: [1000, 0]
}, {
  step: function (now, fx) {
    const normalized = now / 1000;
    const computedValue = normalized * 360;

    element.dataset.angle = computedValue;
  }
});

Подобная схема применяется для:

  • анимации атрибутов data-*
  • синхронизации с canvas-рендерингом
  • управления WebGL-сценами
  • построения сложных визуальных эффектов

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

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

Velocity(element, {
  translateX: function () {
    return 200;
  },
  translateY: function () {
    return 100;
  },
  opacity: function () {
    const base = element.offsetHeight;
    return Math.min(1, base / 300);
  }
});

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

Комбинирование вычислений с индексными моделями

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

Velocity(elements, {
  scale: function (i, total) {
    const factor = i / total;
    return 1 + factor * 0.5;
  },
  rotateZ: function (i) {
    return i * 15;
  }
});

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

Вычисления на основе временных моделей

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

Velocity(element, {
  translateX: function () {
    const time = Date.now() % 1000;
    return Math.sin(time / 100) * 50;
  }
});

Подобные вычисления создают непрерывно изменяющиеся параметры, которые выходят за рамки стандартного tween-поведения Velocity.js и формируют гибридные анимационные модели.

Оглавление