AR.js и A-Frame уроки: погружение в WebAR

Всё об атрибуте animation в AR.js

Обновлено 8 марта 2025 года

Свойства атрибута animation

Здравствуйте! Поскольку на официальном сайте и других ресурсах нет качественной документации, я решил создать её самостоятельно.

В этой статье я подробно описываю все свойства атрибута animation. Здесь вы найдёте всё необходимое.

  • autoplay

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

    1. Параметры

    Значение данного свойства является булевым, т.е. либо true, либо false. По умолчанию выбрано true.

    Поэтому, как Вы уже скорее всего поняли, если выбрано true, анимация начнется автоматически при загрузке. А если false, анимация не начнется автоматически, следовательно, запускаться будет вручную.

    2. Пример
                                                            
<a-entity 
    geometry="primitive: sphere" 
    material="color: green" 
    position="1 0 0" 
    animation="property: position; to: 4 0 0; dur: 3000; autoplay: true">
</a-entity>

    В данном примере зелёная сфера (material и geometry) за 3 секунды (dur) переедет (property) вправо (to). Благодаря параметру autoplay, анимация начнётся автоматически, как только элемент будет загружен и отображен на сцене.

  • delay

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

    1. Параметры

    Значение задается в миллисекундах. Например, если вы хотите, чтобы анимация началась через 2 секунды, укажите delay: 2000.

    2. Использование

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

    3. Пример
                                                            
<a-entity 
    geometry="primitive: box" 
    material="color: red" 
    position="0 1 -5" 
    animation="property: position; to: 0 1 -3; dur: 1000; delay: 2000;">
</a-entity>

    В данном примере красный куб (geometry и material) будет в течение 1 секунды (dur) переезжать (property) с заранее заданной позиции "0 1 -5" (position) на "0 1 -3" (to). И самое главное - движение начнется с задержкой в 2000 миллисекунд (2 секунды) после загрузки сцены.

  • direction

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

    1. Параметры

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

    • normal - анимация воспроизводится в прямом направлении, от начала до конца.

    • reverse - анимация воспроизводится в обратном направлении, от конца к началу.

    • alternate - анимация воспроизводится сначала в прямом направлении, затем в обратном, и так по кругу. Его преимущество - в замене создания двух анимаций.

    • alternate-reverse - анимация воспроизводится сначала в обратном направлении, затем в прямом, также по кругу.

    2. Пример
                                                            
    <a-entity 
        geometry="primitive: box" 
        material="color: blue" 
        animation="property: position; to: 0 -7 0; dur: 7000; direction: alternate">
    </a-entity>

    В данном примере синий куб (material и geometry) за 7 секунд (dur) будет падать вниз (property и to). Благодаря параметру direction со значением alternate, после падения куб вернётся назад, наверх.

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

  • dur

    dur определяет продолжительность анимации.

    1. Параметры

    Значение данного свойства является положительным целым числом, равное количеству миллисекунд. Например, dur: 1000 означает, что анимация будет длиться 1 секунду (1000 миллисекунд). А dur: 500 будет означать, что время анимации равно половине секунды.

    2. Пример
                                                            
<a-entity 
    geometry="primitive: sphere" 
    material="color: blue" 
    position="0.5 1 0" 
    animation="property: position; to: 0 -1 2.7; dur: 3000">
