Параметры from, to, dur, delay

В A-Frame анимации объектов строятся на основе компонента animation. Ключевыми параметрами, управляющими поведением анимации, являются from, to, dur и delay. Они определяют начальное и конечное состояние свойства, продолжительность анимации и задержку перед её запуском. Понимание этих параметров позволяет создавать плавные, реалистичные и синхронизированные анимации в 3D-сценах.

from — начальное значение

Параметр from задаёт исходное состояние свойства, которое будет изменяться в ходе анимации. Его можно указывать как числовое значение, строку, или в случае векторных свойств — в формате x y z. Если from не указан, анимация начинается с текущего значения свойства объекта.

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

<a-box position="0 1 -3" color="red" 
       animation="property: position; from: 0 1 -3; to: 0 3 -3; dur: 2000">
</a-box>

В этом примере коробка перемещается по оси Y с позиции 1 до позиции 3 за 2 секунды.

Особенности from:

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

to — конечное значение

Параметр to указывает конечное состояние свойства, к которому стремится объект. Поддерживаются те же типы значений, что и для from.

Примеры:

<a-sphere position="0 1 -5" color="blue"
          animation="property: scale; from: 1 1 1; to: 2 2 2; dur: 1500">
</a-sphere>

Сфера плавно увеличивается вдвое по всем осям за 1,5 секунды.

Особенности to:

  • Всегда обязательный параметр, иначе анимация не будет работать.
  • Может быть динамическим, вычисляемым через JavaScript или выражения A-Frame.

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

dur определяет время анимации в миллисекундах. Это ключевой параметр для контроля скорости переходов.

Примеры:

<a-box color="green"
       animation="property: rotation; from: 0 0 0; to: 0 360 0; dur: 3000">
</a-box>

Коробка вращается вокруг оси Y за 3 секунды.

Особенности dur:

  • Если значение 0, анимация применяется мгновенно.
  • Можно использовать дробные миллисекунды, например dur: 1500.5, хотя обычно хватает целых значений.
  • Длительность напрямую влияет на восприятие плавности; короткая dur создаёт резкий эффект, длинная — плавный.

delay — задержка перед запуском

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

Пример:

<a-box position="0 1 -3" color="yellow"
       animation="property: position; from: 0 1 -3; to: 0 4 -3; dur: 2000; delay: 1000">
</a-box>

Коробка начнёт подниматься только через 1 секунду после загрузки сцены.

Особенности delay:

  • Полезен для создания цепочек анимаций.
  • Может комбинироваться с repeat и direction для циклических эффектов.

Совместное использование

Параметры from, to, dur и delay часто применяются вместе для точного управления анимациями. Пример синхронизации нескольких эффектов на одном объекте:

<a-sphere position="0 1 -5" color="purple"
          animation="property: position; from: 0 1 -5; to: 0 3 -5; dur: 2000; delay: 500"
          animation__scale="property: scale; from: 1 1 1; to: 1.5 1.5 1.5; dur: 2000; delay: 500">
</a-sphere>

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

Практические советы

  • Для плавных циклических анимаций использовать from и to вместе с dir: alternate и loop: true.
  • Если анимация стартует от текущего состояния, from можно опустить.
  • Для комплексных сцен с множеством объектов задержка (delay) помогает избежать одновременного начала всех анимаций, делая сцену более естественной.
  • Для векторных свойств всегда указывать все компоненты (x y z), иначе поведение может быть непредсказуемым.

Эффективное комбинирование from, to, dur и delay позволяет создавать динамичные и реалистичные сцены, управлять временем и синхронизацией объектов, а также добиваться нужной визуальной выразительности в 3D-пространстве.

Оглавление