Interpolation и интерполяция

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

Линейная интерполяция (lerp)

Функция Point.interpolate() позволяет вычислить промежуточное значение между двумя точками:

var start = new Point(100, 100);
var end = new Point(300, 300);
var t = 0.5; // коэффициент интерполяции от 0 до 1

var middle = start.interpolate(end, t); // Point(200, 200)
  • t = 0 возвращает начальную точку.
  • t = 1 возвращает конечную точку.
  • Значения 0 < t < 1 создают промежуточные позиции.

Аналогично, метод Color.interpolate() работает с цветами, создавая плавные градиенты между двумя цветами:

var colorStart = new Color('red');
var colorEnd = new Color('blue');
var colorMid = colorStart.interpolate(colorEnd, 0.5); // фиолетовый

Интерполяция кривых

Кривые Безье

Объекты Path могут быть интерполированы по точкам кривой. Для кривой Безье с одинаковым количеством сегментов можно получить промежуточное состояние:

var path1 = new Path({
    segments: [[50, 50], [150, 50], [150, 150]],
    strokeColor: 'black'
});

var path2 = new Path({
    segments: [[50, 100], [150, 100], [150, 200]],
    strokeColor: 'black'
});

var t = 0.3;
var interpolatedPath = new Path();
for (var i = 0; i < path1.segments.length; i++) {
    interpolatedPath.add(path1.segments[i].point.interpolate(path2.segments[i].point, t));
}
interpolatedPath.strokeColor = 'green';
  • Каждая точка сегмента плавно смещается от исходной позиции к целевой.
  • Для сложных анимаций важно, чтобы количество сегментов совпадало.

Интерполяция кривых через Path.flatten()

Для кривых с разным числом сегментов можно использовать разбиение на равные интервалы:

var flat1 = path1.flatten(5); // разбивает кривую на отрезки
var flat2 = path2.flatten(5);

var t = 0.5;
var interpolated = new Path();
for (var i = 0; i < flat1.length; i++) {
    interpolated.add(flat1[i].point.interpolate(flat2[i].point, t));
}
interpolated.strokeColor = 'blue';

Метод flatten() преобразует кривую в последовательность равномерных отрезков, упрощая интерполяцию между кривыми с разной структурой.

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

Paper.js не предоставляет встроенной системы таймеров, но можно использовать обработчик view.onFrame для пошаговой интерполяции объектов:

var start = new Point(50, 50);
var end = new Point(350, 350);
var circle = new Path.Circle(start, 20);
circle.fillColor = 'red';
var t = 0;

view.onFr ame = function(event) {
    t += event.delta / 2; // скорость интерполяции
    if (t > 1) t = 1;
    circle.position = start.interpolate(end, t);
};
  • event.delta обеспечивает независимую от частоты кадров скорость.
  • Переменная t управляет прогрессом интерполяции от 0 до 1.
  • Можно комбинировать с кривыми Безье или цветовой интерполяцией.

Интерполяция свойств объектов

Методы Point.interpolate() и Color.interpolate() применяются к различным свойствам объектов:

  • position – перемещение объектов.
  • fillColor и strokeColor – плавная смена цвета.
  • scaling – масштабирование через промежуточные значения.
  • rotation – можно интерполировать углы с учётом корректного перехода через 360°.

Пример интерполяции масштаба и цвета одновременно:

var circle = new Path.Circle(new Point(200, 200), 50);
var startScale = 1;
var endScale = 2;
var startColor = new Color('yellow');
var endColor = new Color('orange');
var t = 0;

view.onFr ame = function(event) {
    t += 0.01;
    if (t > 1) t = 1;
    circle.scaling = startScale + (endScale - startScale) * t;
    circle.fillColor = startColor.interpolate(endColor, t);
};

Ключевые моменты

  • Интерполяция в Paper.js — это линейное смешивание значений (lerp) между начальным и конечным состоянием.
  • Методы Point.interpolate() и Color.interpolate() являются основными инструментами.
  • Для сложных кривых и Path с разным числом сегментов рекомендуется flatten().
  • Для анимации используется view.onFrame с прогрессом t, который растёт от 0 до 1.
  • Интерполяция может применяться к позициям, цветам, масштабам и углам вращения, обеспечивая комплексные плавные переходы.
Оглавление