</a-entity>

    В данном примере синяя сфера (material и geometry) переедет (property) с заранее заданной позиции "0.5 1 0" (position) на новую "0 -1 2.7" (to). Перемещение займёт 3 секунды, как прописано в значении dur.

  • easing

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

    1. Параметры

    Значение данного свойства является строковым, равное определённому типу функции. Существует множество типов easing-функций, которые можно использовать. Представляю Вашему вниманию их полный список.

    • linear - анимация происходит с постоянной скоростью, без ускорения или замедления.

    • easeIn (ускорение) - создаёт эффект, когда объект начинает движение медленно, а затем ускоряется.

    • easeOut (замедление) - создаёт эффект, когда объект быстро движется, а затем замедляется перед остановкой.

    • easeInOut (или ease) - анимация медленно начинается, ускоряется в середине и снова замедляется к концу. Является комбинацией двух анимаций.

    • easeInSine - анимация использует синусоидальную функцию для создания эффекта плавного начала.

    • easeOutSine - синусоидальная функция, которая замедляет анимацию в конце.

    • easeInOutSine - комбинация easeInSine и easeOutSine, где анимация плавно начинается и заканчивается.

    • easeInQuad - квадратичная функция, которая ускоряет анимацию в начале.

    • easeOutQuad - квадратичная функция, которая замедляет анимацию в конце.

    • easeInOutQuad - комбинация easeInQuad и easeOutQuad.

    • easeInCubic - эта функция начинается медленно и ускоряется в течение анимации. Она описывается кубической кривой, что означает, что в начале анимации скорость изменения позиции объекта невелика, но по мере продвижения времени скорость увеличивается. Это создает эффект, когда объект "входит" в движение, постепенно наращивая скорость.

    • easeOutCubic - в отличие от easeInCubic, эта функция начинается быстро и замедляется к концу анимации. Объект быстро движется в начале, а затем постепенно замедляется, создавая эффект "выхода" из движения. Это часто используется для создания плавного завершения анимации.

    • easeInOutCubic - эта функция сочетает в себе элементы обеих предыдущих. Анимация начинается медленно (easeIn), затем ускоряется в середине, а в конце снова замедляется (easeOut). Это создает очень плавный и естественный переход, что делает его популярным выбором для многих анимационных эффектов.

    • easeInExpo - анимация начинается медленно и резко ускоряется в конце, используя экспоненциальную функцию.

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

    • easeInOutExpo - комбинация easeInExpo и easeOutExpo, где анимация плавно начинается и заканчивается с экспоненциальным эффектом.

    • easeInCirc - анимация начинается медленно и ускоряется, следуя круговой траектории.

    • easeOutCirc - анимация начинается быстро и замедляется, также следуя круговой траектории.

    • easeInOutCirc - комбинация easeInCirc и easeOutCirc.

    • easeInBack - анимация начинает движение назад перед тем, как ускориться вперед, создавая эффект "отскока".

    • easeOutBack - анимация начинает движение вперед, но замедляется в конце, создавая эффект "отскока" назад.

    • easeInOutBack - комбинация easeInBack и easeOutBack.

    • easeInElastic - анимация начинает медленно, затем "отскакивает" вперед, создавая эффект пружины.

    • easeOutElastic - анимация начинает быстро, затем "отскакивает" назад, создавая эффект упругости. Потому и функция так названа: elastic - упругий.

    • easeInOutElastic - комбинация easeInElastic и easeOutElastic.

    • easeInBounce - анимация начинается медленно и "отскакивает" в конце, создавая эффект отскока.

    • easeOutBounce - анимация начинается быстро и "отскакивает" в конце, создавая эффект отскока.

    • easeInOutBounce - комбинация easeInBounce и easeOutBounce, где анимация плавно начинается и заканчивается с эффектом отскока.

    • easeInQuart - четвертая степенная функция, которая ускоряет анимацию в начале.

    • easeOutQuart - четвертая степенная функция, которая замедляет анимацию в конце.

    • easeInOutQuart - комбинация easeInQuart и easeOutQuart.

    • easeInQuint - пятая степеннная функция, которая создает более выраженное ускорение в начале.

    • easeOutQuint - пятая степенная функция, которая создает более выраженное замедление в конце.

    • easeInOutQuint - комбинация easeInQuint и easeOutQuint.

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

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

    2. Пример
                                                            
<a-entity 
    geometry="primitive: sphere" 
    material="color: purple" 
    animation="property: position; from: -1 -1 0; to: 3 2.5 -1.5; dur: 5000; easing: easeInOut">
