Функции плавности: встроенные и кастомные

В библиотеке Phaser плавность анимации достигается за счёт интерполяции значений свойств объектов между кадрами и использования встроенных функций временной зависимости. Основными элементами, обеспечивающими плавность, являются твинны (tweens) и функции easing.

Tween — это механизм изменения свойств объекта (позиции, масштаба, прозрачности и других) за заданный промежуток времени. Основная идея — задать начальное и конечное значение, после чего Phaser будет автоматически вычислять промежуточные состояния на каждом кадре.

this.tweens.add({
    targets: player,
    x: 400,
    duration: 2000,
    ease: 'Power2',
    yoyo: true,
    repeat: -1
});

В примере выше объект player будет перемещаться по оси X к координате 400 за 2 секунды с функцией easing Power2. Опция yoyo: true заставляет объект возвращаться к исходной позиции, а repeat: -1 обеспечивает бесконечное повторение.

Встроенные функции easing

Phaser включает богатый набор встроенных функций easing, каждая из которых задаёт определённый профиль изменения свойств с течением времени. Среди наиболее используемых:

Linear — равномерное изменение без ускорений и замедлений.
Power1..Power4 — функции, задающие экспоненциальное ускорение или замедление.
Sine — плавные синусоидальные переходы.
Elastic — имитация упругого движения, создаёт эффект «отскока».
Bounce — имитация падения и подпрыгивания объекта.

Каждая функция имеет варианты In, Out и InOut, указывающие на характер ускорения в начале, в конце или в обеих частях движения.

ease: 'Bounce.Out'

Использование Bounce.Out создаёт эффект падения с подпрыгиванием в конце анимации, добавляя реалистичность движения.

Кастомные функции плавности

Помимо встроенных вариантов, Phaser позволяет создавать кастомные функции easing. Это полезно, когда требуется нестандартное поведение объекта. Кастомная функция получает параметр t — нормализованное время (от 0 до 1) — и возвращает значение интерполяции для текущего кадра.

this.tweens.add({
    targets: enemy,
    x: 600,
    duration: 1500,
    ease: function(t) {
        return t * t * (3 - 2 * t); // функция сглаживания типа smoothstep
    }
});

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

Параметры управления tween

Для тонкой настройки плавности анимации применяются дополнительные параметры:

delay — задержка перед началом tween, позволяет синхронизировать несколько анимаций.
duration — время выполнения tween.
yoyo — обратное выполнение tween после завершения.
repeat — количество повторов анимации.
onStart, onUpdate, onComplete — коллбэки для реагирования на события tween.

Эти параметры дают возможность создавать сложные цепочки анимаций, комбинировать несколько эффектов и точно контролировать поведение объектов.

Tween Chains и Sequence

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

this.tweens.timeline({
    targets: star,
    tweens: [
        { y: 300, duration: 500, ease: 'Power1' },
        { x: 500, duration: 800, ease: 'Elastic.Out' },
        { alpha: 0, duration: 400, ease: 'Linear' }
    ]
});

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

Использование easing для физики и пользовательского интерфейса

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

Примеры практического применения:

Плавное появление меню с альфа-переходом Linear.
Плавное ускорение персонажа с Power2.In.
Эффект подпрыгивания бонусного предмета с Bounce.Out.
Имитация отдачи оружия с кастомной функцией elastic-like.