Целевые значения

В Popmotion анимации строятся вокруг перехода состояния из текущего в заданное конечное состояние. Это конечное состояние определяется как целевое значение (target). Любая анимация — будь то tween, spring или keyframes — в основе своей решает задачу достижения указанной цели с различными законами интерполяции.

Целевое значение может представлять собой:

  • число
  • объект с несколькими свойствами
  • массив значений
  • структуру, включающую вложенные данные (при условии поддерживаемых трансформаций)

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

Базовая модель достижения цели

Анимационная система Popmotion опирается на концепцию:

  • начальное значение (initial state)
  • целевое значение (target)
  • функция интерполяции (easing / physics / keyframes)
  • обновляемое состояние на каждом кадре

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

Числовые целевые значения

Наиболее простой случай — переход числа к числу. В этом режиме система интерполирует одно скалярное значение.

import { animate } from "popmotion";

animate({
  from: 0,
  to: 300,
  duration: 1000
});

Внутри происходит линейная или заданная easing-интерполяция от from к to. При отсутствии from используется текущее состояние анимационного значения.

Числовые цели используются для:

  • координат
  • прозрачности
  • масштабов
  • углов вращения

Объектные целевые значения

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

animate({
  from: { x: 0, y: 0 },
  to: { x: 200, y: 100 },
  duration: 800
});

Каждое свойство рассматривается как отдельная ось интерполяции. При этом сохраняется синхронизация по времени.

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

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

Множественные целевые пространства

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

state(t) = (x(t), y(t), opacity(t), scale(t))

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

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

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

const controls = animate({
  from: 0,
  to: 100,
  onUpdate: v => console.log(v)
});

controls.to = 300;

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

Такой механизм используется в:

  • интерактивных интерфейсах
  • drag-and-drop системах
  • реактивных анимациях на события

Физические целевые значения

В spring-анимациях целевое значение трактуется как точка равновесия системы.

import { spring } from "popmotion";

spring({
  from: 0,
  to: 100
});

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

Формально поведение описывается уравнением движения:

F = -k(x - target) - c * v

Где:

  • target — целевое значение
  • k — жесткость пружины
  • c — демпфирование
  • v — скорость

Система может колебаться вокруг цели или плавно затухать в зависимости от параметров.

Цели в keyframes-анимации

Keyframes используют последовательность целевых значений вместо одного.

import { keyframes } from "popmotion";

keyframes({
  values: [0, 150, 80, 200],
  duration: 1200
});

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

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

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

Целевые значения и функции преобразования

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

animate({
  from: 0,
  to: v => v + 200
});

Такая форма используется для:

  • относительных смещений
  • реактивных пересчётов
  • динамических контекстов (например, размер окна)

Функциональная цель вычисляется в момент инициализации и при обновлении состояния.

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

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

animate({
  from: 100,
  to: "+200"
});

Интерпретация:

  • +200 означает добавление к текущему значению
  • -50 означает уменьшение

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

Целевые значения и управление состоянием

Цель в Popmotion тесно связана с объектом управления анимацией (controls). Он хранит:

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

Изменение цели не требует перезапуска анимации. Вместо этого происходит перенастройка интерполяции в реальном времени.

Сравнение типов целевых значений

Тип цели Поведение Применение
Число Простая интерполяция координаты, opacity
Объект Поэлементная интерполяция transform, layout
Массив Сегментированная анимация keyframes
Функция Вычисляемая цель реактивные значения
Относительная Смещение от текущего состояния цепочки анимаций

Приоритет вычисления целей

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

  1. явное значение to
  2. функция-цель
  3. относительное выражение
  4. значение по умолчанию (текущее состояние)

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

Переопределение целевого значения во времени

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

Каждое обновление цели:

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

Целевые значения в композиции анимаций

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

  • положением
  • масштабом
  • прозрачностью

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

Неопределённые и частичные цели

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

animate({
  from: { x: 0, y: 0, opacity: 1 },
  to: { x: 200 }
});

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

  • x изменяется
  • y и opacity остаются неизменными

Такой механизм используется для локальных изменений состояния без полного пересчёта объекта.

Оглавление