</a-entity>

    В данном примере фиолетовая сфера (material и geometry) переместится (property, from и to) за 5 секунд (dur). А значение свойства easing easeInOut делает анимацию более плавной: движение начинается медленно, ускоряется в середине и замедляется к концу.

    Выглядит лучше, чем просто перемещение, не правда ли?

    В общем, свойство easing в анимациях AR.js позволяет их разнообразить, обеспечивая более естественное движение объектов. Применение различных функций easing может помочь создать более привлекательные и интуитивно понятные интерфейсы для пользователей.

  • fade

    fade используется для создания эффекта плавного появления или исчезновения объекта. Оно позволяет управлять непрозрачностью (opacity) объекта, что делает анимацию более естественной. Вот основные моменты о свойстве fade...

    1. Параметры

    Свойство fade принимает булевые значения - true или false. Если установлено false, то эффект плавного появления или исчезновения объекта не будет применяться. Это означает, что объект будет мгновенно менять свою непрозрачность (opacity) на заданное значение, без каких-либо анимационных переходов.

    Например, если вы установите to: 0 и fade: false, объект просто исчезнет сразу, без плавного перехода. Аналогично, если вы установите to: 1, объект появится мгновенно.

    Таким образом, использование fade: false приводит к резким изменениям состояния объекта, без визуально привлекательного эффекта анимации.

    2. Использование

    Обычно fade используется вместе с другими параметрами анимации, такими как duration (длительность анимации) и easing (функция сглаживания), чтобы контролировать, как быстро или медленно объект будет появляться или исчезать.

    3. Пример
                                                            
<a-entity 
    geometry="primitive: box" 
    material="color: blue" 
    animation="property: opacity; to: 0; dur: 1000; startEvents: fade; fade: true">
</a-entity>

    В данном примере синий куб (geometry и material) будет исчезать (opacity изменится на 0) в течение 1 секунды, когда произойдёт событие fade. Если Вы хотите, чтобы объект появлялся, то можете установить to: 1 и использовать соответствующее событие для запуска анимации.

  • fill

    fill определяет, как будет отображаться анимация объекта после её завершения. Эти параметры можно использовать для указания состояния объекта по окончании анимации. Использование свойства fill позволяет контролировать, как объекты ведут себя после анимаций, что может значительно улучшить визуальные эффекты в ваших AR-проектах.

    1. Параметры

    • none - после завершения анимации объект вернется к своему изначальному состоянию (например, к непрозрачности, которая была до начала анимации), то есть изменения, внесённые анимацией, не сохранятся. Значение является стандартным.

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

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

    • both - комбинирует поведение forwards и backwards. Это полезно, когда анимация должна применяться как до её начала, так и после завершения.

    2. Пример
                                                            
<a-entity 
    geometry="primitive: box" 
    material="color: red" 
    animation="property: opacity; from: 0; to: 1; dur: 2000; fill: forwards">
</a-entity>

    В данном примере красный куб (geometry и material) будет сначала невидим (from), и в течение 2 секунд (dur) он будет постепенно становиться видимым (to). Ну и самое главное - после завершения анимации объект останется видимым (fill).

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

  • from

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

    1. Параметры

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

    • Для позиционирования: например, "0 0 0" (x, y, z)

    • Для цвета: строка в формате HEX, например, "#FF0000"

    • Для масштаба: например, "1 1 1"

    2. Пример
                                                            
<a-entity 
    geometry="primitive: sphere" 
    material="color: green" 
    animation="property: position; from: 0 -15 0; to: 0 0 0; dur: 6000">
</a-entity>

    В данном примере зелёная сфера (material и geometry) за 6 секунд вернётся откуда-то снизу в наше поле видимости (to). Всё потому, что мы задали начальную позицию благодаря свойству from. Вы также можете найти другое интересное применение from и to.

    Внимание! Вы можете указать одновременно from и атрибут position (не значение property). Например, 

                                                            
