AnimationUtils: вспомогательные методы

Библиотека Three.js предоставляет мощный набор инструментов для работы с анимацией. Среди них важное место занимает класс AnimationUtils, который содержит вспомогательные методы для упрощения создания и управления анимациями. Эти утилиты не создают анимацию напрямую, но значительно облегчают манипуляции с ключевыми кадрами, интерполяцией и математическими вычислениями.

Генерация ключевых кадров

Метод AnimationUtils.generateKeyframeTracks позволяет создавать ключевые кадры для анимаций объектов, исходя из данных о позициях, вращениях и масштабах. Это особенно полезно при программной генерации анимаций без необходимости ручного описания каждого кадра.

Пример использования:

import { AnimationUtils, VectorKeyframeTrack } from 'three';

const times = [0, 1, 2];
const values = [0, 0, 0,  10, 10, 10,  20, 20, 20]; // координаты XYZ

const positionTrack = new VectorKeyframeTrack('.position', times, values);

Здесь VectorKeyframeTrack создается с использованием массивов времени (times) и значений (values), что является стандартной практикой при работе с ключевыми кадрами в Three.js.

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

Методы AnimationUtils предоставляют функции для интерполяции между значениями. Основные задачи включают:

  • Линейную интерполяцию для плавного перехода между ключевыми кадрами.
  • Кубическую и сплайновую интерполяцию для более естественного движения.

Пример линейной интерполяции двух значений:

import { AnimationUtils } from 'three';

const value1 = 0;
const value2 = 10;
const alpha = 0.5;

const interpolated = AnimationUtils.lerp(value1, value2, alpha); 
// interpolated = 5

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

Случайные значения и шум

AnimationUtils включает методы генерации случайных чисел и шумов для динамических эффектов:

  • AnimationUtils.randInt(min, max) — возвращает случайное целое число в диапазоне [min, max].
  • AnimationUtils.randFloat(min, max) — возвращает случайное число с плавающей точкой.
  • AnimationUtils.generateUUID() — создает уникальный идентификатор, полезный для анимационных объектов и отслеживания клипов.

Пример:

const randomPosition = AnimationUtils.randFloat(-5, 5);

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

Работа с углами и вращениями

При анимации объектов часто возникает необходимость корректного интерполирования углов. AnimationUtils содержит методы для приведения углов к диапазону [-π, π] и корректного вычисления разницы между ними.

import { AnimationUtils } from 'three';

const angle1 = Math.PI / 2;
const angle2 = -Math.PI / 2;

const delta = AnimationUtils.angleDifference(angle1, angle2); 
// delta = -π

Такое вычисление предотвращает резкие скачки при вращении объектов и обеспечивает плавную анимацию.

Нормализация времени

Для управления анимацией часто требуется преобразовать время анимации в нормализованный диапазон [0, 1]. Метод AnimationUtils.normalize облегчает этот процесс:

const currentTime = 1.5;
const startTime = 0;
const endTime = 3;

const normalized = AnimationUtils.normalize(currentTime, startTime, endTime); 
// normalized = 0.5

Нормализация позволяет легко применять интерполяцию и вычислять относительное положение объекта в анимационном цикле.

Утилиты для массивов и циклов

AnimationUtils содержит методы для работы с массивами и циклическими данными, что особенно полезно при создании повторяющихся анимаций:

  • AnimationUtils.arraySlice(array, from, to) — извлекает подмассив с корректной обработкой отрицательных индексов.
  • AnimationUtils.repeat(value, length) — возвращает значение, повторяющееся в пределах заданной длины (циклическое повторение).

Пример циклического движения объекта:

const loopedValue = AnimationUtils.repeat(7, 5); 
// loopedValue = 2

Преобразования и вспомогательные вычисления

Для создания сложных анимационных эффектов часто применяются дополнительные методы:

  • AnimationUtils.clamp(value, min, max) — ограничивает значение заданным диапазоном.
  • AnimationUtils.sign(value) — возвращает знак числа (-1, 0 или 1).
  • AnimationUtils.smoothstep(x, min, max) — плавное переходное значение для анимаций с эффектом ускорения и замедления.

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

Интеграция с AnimationClip

Хотя AnimationUtils не создаёт клипы напрямую, его методы активно применяются при работе с AnimationClip и KeyframeTrack:

import { AnimationClip, VectorKeyframeTrack, AnimationUtils } from 'three';

const times = [0, 1, 2];
const values = [0, 0, 0, 5, 5, 5, 10, 10, 10];
const track = new VectorKeyframeTrack('.position', times, values);

const clip = new AnimationClip('move', 2, [track]);

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

Практическое использование

  • Создание процедурных анимаций объектов.
  • Генерация плавных переходов для камер, света и материалов.
  • Разработка интерактивных эффектов с динамическими ключевыми кадрами.
  • Циклические анимации с корректным интерполированием углов и координат.

AnimationUtils служит основой для множества анимационных паттернов, упрощая математическую и программную работу с движением объектов в Three.js.

Оглавление