Анимация по событию: startEvents, pauseEvents, resumeEvents

A-Frame предоставляет гибкий механизм управления анимациями через события, что позволяет запускать, приостанавливать и возобновлять анимации в ответ на взаимодействия пользователя или программные триггеры. Для управления анимациями применяются атрибуты: startEvents, pauseEvents, resumeEvents.

  • startEvents – задаёт одно или несколько событий, при которых анимация начинается.
  • pauseEvents – задаёт события, при которых анимация приостанавливается.
  • resumeEvents – задаёт события для возобновления приостановленной анимации.

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

Атрибут startEvents

Атрибут startEvents определяет, какое событие запустит анимацию. Пример базового использования:

<a-box position="0 1 -5" color="red"
       animation="property: rotation; to: 0 360 0; dur: 2000; loop: true; startEvents: click">
</a-box>

В этом примере вращение куба начинается только после события click. Можно указать несколько событий, разделяя их пробелами:

<a-box animation="property: rotation; to: 0 360 0; dur: 2000; startEvents: click mouseenter">
</a-box>

Здесь вращение начнётся как при клике, так и при наведении курсора.

Атрибут pauseEvents

Для временной остановки анимации используется pauseEvents. Это полезно, когда требуется динамически управлять сценой. Пример:

<a-box animation="property: rotation; to: 0 360 0; dur: 5000; loop: true; startEvents: click; pauseEvents: mouseleave">
</a-box>

Анимация запускается по клику и приостанавливается, когда курсор покидает объект (mouseleave). Можно задать несколько событий через пробел:

pauseEvents: mouseleave touchend

В этом случае анимация будет приостанавливаться и при уходе курсора, и при завершении касания на сенсорных устройствах.

Атрибут resumeEvents

Атрибут resumeEvents позволяет возобновить ранее приостановленную анимацию. Он применяется совместно с pauseEvents:

<a-box animation="property: rotation; to: 0 360 0; dur: 5000; loop: true; startEvents: click; pauseEvents: mouseleave; resumeEvents: mouseenter">
</a-box>

Теперь анимация куба начнётся по клику, приостанавливается при уходе курсора и возобновляется при повторном наведении.

Комбинирование событий

A-Frame допускает комбинирование нескольких анимаций и событий для одного объекта:

<a-sphere position="0 1 -3" radius="1.25" color="#EF2D5E"
          animation="property: scale; to: 2 2 2; dur: 1000; startEvents: mouseenter; pauseEvents: mouseleave; resumeEvents: mouseenter"
          animation__rotation="property: rotation; to: 0 360 0; dur: 3000; loop: true; startEvents: click">
</a-sphere>

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

Особенности работы событий

  1. Несколько событий через пробел – позволяет одному атрибуту реагировать на разные типы взаимодействий.
  2. Приоритет событий – pauseEvents и resumeEvents применяются только к активной анимации. Если анимация не запущена, resumeEvents не вызовет её.
  3. Повторное срабатывание – события могут многократно запускать и останавливать анимацию, если задан атрибут loop.

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

Для более гибкого управления можно создавать пользовательские события через Jav * aScript:

const box = document.querySelector('a-box');

// Запуск анимации через событие
box.emit('customStart');

// Приостановка
box.emit('customPause');

// Возобновление
box.emit('customResume');

Соответственно, атрибуты в HTML будут выглядеть так:

<a-box animation="property: rotation; to: 0 360 0; dur: 3000; loop: true; startEvents: customStart; pauseEvents: customPause; resumeEvents: customResume"></a-box>

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

Взаимодействие с другими компонентами

Анимации через события легко комбинируются с другими компонентами A-Frame, такими как cursor, raycaster и кастомными системами. Например, можно запускать анимацию при пересечении луча курсора и останавливать её при выходе из зоны объекта.

<a-box position="0 1 -5" color="blue"
       animation="property: position; to: 0 2 -5; dur: 1000; startEvents: raycaster-intersected; pauseEvents: raycaster-intersected-cleared"></a-box>

Практические рекомендации

  • Использовать startEvents для запуска анимации по пользовательским действиям или программным триггерам.
  • Применять pauseEvents и resumeEvents для динамического контроля анимаций без их перезапуска.
  • Для сложных сцен рекомендуется комбинировать несколько анимаций с разными событиями, чтобы создать интерактивный и отзывчивый опыт.
  • Для программного управления событиями всегда использовать emit, чтобы не привязываться к стандартным DOM-событиям.

Эти механизмы делают анимации в A-Frame гибкими и легко интегрируемыми в интерактивные 3D-сцены, позволяя управлять поведением объектов на лету и создавать сложные сценарии взаимодействия.

Оглавление