<a-entity
    geometry="primitive: box" 
    material="color: yellow" 
    position="0 1.5 0" 
    animation="property: position; from: 0 0 0; to: 5 0 0; dur: 2500">
</a-entity>

    Это примерный набросок. Чем полезен данный прототип?

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

    Но в основном, если речь о позиции, position логически не нужен, когда есть from.

  • loop

    loop позволяет задать, будет ли анимация повторяться после завершения.

    1. Параметры

    Значение данного свойства булевое, то есть либо true, либо false. Если значение равно true, анимация будет повторяться бесконечно. Если равно false, анимация выполнится один раз и остановится.

    2. Пример
                                                            
<a-entity 
    geometry="primitive: box"
    material="color: green"
    position="0 0 0"
    animation="property: position; to: 0 2 0; dur: 1000; dir: alternate; loop: true">
</a-entity>

<a-entity 
    geometry="primitive: sphere"
    material="color: red"
    position="2 0 0" 
    radius="1" 
    animation="property: position; to: 0 2 0; dur: 1000; dir: alternate; loop: true">
</a-entity>

    В данном примере зелёный куб и красный шар (geometry и material) будут подниматься и опускаться (property, to и dir) в течение 1 секунды (dur), а затем анимация будет повторяться бесконечно благодаря свойству loop: true. Это позволяет создать эффект непрерывного движения, что может быть полезно для привлечения внимания к объектам в Вашей AR-сцене.

  • on

    on используется для определения событий, которые будут инициировать анимацию. Это свойство позволяет привязать анимацию к конкретным событиям, таким как click, mouseenter, mouseleave и многие другие.

    1. Параметры

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

    2. Пример
                                                            
<a-entity 
    geometry="primitive: sphere"
    material="color: yellow"
    position="2 1 0" 
    radius="0.5"
    animation="property: position; to: 2 3 0; dur: 1000; on: click">
</a-entity>

    В данном примере жёлтая сфера (material и geometry) при клике на неё (on = click) будет взлетать на 2 единицы (property и to) за 1 секунду (dur).

  • once

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

    1. Параметры

    Значения данного свойства булевые, то есть либо true, либо false. Если значение равно true, анимация будет выполнена только один раз. Если равно false, анимация будет работать снова и снова.

    2. Использование

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

    3. Пример
                                                            
<a-entity 
    geometry="primitive: box"
    material="color: blue"
    animation="property: scale; to: 1.5 1.5 1.5; dur: 1000; once: true">
</a-entity>

    В данном примере синий куб (geometry и material) будет увеличиваться (property) в масштабе до 1,5 раз по всем осям (to) в течение 1 секунды (dur). И - самое главное - масштабирование куба не будет повторено (once = true).

  • onPause, onResume, onStart, onEnd

    onResumeиспользуется для указания действия, которое должно произойти, когда анимация возобновляется после приостановки. Это может быть полезно, если вы хотите выполнить определенные действия в момент, когда анимация возобновляется, например, изменить состояние объекта или запустить другую анимацию. onPause, onStart, onEnd являются аналогичными данному свойству: onPause - когда анимация приостановлена, onStart - когда она только запустилась (не путать с возобновлением), onEnd - когда завершилась.

    1. Параметры

    Любое из данных свойств принимает строковое значение, равное названию запланированной функции, записанной в нотации lowerCamelCase.

    2. Пример
                                                            
<a-entity geometry="primitive: box" material="color: purple" position="0 0.5 0" scale="4 4 4">
    <a-animation attribute="position" to="0 7.5 0" dur="7000" onResume="scaleDown"></a-animation>
    <a-animation id="scaleDown" attribute="scale" to="2 2 2" dur="500"></a-animation>
