Синтаксис и базовое использование

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

Подключение выполняется через ES-модули:

import { animate, spring, keyframes, decay, physics } from 'popmotion';

Каждый экспорт отвечает за отдельный тип движения. Архитектура не привязана к DOM и может использоваться в любых JS-окружениях.

Базовый принцип работы анимации

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

Основная функция animate является универсальным инструментом:

animate({
  from: 0,
  to: 100,
  duration: 1000,
  onUpdate: (latest) => {
    console.log(latest);
  }
});

Внутренняя модель работы построена на:

  • начальном значении (from)
  • целевом значении (to)
  • временном интервале
  • функции обновления состояния

Каждый тик анимации передаёт актуальное значение в onUpdate.

Базовая форма синтаксиса animate

Функция animate поддерживает расширенную конфигурацию:

animate({
  from: 0,
  to: 300,
  duration: 800,
  ease: (t) => t * t,
  onUpdate: (v) => {
    element.style.transform = `translateX(${v}px)`;
  },
  onComplete: () => {
    console.log('done');
  }
});

Ключевые параметры:

  • from — начальное значение
  • to — конечное значение
  • duration — длительность в миллисекундах
  • ease — функция сглаживания
  • onUpdate — обработка промежуточных значений
  • onComplete — завершение анимации

Tween-анимации (устаревший стиль)

Ранние версии Popmotion использовали tween, который описывал линейные или eased переходы.

import { tween } from 'popmotion';

tween({
  from: 0,
  to: 1,
  duration: 500
}).start(v => {
  console.log(v);
});

Характерной особенностью является цепочка .start(), запускающая поток значений.

Spring-анимации

Spring-модель основана на физике упругости. Движение задаётся параметрами жесткости и демпфирования.

spring({
  from: 0,
  to: 200,
  stiffness: 100,
  damping: 10
}).start(v => {
  console.log(v);
});

Физическая модель обеспечивает:

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

Синтаксис spring не требует явного времени, поскольку движение определяется параметрами системы.

Keyframes-анимации

Keyframes позволяют описывать последовательность состояний, аналогично CSS-анимациям.

keyframes({
  values: [0, 100, 50, 200],
  duration: 1200
}).start(v => {
  console.log(v);
});

Каждое значение интерполируется по времени, формируя ступенчатую траекторию движения.

Decay-анимация

Decay моделирует затухающее движение на основе начальной скорости.

decay({
  from: 0,
  velocity: 300,
  deceleration: 0.95
}).start(v => {
  console.log(v);
});

Поведение:

  • движение продолжается по инерции
  • скорость постепенно уменьшается
  • отсутствует фиксированная цель

Physics-модель

Physics позволяет комбинировать силы, создавая более сложные движения.

physics({
  from: { x: 0, y: 0 },
  velocity: { x: 100, y: -50 },
  friction: 0.8
}).start(v => {
  console.log(v);
});

Используется для симуляции:

  • движения объектов
  • траекторий
  • инерционных эффектов

Работа с DOM через styler

Для взаимодействия с DOM используется styler, который связывает числовые значения с CSS-свойствами.

import { styler, animate } from 'popmotion';

const box = document.querySelector('.box');
const boxStyler = styler(box);

animate({
  from: 0,
  to: 300,
  onUpdate: (v) => {
    boxStyler.set({
      x: v
    });
  }
});

Styler абстрагирует работу с transform и стилями, преобразуя числовые значения в корректные CSS-операции.

Функции преобразования значений

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

Основной механизм — композиция функций:

import { pipe, clamp } from 'popmotion';

const process = pipe(
  clamp(0, 100)
);

Такой подход позволяет строить цепочки преобразований:

  • ограничение диапазона
  • нормализация значений
  • преобразование шкал

Интерполяция и нормализация

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

const mapRange = (minA, maxA, minB, maxB) => (v) =>
  ((v - minA) / (maxA - minA)) * (maxB - minB) + minB;

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

Управление значениями через value

Ранее Popmotion предоставлял value как реактивный контейнер состояния.

import { value } from 'popmotion';

const x = value(0, (latest) => {
  console.log(latest);
});

x.update(50);

Объект value позволял:

  • хранить текущее состояние
  • подписываться на изменения
  • синхронизировать анимации

Управление потоком анимации

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

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

controls.stop();

Поддерживаются операции:

  • остановка выполнения
  • мгновенное завершение
  • переопределение параметров

Комбинирование анимационных примитивов

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

animate({
  from: 0,
  to: 1,
  onUpdate: (v) => {
    const springX = spring({
      from: v,
      to: 100
    });

    springX.start(console.log);
  }
});

Композиционный подход позволяет строить:

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

Особенности синтаксической модели

Синтаксис Popmotion характеризуется следующими принципами:

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

Каждая анимация является изолированной единицей поведения, не зависящей от внешнего состояния, если это явно не задано через коллбеки или стилизацию.

Оглавление