Условные переходы

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

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

Ключевая идея:

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

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

Предикаты как основа ветвления

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

Типичная структура:

  • значение положения
  • скорость изменения
  • состояние взаимодействия
  • флаг UI-состояния

Простейшая форма ветвления:

const isBeyondThreshold = v => v > 300;

На основе такого предиката выбирается дальнейшая анимационная стратегия.

Композиция conditional в Popmotion

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

  • предикат
  • функцию для истинного случая
  • функцию для ложного случая

Пример структуры:

conditional(
  v => v > 200,
  spring({ to: 500 }),
  tween({ from: 0, to: 100 })
)

Внутри такой конструкции происходит переключение между двумя анимационными движками: физически-ориентированным spring и интерполяционным tween.

Условные переходы на основе положения

Одним из распространённых сценариев является реакция на координаты элемента. При достижении порогового значения анимация меняет поведение.

Пример логики:

  • если элемент смещён менее чем на 150px — используется мягкое возвращение
  • если больше — применяется ускоренное затухание
const animation = conditional(
  x => x < 150,
  spring({ stiffness: 120, damping: 14 }),
  decay({ velocity: 10 })
);

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

Переключение между физическими моделями

Popmotion поддерживает несколько типов анимации:

  • tween (интерполяция)
  • spring (упругая модель)
  • decay (затухание)
  • keyframes (последовательность состояний)

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

Пример комбинированной логики:

const dynamicMotion = conditional(
  v => Math.abs(v.velocity) > 5,
  decay({ power: 0.8 }),
  spring({ stiffness: 200, damping: 20 })
);

Здесь скорость становится определяющим фактором выбора модели движения.

Встраивание условий в transform pipeline

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

pipe(
  conditional(
    v => v.progress > 0.5,
    spring({ to: 1 }),
    tween({ from: 0, to: 1 })
  )
);

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

Условные переходы в drag-интеракциях

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

  • скорости отпускания
  • позиции отпускания
  • направления движения

Пример поведения:

  • при слабом движении объект возвращается в исходную позицию
  • при сильном — «улетает» по инерции
const releaseMotion = conditional(
  v => Math.abs(v.velocity) < 3,
  spring({ to: 0 }),
  decay({ velocity: v => v.velocity })
);

Такая модель формирует естественную физику интерфейса.

Многослойные условия

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

Пример каскадного выбора:

conditional(
  v => v > 400,
  spring({ stiffness: 300 }),
  conditional(
    v => v > 200,
    tween({ duration: 300 }),
    decay({ power: 0.6 })
  )
);

Каждый уровень уточняет поведение, уменьшая неопределённость состояния.

Состояния интерфейса как источник условий

UI-состояния часто становятся триггерами для переходов:

  • hover
  • focus
  • active
  • expanded / collapsed

Условные переходы связывают эти состояния с физикой анимации.

const uiMotion = conditional(
  state => state === 'active',
  spring({ stiffness: 250 }),
  tween({ duration: 200 })
);

Таким образом поведение интерфейса становится контекстно-зависимым.

Переходы на основе временных факторов

Условие может зависеть не только от положения, но и от времени жизни анимации. Это позволяет менять стратегию движения в середине процесса.

conditional(
  v => v.time < 100,
  tween({ duration: 100 }),
  spring({ stiffness: 180 })
);

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

Интеграция с жестами

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

  • скорость пальца
  • направление свайпа
  • длительность касания

Пример логики:

conditional(
  v => v.speed > 2,
  decay({ power: 0.9 }),
  spring({ stiffness: 150 })
);

Жест становится параметром выбора анимационного поведения.

Оптимизация условных цепочек

При построении сложных систем важно учитывать стоимость вычисления предикатов. Условные функции выполняются на каждом кадре, поэтому:

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

Функциональная структура Popmotion позволяет избегать избыточных пересчётов при корректной организации pipeline.

Композиционная модель поведения

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

Оглавление