</a-entity>

    В данном примере фиолетовый куб (geometry и material) будет лететь вверх на 7 единиц (attribute и to) в течение 7 секунд (dur). Если полёт будет приостановлен и возобновлён, то куб уменьшится в 2 раза за полсекунды. Не мешайте кубу лететь!

    Для onPause, onStart, onEnd примеры будут такими же. Просто меняете onResume на нужное Вам.

    Кстати, если захотите, то сможете сделать всё, что угодно, с объектом. Например, поменять цвет модели или вывести сообщение пользователю. Правда, не во всех случаях получится обойтись без JavaScript. Например, та же смена цвета работает только в случае применения JS. Давайте рассмотрим пример с применением JS, но используя теперь не onResume, а onEnd.

    Чтобы воспользоваться JS в данном случае, например, поменять цвет модели по завершении анимации, мы прописываем в onEnd название функции, которая будет запускать нужное нам действие. И тогда в конце кода вставляем кусок JS. Так и сделаем! 

                                                            
<a-scene embedded arjs>
    <a-marker preset="hiro">
        <a-entity 
            id="myObject"
            geometry="primitive: sphere" 
            material="color: yellow" 
            animation="property: position; to: 0 9 0; dur: 6000; onEnd: changeColor">
        </a-entity>
    </a-marker>
    <a-entity camera></a-entity>
</a-scene>

<script>
    document.querySelector('#myObject').addEventListener('changeColor', function () {
        this.setAttribute('color', 'red');
    });
</script>

    Что получилось? Жёлтый шар после полёта становится красным. Причём моментально. В отличие от шести секундного перемещения. Связь изменения состояния и нашей модели происходит благодаря использованию id. Что делают остальные параметры, Вы можете найти в данной статье. Не буду повторять.

    Кстати, если понавешать обработчиков событий на модель (пауза, начало, остановка и пр.), то можно сделать более интересный контент. А это, как минимум, выгодно.

  • pauseEvents

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

    1. Параметры

    • true - анимация будет приостанавливать свое выполнение, когда происходит событие паузы (например, когда пользователю нужно временно остановить анимацию). После возобновления она продолжит воспроизводиться с места, на котором была приостановлена.

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

    2. Пример
                                                            
<a-entity 
    geometry="primitive: box"
    material="color: red"
    animation="property: rotation; to: 0 360 0; dur: 5000; pauseEvents: false">
</a-entity>

    В данном примере красный куб (geometry и material) будет вращаться (property: rotation) в течение 5 секунд (dur) вокруг оси Y все 360 градусов (to: 0 360 0), и, что самое главное, анимация не будет реагировать на события паузы (pauseEvents: false). То есть, даже если пользователь попытается приостановить анимацию (например, через интерфейс), анимация продолжит вращение объекта до завершения, игнорируя команду на паузу.

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

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

  • position

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

    1. Параметры

    Значение данного свойства является строковым, представляющее координаты объекта в формате "x y z", где x, y и z — это координаты в трёхмерном пространстве по соответствующим осям.

    2. Пример
                                                            
<a-entity 
    geometry="primitive: box" 
    material="color: black"
    position="2 0 0" 
    animation="property: position; to: -3 0 0; dur: 3000">
</a-entity>

    В данном примере чёрный куб (material и geometry) за 3 секунды (dur) переедет (property) от заданной изначальной позиции (position) влево (to).

  • property

    property указывает, какое свойство объекта будет анимироваться.

    1. Параметры

    Значение данного свойства является строковым, представляющее наименование анимируемой характеристики объекта. О них я уже писал выше и ниже. Вот некоторые из них: position, rotation, scale.

    2. Пример
                                                            
<a-entity 
    geometry="primitive: box" 
    material="color: red"
    animation="property: position; from: 2 0 0; to: -3 -6 -2; dur: 4000">
</a-entity>

    В данном примере красный куб (material и geometry) за 4 секунды (dur) сменит свою позицию (property, from и to).

  • repeat

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

    1. Параметры

    Свойство repeat принимает числовое значение. Если поставить 0, то анимация будет повторяться бесконечно. Например, это может быть полезно для создания эффекта пульсации.

    2. Пример
                                                            
