Массивы значений

Принцип работы массивов значений

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

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

Ключевой механизм — интерполяция промежуточных значений на основе прогресса t от 0 до 1, где каждый сегмент массива получает свою долю времени.

Keyframes как основа работы с массивами

Наиболее прямой способ работы с массивами значений реализован через keyframes. Этот тип анимации принимает набор значений и распределяет движение между ними.

import { animate } from "popmotion";

animate({
  from: 0,
  to: 100,
  duration: 2000
});

Базовый пример не использует массив, но при переходе к keyframes структура меняется:

import { keyframes } from "popmotion";

keyframes({
  values: [0, 300, 150, 600],
  duration: 4000
}).start(v => {
  console.log(v);
});

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

Если массив содержит n значений, количество интервалов равно n - 1.

Интерполяция числовых массивов

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

keyframes({
  values: [0, 100, 0],
  duration: 3000,
  ease: [easeOut, easeIn]
});

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

Поведение интерполяции:

  • первый элемент — стартовое состояние
  • последний элемент — конечное состояние
  • промежуточные элементы — контрольные точки
  • easing может применяться по сегментам или глобально

Поведение временной шкалы массива

Внутри Popmotion массив значений автоматически нормализуется по времени. Если указана длительность, она делится между сегментами равномерно, если не задано иное распределение.

keyframes({
  values: [0, 50, 200, 100],
  duration: 5000
});

В этом случае:

  • 0 → 50 занимает ~1.66s
  • 50 → 200 занимает ~1.66s
  • 200 → 100 занимает ~1.66s

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

Массивы значений в свойствах объектов

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

animate({
  from: { x: 0, y: 0 },
  to: { x: [0, 300, 150], y: [0, 100, 0] },
  duration: 3000
});

Здесь каждое свойство имеет собственную траекторию. Popmotion синхронизирует их по времени, создавая согласованное движение объекта.

Особенность подхода:

  • каждое свойство интерполируется независимо
  • синхронизация происходит на уровне общей временной шкалы
  • массив задаёт путь движения по осям

Цветовые массивы и интерполяция оттенков

Массивы значений особенно выразительны при работе с цветами. Popmotion поддерживает интерполяцию строковых значений цветов, включая hex, rgb и hsl.

keyframes({
  values: ["#ff0000", "#00ff00", "#0000ff"],
  duration: 4000
});

Цветовая интерполяция происходит в RGB-пространстве, что позволяет получать плавные переходы между оттенками.

Дополнительные возможности:

  • поддержка прозрачности
  • интерполяция rgba
  • работа с hsl для более естественных переходов
keyframes({
  values: [
    "rgba(255,0,0,1)",
    "rgba(255,255,0,0.5)",
    "rgba(0,0,255,1)"
  ],
  duration: 5000
});

Массивы как траектория движения

Одним из ключевых применений массивов является построение траектории движения объекта.

animate({
  from: 0,
  to: [0, 200, 100, 300],
  duration: 4000
});

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

Более сложный вариант — комбинирование координат:

animate({
  from: { x: 0, y: 0 },
  to: {
    x: [0, 300, 150, 400],
    y: [0, 100, 200, 50]
  },
  duration: 5000
});

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

Несколько массивов в одной анимации

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

animate({
  from: {
    scale: 1,
    rotate: 0,
    x: 0
  },
  to: {
    scale: [1, 1.5, 1],
    rotate: [0, 180, 360],
    x: [0, 200, 400]
  },
  duration: 3000
});

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

Динамические массивы значений

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

const points = [0, 100, 200, 150, 300];

keyframes({
  values: points,
  duration: 4000
});

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

Генерация массивов через функции

В более сложных сценариях массив значений может быть результатом вычислений.

const generateWave = (amplitude, steps) => {
  const result = [];
  for (let i = 0; i < steps; i++) {
    result.push(Math.sin(i * 0.5) * amplitude);
  }
  return result;
};

keyframes({
  values: generateWave(100, 10),
  duration: 5000
});

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

Сегментация поведения внутри массива

Каждый сегмент массива можно рассматривать как отдельную мини-анимацию. Это важно при построении сложных motion-последовательностей.

keyframes({
  values: [0, 100, 50, 200, 0],
  duration: 6000,
  ease: [easeOut, easeIn, easeOut, easeIn]
});

Каждый участок имеет:

  • собственную длительность
  • собственную кривую easing
  • независимую интерполяцию

Это превращает массив в структурированный сценарий движения.

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

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

const moveX = keyframes({
  values: [0, 300, 0],
  duration: 3000
});

const rotate = keyframes({
  values: [0, 180, 360],
  duration: 3000
});

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

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

В интерфейсных системах массивы значений используются для:

  • анимации переходов между состояниями UI
  • построения сложных hover-эффектов
  • создания кинетических переходов страниц
  • управления последовательными изменениями стилей

Пример для интерфейсного компонента:

animate({
  from: {
    opacity: 0,
    transform: "translateY(20px)"
  },
  to: {
    opacity: [0, 1, 0.8, 1],
    transform: [
      "translateY(20px)",
      "translateY(0px)",
      "translateY(-5px)",
      "translateY(0px)"
    ]
  },
  duration: 2500
});

Такой подход позволяет создавать эффект «живого» появления элемента с несколькими фазами поведения.

Ограничения и особенности интерполяции массивов

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

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

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

Структурная роль массивов в архитектуре анимации

Массивы значений в Popmotion выполняют роль декларативного описания траектории. Вместо процедурного описания каждого шага анимации задаётся только набор ключевых состояний.

Это позволяет:

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

Массив значений становится универсальной моделью описания движения, где каждое значение — это узловая точка поведения объекта во времени.

Оглавление