Компонент animation-mixer

Компонент animation-mixer является ключевым инструментом для работы с анимациями 3D-моделей в формате glTF или GLB в библиотеке A-Frame. Он позволяет проигрывать, смешивать и управлять анимациями, заложенными в модели, используя стандартный механизм Three.js AnimationMixer. Компонент интегрирован в A-Frame как обертка, упрощающая управление анимациями через декларативный синтаксис HTML и JavaScript.

Подключение и синтаксис:

<a-entity gltf-model="#character"
          animation-mixer="clip: Idle; loop: repeat; timeScale: 1">
</a-entity>
  • clip — название анимации из модели. Если не задано, проигрываются все доступные клипы.
  • loop — тип повторения: repeat (циклическое повторение), once (один раз), pingpong (вперед-назад).
  • timeScale — скорость воспроизведения анимации (1 — стандартная, 2 — в два раза быстрее, 0.5 — медленнее).

Управление несколькими анимациями

Если модель содержит несколько анимаций, их можно перечислять через запятую или управлять программно. Например:

<a-entity gltf-model="#character"
          animation-mixer="clip: Walk, Run; loop: repeat; timeScale: 1">
</a-entity>

Каждый клип проигрывается по очереди или одновременно, в зависимости от заданных параметров. Для более тонкого контроля используется JavaScript API.

const entity = document.querySelector('#character');
const mixer = entity.components['animation-mixer'].mixer;
const clips = entity.getObject3D('mesh').animations;

// Запуск конкретного клипа
const walkClip = THREE.AnimationClip.findByName(clips, 'Walk');
const action = mixer.clipAction(walkClip);
action.play();

Ключевые методы JavaScript API:

  • clipAction(clip) — создает AnimationAction для указанного клипа.
  • play() — запускает действие.
  • stop() — останавливает действие.
  • setLoop(loopMode, repetitions) — задает режим повторения и количество циклов.
  • fadeIn(duration) и fadeOut(duration) — плавный переход между анимациями.

Использование событий

Компонент animation-mixer генерирует события, которые помогают синхронизировать анимацию с другими действиями сцены:

  • animation-finished — клип завершил воспроизведение.
  • loop-finished — завершен цикл повторения.
  • animation-changed — смена активного клипа.

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

entity.addEventListener('animation-finished', (e) => {
    console.log('Анимация завершена', e.detail);
});

Настройка плавности переходов

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

const runAction = mixer.clipAction('Run');
const idleAction = mixer.clipAction('Idle');

idleAction.play();
runAction.reset().fadeIn(0.5).play();
idleAction.fadeOut(0.5);

В этом примере анимация Idle плавно исчезает за 0.5 секунды, одновременно включая анимацию Run.

Управление скоростью и временем

timeScale регулирует скорость анимации, но можно также управлять текущим временем воспроизведения:

action.time = 1.5;  // Начало клипа с отметки 1.5 секунды
action.paused = true;  // Пауза воспроизведения
action.paused = false; // Возобновление

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

Оптимизация производительности

  • Загружать только необходимые анимации через параметр clip.
  • Использовать loop: once для одноразовых действий, чтобы освободить ресурсы.
  • Фейд переходы между анимациями минимизируют резкие скачки и делают воспроизведение более экономным по вычислениям.

Интеграция с другими компонентами

animation-mixer хорошо сочетается с компонентами A-Frame:

  • a-entity + animation-mixer + gltf-model для 3D-персонажей.
  • События пользовательского ввода (например, cursor или super-hands) для переключения анимаций при клике или касании.
  • Синхронизация с физикой (например, dynamic-body) для реалистичного поведения объекта.

Расширенные возможности

  • Смешивание нескольких клипов (crossFadeFrom и crossFadeTo) для плавных переходов между действиями.
  • Программное управление весом анимации через action.setEffectiveWeight(weight) для комбинирования нескольких действий одновременно.
  • Поддержка инверсной кинематики и скелетной анимации, встроенной в glTF, через стандартные методы Three.js.

Компонент animation-mixer позволяет создавать интерактивные 3D-сцены с персонажами, NPC и объектами, способными воспроизводить сложные последовательности анимаций, сохраняя при этом декларативный и управляемый код в A-Frame. Его гибкость делает его незаменимым инструментом для проектов виртуальной и дополненной реальности на веб-платформе.

Оглавление