<a-entity 
    geometry="primitive: box" 
    animation="property: position; to: 0 2 -5; dir: alternate; dur: 3000; easing: easeInOutQuad; repeat: 3">
</a-entity>

    В данном примере куб (geometry) будет в течение 3 секунд (dur) перемещаться (property) от центра (0 0 0) к позиции обозначенной свойством to и обратно (dir). Движение будет происходить по обозначенной кривой свойством easing. Описанное перемещение будет происходить 3 раза (repeat).

  • resumeEvents

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

    1. Параметры

    Свойство resumeEvents принимает булевое значение, т.е. либо false, либо true. Если установлено значение true, события возобновляются, когда анимация начинает воспроизводиться снова. Если установлено значение false, события не будут возобновляться.

    2. Пример
                                                            
<a-entity 
    geometry="primitive: sphere" 
    material="color: blue"
    animation="property: rotation; to: 0 360 0; dur: 4000; loop: true; resumeEvents: true">
</a-entity>

    В данном примере синяя сфера (geometry и material) будет в течение 4 секунд (dur) вращаться вокруг оси Y 360 градусов (property и to), и так без конца (loop). Что главное, так как resumeEvents = true, то сфера продолжит вращаться - даже после приостановки.

  • rotation

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

    1. Параметры

    Свойство rotation принимает строковое значение в формате 'x y z', чтобы можно было задать вращение объекта по любой из трех осей координат. Например, значение '0 360 0' означает, что объект будет вращаться 360 градусов вокруг оси Y.

    2. Пример
                                                            
<a-entity 
    geometry="primitive: sphere" 
    material="color: yellow" 
    animation="property: rotation; to: 0 360 0; dur: 9000; loop: true;">
</a-entity>

    В данном примере жёлтая сфера (geometry и material) будет в течение 9 секунд (dur) вращаться вокруг оси Y все 360 градусов (property и to), и так без конца (loop = true).

  • scale

    scale увеличивает или уменьшает объект.

    1. Параметры

    Свойство scale принимает строковое значение в формате 'x y z', чтобы можно было масштабировать по любой из трех осей координат. Например, значение scale: '2 2 2' увеличит объект в два раза по всем осям. А если прописать scale: '2 1 -0.5', то размер объекта увеличится в 2 раза по оси Х и уменьшится в полраза по оси Z.

    2. Использование

    Свойство scale позволяет анимировать размер объекта, что может быть полезно в различных сценариях, таких как:

    • Создание эффекта "приближения" или "удаления" при взаимодействии с объектом.

    • Подчеркивание важности объекта на сцене (например, увеличение при наведении курсора).

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

    3. Пример
                                                            
<a-entity 
    geometry="primitive: sphere" 
    material="color: blue" 
    animation="property: scale; to: 2 2 2; dur: 7000; dir: alternate; loop: true;">
</a-entity>

    В данном примере синяя сфера (geometry и material) будет в течение 7 секунд (dur) увеличиваться в 2 раза (property и to) и также уменьшаться (dir), и так по кругу без конца (loop).

  • start

    start определяет момент начала анимации.

    1. Параметры

    Значение данного свойства числовое, обозначающие количество секунд. Например, start: 2 начнёт анимацию через 2 секунды после запуска.

    2. Использование

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

    3. Пример
                                                            
<a-entity 
    geometry="primitive: box"
    material="color: green"
    animation="property: position; to: 0 2 -5; dir: alternate; dur: 4000; start: 2">                                             
</a-entity>

    В приведённом примере зелёный куб (geometry и material) в течение 4 секунд (dur) будет перемещаться (property) из центра в новую точку (to) и обратно (dir). И - что важно - анимация начнётся через 2 секунды после загрузки сцены (start: 2).

  • startEvents

    startEvents запускает анимацию при возникновении определённых событий.

    1. Параметры

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

    Если имеется несколько вариантов, то они перечисляются через запятую. Например, startEvents: click, contextmenu запустит анимацию при нажатии левой (click) или правой (contextmenu) кнопкой мыши на объект, а простое указание startEvents: mouseenter запустит анимацию всего лишь наведением мыши, что, кстати, будет аналогичным первому варианту.

    2. Пример
                                                            
