Tweening: создание и использование

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

Основные принципы работы

Tweening в PlayCanvas основан на интерполяции, где значения свойств объекта постепенно изменяются от начального состояния к конечному. Для этого используется линейная или более сложная интерполяция, поддерживающая различные функции easing (ускорения) для достижения более естественного движения.

Для создания tween-анимции необходимо использовать класс pc.Tween. Этот класс позволяет легко создавать и контролировать анимации, которые могут изменять значения различных свойств объекта, таких как позиция, вращение, масштаб и другие.

Основы создания tween-анимиций

Для создания tween-анимции необходимо выполнить несколько шагов:

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

  2. Создание Tween: Для создания анимации используется метод pc.Entity.tween(), который позволяет анимировать любые свойства объекта. Важно указать начальные и конечные значения для каждой анимации.

  3. Настройка параметров: В PlayCanvas можно настроить такие параметры, как продолжительность анимации, тип easing, задержка перед началом анимации и другие.

Пример кода для анимации перемещения объекта по оси X:

var entity = this.entity;
entity.tween(entity.getLocalPosition())
    .to({x: 10}, 2, pc.EaseInOutQuad)
    .start();

Этот код создает анимацию, которая изменяет положение объекта по оси X с текущего значения до 10 за 2 секунды, используя функцию easing EaseInOutQuad для плавного начала и завершения движения.

Работа с временными функциями (Easing)

Одним из важнейших аспектов tween-анимаций является использование функций easing. Они определяют, как именно будет изменяться скорость анимации в процессе её выполнения. PlayCanvas поддерживает множество стандартных функций easing, среди которых:

  • pc.EaseLinear — линейное изменение, без ускорений.
  • pc.EaseInQuad — плавное ускорение в начале анимации.
  • pc.EaseOutQuad — плавное замедление в конце анимации.
  • pc.EaseInOutQuad — комбинация ускорения в начале и замедления в конце.
  • pc.EaseInElastic — эффект растягивания, создающий ощущение упругости.

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

Пример использования easing-функции:

entity.tween(entity.getLocalPosition())
    .to({x: 10}, 2, pc.EaseInOutQuad)
    .start();

Управление временными анимациями

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

  • Продолжительность (duration): Определяет, сколько времени будет длиться анимация. Этот параметр принимает значение в секундах.

  • Задержка (delay): Указывает, сколько времени нужно подождать до начала анимации. Например, если нужно создать паузу перед началом анимации, можно установить задержку:

    entity.tween(entity.getLocalPosition())
    .to({x: 10}, 2, pc.EaseInOutQuad, 1) // 1 секунда задержки
    .start();

  • Повторение (repeat): Для создания цикличных анимаций можно указать параметр повторения. С помощью repeat можно задать количество повторений анимации или использовать бесконечный цикл.

    entity.tween(entity.getLocalPosition())
    .to({x: 10}, 2, pc.EaseInOutQuad)
    .repeat(5) // Повторить анимацию 5 раз
    .start();

  • Завершение (onComplete): Для того чтобы выполнить действия после завершения анимации, можно использовать колбэк-функцию, переданную в параметр onComplete. Это позволяет запускать дополнительные анимации или события.

    entity.tween(entity.getLocalPosition())
    .to({x: 10}, 2, pc.EaseInOutQuad)
    .onComplete(function() {
        console.log('Анимация завершена!');
    })
    .start();

Анимация вращения и масштаба

Кроме изменения позиции объекта, PlayCanvas позволяет анимировать другие его свойства, такие как вращение и масштаб. Пример анимации вращения:

entity.tween(entity.getLocalRotation())
    .to({x: Math.PI, y: Math.PI}, 2, pc.EaseInOutQuad)
    .start();

Здесь анимация изменяет углы поворота объекта по осям X и Y до значения Math.PI (180 градусов) за 2 секунды.

Для анимации масштаба можно использовать аналогичный подход:

entity.tween(entity.getLocalScale())
    .to({x: 2, y: 2, z: 2}, 2, pc.EaseInOutQuad)
    .start();

Прерывание и отмена анимации

В некоторых случаях необходимо прервать текущую анимацию и применить новые значения. Для этого в PlayCanvas предусмотрены методы для остановки анимаций. Метод stop() прерывает выполнение анимации, и объект сразу же возвращается к начальным значениям.

var tween = entity.tween(entity.getLocalPosition())
    .to({x: 10}, 2, pc.EaseInOutQuad)
    .start();

tween.stop();

Кроме того, можно отменить анимацию и создать новую с другими параметрами.

Группировка анимаций

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

var tween1 = entity1.tween(entity1.getLocalPosition())
    .to({x: 10}, 2, pc.EaseInOutQuad);

var tween2 = entity2.tween(entity2.getLocalRotation())
    .to({y: Math.PI}, 2, pc.EaseInOutQuad);

tween1.start();
tween2.start();

Поддержка пользовательских функций easing

Кроме стандартных функций easing, PlayCanvas позволяет создавать и использовать пользовательские функции для изменения интерполяции. Для этого достаточно передать функцию, которая будет описывать логику изменения значений.

Пример:

var customEasing = function(t) {
    return Math.pow(t, 3);
};

entity.tween(entity.getLocalPosition())
    .to({x: 10}, 2, customEasing)
    .start();

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

Заключение

Tweening в PlayCanvas представляет собой мощный инструмент для создания плавных и динамичных анимаций. С помощью tween-анимиций можно легко управлять движением, вращением, масштабом и другими свойствами объектов, применяя различные типы easing и контролируя время выполнения анимаций. Эти возможности позволяют создавать качественные визуальные эффекты, улучшая взаимодействие пользователя с 3D-сценами.

Оглавление