aframe
Анимация
Поиск…
Вступление
Анимация и переходы в A-Frame определяются с помощью элемента <a-animation> в качестве дочернего элемента. Система примерно основана на спецификации Web Animations. A-Frame использует tween.js внутри.
замечания
Атрибуты
Ниже приведен обзор атрибутов анимации. Ниже мы рассмотрим более подробно.
| атрибут | Описание | Значение по умолчанию |
|---|---|---|
| атрибут | Атрибут для анимации. Чтобы указать атрибут компонента, используйте синтаксис componentName.property (например, light.intensity ). | вращение |
| начать | Имя события для ожидания перед началом анимации. | «» |
| задержка | Задержка (в миллисекундах) или имя события для ожидания перед началом анимации. | 0 |
| направление | Направление анимации (между from и to ). Один из alternate , alternateReverse , normal , reverse . | нормальный |
| дур | Продолжительность в (миллисекундах) анимации. | 1000 |
| ослабление | Ослабляющая функция анимации. Их очень много. | легкость |
| конец | Имя события для ожидания перед остановкой анимации. | «» |
| заполнить | Определяет эффект анимации, когда он не активен в игре. Один backwards , both , forwards , none . | вперед |
| от | Начальное значение. | Текущая стоимость. |
| повторение | Повторите подсчет или indefinite . | 0 |
| в | Конечное значение. Должен быть указан. | Никто |
Начать
Атрибут begin определяет, когда анимация должна начинаться.
Это может быть либо число , представляющее миллисекунды ожидания, либо имя события, которое нужно ждать. Например, мы можем определить анимацию, ожидающую за 2 секунды до масштабирования объекта.
<a-entity>
<a-animation attribute="scale" begin="2000" to="2 2 2"></a-animation>
</a-entity>
Или мы можем определить анимацию, которая ожидает, чтобы родительский элемент инициировал событие с именем fade перед тем, как fade объект.
<a-entity id="fading-cube" geometry="primitive: box" material="opacity: 1">
<a-animation attribute="material.opacity" begin="fade" to="0"></a-animation>
</a-entity>
// Trigger an event to begin fading.
document.querySelector('#fading-cube').emit('fade');
направление
Атрибут direction определяет, какой способ для анимации между начальным значением и конечным значением.
Когда мы определяем переменное направление, анимация будет идти туда и обратно между значениями from и to такими как yo-yo. Альтернативные направления влияют только на повторение анимации.
| Значение | Описание |
|---|---|
| чередовать | На четных циклов, анимировать от from до to . В циклах с нечетным номером анимация от to и from |
| Альтернативный-обратный | О циклах с нечетными номерами, анимированных от from до to . На четных циклах анимация от to и from |
| нормальный | Анимация из from to . |
| задний ход | Анимации от to до from . |
смягчение
Атрибут easing определяет функцию ослабления анимации, которая по умолчанию ease . Слишком много облегчающих функций для перечисления, но мы можем косвенно объяснить их.
Одно возможное значение является linear . И основные функции ослабления - это ease , ease-in , ease-out и ease-in-out .
Тогда есть еще несколько групп ослабляющих функций. Вышеупомянутые базовые функции ослабления префикс каждой группы ослабляющих функций. Группы ослабляющих функций - это cubic , quad , quart , quint , sine , expo , circ , elastic , back и bounce .
Например, cubic группа ослабляющих функций будет состоять из ease-cubic , ease-in-cubic , ease-out-cubic , ease-in-out-cubic .
заполнить
Атрибут fill определяет эффект анимации, когда он не активен в игре. Подумайте, как fill какие значения анимации устанавливаются на сущности до и / или после каждого цикла анимации. Ниже приведены возможные значения fill и их эффектов.
| Значение | Описание |
|---|---|
| назад | Перед началом анимации установите начальное значение в значение from . |
| и то и другое | Объедините эффекты как заполнения, так и переполнения вперед. |
| вперед | После анимации отделки, окончательное значение будет оставаться на , to значение. Заполнение по умолчанию. |
| никто | Перед началом анимации установите начальное значение на начальное значение. После окончания анимации сбросьте значение до начального значения. |
Повторение
Атрибут repeat определяет, как часто повторяется анимация. Каждый повтор анимации мы называем циклом. Повторение может быть либо числом, которое отсчитывает каждый цикл анимации до тех пор, пока не достигнет 0 после которого анимация закончится, или мы можем установить repeat на indefinite и анимация будет циклически работать до тех пор, пока анимация не будет вручную удалена или остановлена.
СОБЫТИЯ
Элемент <a-animation> выделяет несколько событий.
| Название события | Описание |
|---|---|
| animationend | Выпускается, когда анимация заканчивается. В случае повторов испускается, когда количество повторений достигает 0 . Не испускается для неопределенных повторов. |
| animationstart | Выпускается сразу после начала анимации. |
Пример анимации
В качестве вводного примера, чтобы определить 5-метровую орбиту на объекте вокруг оси Y, которая занимает 10 секунд, мы можем компенсировать положение и оживить вращение. Эта анимация начинается с начального вращения вокруг оси Y в 0 градусов и приближается к 360 градусам. Он определяется длительностью 10000 миллисекунд, поддерживает окончательное значение для каждого цикла анимации и бесконечно циклически.
<a-entity position="5 0 0" rotation="0 0 0">
<a-animation attribute="rotation"
to="0 360 0"
dur="10000"
fill="forwards"
repeat="indefinite"></a-animation>
</a-entity>
Анимация различных типов свойств
Система анимации A-Frame может анимировать различные типы свойств.
Свойства vec3
A-Frame имеет стандартные компоненты vec3 (т. vec3 position , rotation и scale ). Эти компоненты состоят из трех факторов: X, Y и Z. Мы можем передавать три числа с разделителями в области from и to атрибутов так же, как мы определяли бы их на сущности. В этом случае система анимации предположит, что мы анимируем значение vec3 .
Например, если мы хотим анимировать объект, идущий от одного места к другому, мы можем анимировать компонент position .
<a-entity>
<a-animation attribute="position" from="1 1 1" to="2 4 -8"></a-animation>
</a-entity>
Логические свойства
A-Frame имеет стандартные компоненты, которые принимают одно логическое значение. Булевы значения также могут быть «анимированы», перевернув логическое значение в конце каждого цикла анимации.
Например, мы можем определить анимацию, которая отключает видимость объекта через 5 секунд.
<a-entity>
<a-animation attribute="visible" dur="5000" to="false" repeat="indefinite"></a-animation>
</a-entity>
Числовые свойства
Мы можем анимировать и числовые атрибуты. Например, мы можем оживить интенсивность легкого примитива.
<a-light intensity="1">
<a-animation attribute="intensity" to="3"></a-animation>
</a-light>
Свойства цвета
Мы можем анимировать любое свойство компонента, имеющее тип цвета. Например, мы можем анимировать ящик от белого до красного.
<a-entity id="blushing-cube" geometry="primitive: box">
<a-animation attribute="material.color" from="white" to="red" dur="1000"></a-animation>
</a-entity>
Свойства компонента
Мы можем анимировать некоторое свойство многокомпонентной компоненты. Для этого мы выбираем свойство компонента с помощью точечного синтаксиса: componentName.propertyName .
Например, чтобы оживить верхний радиус конуса, мы можем выбрать значение radiusTop с помощью geometry.radiusTop .
<a-entity geometry="primitive: cone; radiusTop: 1">
<a-animation attribute="geometry.radiusTop" to="0.5"></a-animation>
</a-entity>