<a-entity 
    geometry="primitive: box" 
    material="color: red" 
    animation="property: rotation; to: 0 360 0; dur: 2000; startEvents: mouseenter">                                             
</a-entity>

    В приведённом примере красный куб (geometry и material) в течение 2 секунд (dur) будет вращаться (property) 360 градусов вокруг оси Y (to), как только мы наведём мышью на него (startEvents).

  • stopEvents

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

    1. Параметры

    Значение данного свойства строковое, обозначающее действие пользователя. Если действий несколько, то они перечисляются через запятую.

    Например, stopEvents: click, contextmenu остановит анимацию при нажатии на объект левой (click) или правой (contextmenu) кнопкой мыши.

    2. Пример
                                                            
<a-entity 
    geometry="primitive: box"
    material="color: blue"
    animation="property: rotation; to: 0 360 0; dur: 20000; startEvents: mouseenter; stopEvents: mouseleave">>                                             
</a-entity>

    В приведённом примере синий куб (material и geometry) в течение 20 секунд (dur) начнёт вращаться (property) 360 градусов вокруг оси Y (to) при наведении мыши на данный обект (startEvents) и остановится при убирании мыши с него (stopEvents).

  • to

    to используют для указания результата анимации.

    1. Параметры

    Значение данного свойства строковое, зависящее от анимируемой характеристики объекта (position, rotation, material.color и т.п.). Т.е. каждая характеристика или свойство несут свою форму значения. Например,

    • для position — трехмерные координаты (например, 0 2 0),

    • для rotation — углы в градусах (например, 0 360 0),

    • для material.color — цвет в формате строки (например, red или #FF0000).

    Найти форму значения нужного свойства Вы можете в описаниях свойств, указанных выше.

    2. Пример
                                                            
<a-entity 
    geometry="primitive: box"
    material="color: purple"
    position="0 0 0"
    animation="property: position; to: 0 2 0; dur: 500;">                                             
</a-entity>

    В приведённом примере розовый куб (geometry и material) за полсекунды (dur) переместится (property) из центра координат (position) в заданную точку (to).

    Результатом анимации выступила новая позиция объекта.

Применение нескольких анимаций

К анимируемому объекту можно применить несколько анимаций. Давайте рассмотрим как.

Итак, применим 2 анимации, где вторая анимация начинается после завершения первой. Для этого используем атрибут animation с несколькими событиями. Одно из них - событие animationcomplete, чтобы как раз запустить вторую анимацию. И что хорошо - не надо использовать JavaScript, что удобно и просто.

Для начала создадим код, а после - я расскажу, что он делает. Итак - код: 

                                        
<a-entity 
    geometry="primitive: box" 
    material="color: red" 
    position="0 0 0" 
    animation="
        property: position; to: 0 2 0; dur: 1000; startEvents: click; stopEvents: animationcomplete; 
        animation__2: property: rotation; to: 360 0 0; dur: 4000; startEvents: animationcomplete">
</a-entity>

А теперь - вот что он делает:

  1. когда пользователь кликает (startEvents) на куб (geometry), он поднимается (property) на 2 единицы по оси Y (to) в течение 1 секунды (dur);

  2. после завершения этой анимации (stopEvents) начинается вторая анимация (startEvents), где куб начинает вращаться (property) и вращается он 360 градусов вокруг оси X (to) в течение 4 секунд (dur).

Как видите, для связки анимаций нужно использовать animationcomplete и каждую анимацию следует пронумеровывать (animation__2, animation__3 и т.д.).

Помощь

Система комментирования SigComments
Created by Ustinov Corporation