Mass и velocity

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

Скорость определяет текущее движение объекта в момент старта анимации. Она влияет на то, насколько «энергично» система продолжит движение после изменения состояния. Масса задаёт сопротивление изменению этого движения: чем выше масса, тем сложнее системе изменить скорость и тем более инерционным становится переход.

В физической модели анимации используется упрощённая интерпретация второго закона Ньютона:

[ F = m a]

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

Скорость как начальное условие движения

Скорость в Motion One фиксирует начальный импульс анимации. Она особенно важна при продолжении движения после прерывания предыдущей анимации или при создании эффектов «докатывания».

В spring-модели скорость интерпретируется как производная изменения значения во времени на старте.

import { animate } from "motion";

animate(
  ".box",
  { x: 300 },
  {
    type: "spring",
    velocity: 1200
  }
);

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

Масса как фактор инерции

Масса определяет сопротивление системы ускорению. В контексте spring-анимации она влияет на:

  • скорость реакции на изменение цели
  • амплитуду колебаний
  • общее ощущение «тяжести» объекта

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

animate(
  ".box",
  { scale: 1.5 },
  {
    type: "spring",
    mass: 3,
    stiffness: 200,
    damping: 20
  }
);

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

Связь массы и скорости в spring-модели

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

При высокой скорости и большой массе система сохраняет импульс дольше, что приводит к:

  • увеличенному overshoot (переразгону)
  • более длинному затуханию
  • смещению пиков колебаний во времени

При низкой массе скорость быстрее «гасится», и движение быстрее стабилизируется.

animate(
  ".box",
  { x: 0 },
  {
    type: "spring",
    mass: 0.5,
    velocity: 2000,
    stiffness: 180,
    damping: 15
  }
);

Влияние stiffness и damping на систему с массой и скоростью

Хотя масса и скорость формируют динамику старта, итоговое поведение системы определяется также жесткостью и демпфированием.

  • stiffness задаёт силу возврата к целевому значению
  • damping контролирует потерю энергии системы

Взаимодействие параметров формирует разные режимы:

  • низкий damping + высокая velocity → колебательная система
  • высокий damping + высокая mass → инерционное, но плавное движение
  • высокая stiffness + низкая mass → резкий, почти линейный переход

Начальная скорость из предыдущей анимации

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

animate(
  ".box",
  { x: 500 },
  { type: "spring", velocity: 800 }
);

// прерывание и новая анимация с наследованием движения
animate(
  ".box",
  { x: 0 },
  {
    type: "spring",
    mass: 2,
    damping: 25
  }
);

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

Кинетическая инерция через inertia-анимации

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

import { inertia } from "motion";

inertia(".box", {
  velocity: 1500,
  power: 0.8,
  timeConstant: 300
});

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

Масштабирование поведения через нормализацию массы

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

const baseMass = 1;

animate(".small", {
  x: 200
}, {
  type: "spring",
  mass: baseMass * 0.5
});

animate(".large", {
  x: 200
}, {
  type: "spring",
  mass: baseMass * 2
});

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

Скорость как источник энергии системы

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

При одинаковой массе:

  • высокая скорость увеличивает амплитуду колебаний
  • низкая скорость приводит к прямолинейному переходу
  • нулевая скорость делает движение полностью зависимым от stiffness и damping
animate(
  ".box",
  { y: 400 },
  {
    type: "spring",
    velocity: 0,
    stiffness: 120,
    damping: 18
  }
);

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

В интерфейсах с множеством взаимодействующих объектов масса и скорость используются для создания иерархии поведения:

  • лёгкие элементы реагируют быстрее и «следуют» за движением
  • тяжёлые элементы задают основную инерционную структуру сцены
  • высокая начальная скорость применяется для эффектов импульса и взаимодействий
animate(".cursor-follow", {
  x: pointerX,
  y: pointerY
}, {
  type: "spring",
  mass: 0.3,
  stiffness: 300,
  damping: 30
});

animate(".background-layer", {
  x: pointerX * 0.2,
  y: pointerY * 0.2
}, {
  type: "spring",
  mass: 5,
  stiffness: 80,
  damping: 40
});

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

Оглавление