Анимация
Заставить объект двигаться можно тремя способами. Здесь — как выбрать подходящий и настроить его.
Как выбрать способ
| Способ | Подходит для | Где настраивается |
|---|---|---|
| Переход | одного плавного изменения из точки А в точку Б | длительность у шага Переключить состояние |
| Таймлайн | движения по ключевым кадрам или нескольких объектов, которые движутся синхронно | панель Анимация; запускается шагом Проиграть анимацию |
| Клип модели | анимации, которая пришла вместе с импортированной моделью | панель Анимация — туда её кладёт импорт |
Например:
- кнопка плавно исчезает или дверь открывается по нажатию — это переход в другое состояние;
- катсцена — таймлайн;
- персонаж идёт — клип модели.
Никогда не анимируйте один объект двумя способами сразу. Таймлайн молча перезаписывает переход. Если анимация будто спорит сама с собой, причина в этом.
Переходы
Задайте изменению длительность, и оно пройдёт плавно, без скачка. У шагов Переключить состояние и Изменить свойства есть длительность и сглаживание.
Одни свойства меняются плавно, остальные — в конце перехода. Список — в разделе Что анимируется плавно.
В скрипте ctx.startTransition умеет ещё и повторять переход и проигрывать его туда-обратно
(yoyo).
Чтобы переход шёл туда-обратно, нужно repeat: 2 или больше.
Шаги анимации
События запускают и останавливают анимации двумя шагами:
| Шаг | Что делает |
|---|---|
| Проиграть анимацию | проигрывает анимацию из таймлайна на любом объекте; режим повтора, число повторов, скорость и задержку вы задаёте сами |
| Остановить анимацию | останавливает её |
Чтобы по событию переместить, повернуть, масштабировать, плавно скрыть объект или сменить его цвет, сделайте анимацию в панели Анимация и запустите её шагом Проиграть анимацию. Для одного изменения хватит шага Переключить состояние с длительностью.
В проектах, сделанных раньше, могут встречаться шаги Трансформация, Прозрачность, Материал, Трансформация кости и Встроенная анимация. В этих проектах они по-прежнему работают, но редактор их больше не предлагает. Например, Материал плавно подводит цвет, прозрачность, свечение и настройки поверхности выбранных объектов к сохранённому материалу, а тип и текстуры каждого слота оставляет прежними.
Ключевые кадры и сглаживание
Ключевой кадр — это значение в определённый момент времени. Сглаживание задаёт, как значение меняется между ключевыми кадрами.
Сглаживание относится к ключевому кадру, к которому движется значение, а не к тому, от которого. Без сглаживания значение меняется равномерно, по прямой.
Сглаживание — это кривая с двумя ручками, как cubic-bezier в CSS. Готовые пресеты — это заранее
выставленные ручки: quad, quart, circular, expo и back, каждый в вариантах In, Out и InOut.
| Сглаживание | Как ощущается |
|---|---|
| In | начинает медленно и разгоняется, как будто трогается с места |
| Out | подъезжает и мягко останавливается; самый естественный вариант для интерфейса |
| InOut | медленно в начале и в конце; подходит для длинных перемещений |
| Back | немного проскакивает цель и возвращается; выглядит игриво |
| Elastic | проскакивает цель и покачивается; силу и период вы задаёте сами |
| Step | стоит на месте, а в конце перескакивает; для переключения, а не плавного движения |
Если не уверены, начните с Out.
Таймлайн
Используйте панель Анимация, когда несколько объектов должны двигаться синхронно. Как работать с панелью, описано на странице Панель «Анимация».
У таймлайна три уровня:
- пресет — одна анимация, которую можно запустить по имени;
- полоса (bar) — участие одного объекта в анимации; полоса лежит на дорожке;
- внутри полосы у каждого свойства свои ключевые кадры.
Полоса может быть и полосой запуска. Сама она ничего не анимирует. Вместо этого она запускает пресет другого объекта, когда до неё доходит курсор воспроизведения. Так персонаж двигается слаженно, даже если у каждой конечности свой пресет.
- Зацикливание и скорость передаются каждому пресету, который запускает такая полоса.
- Если остановить пресет, остановится всё, что он запустил.
Внутри полосы можно выключить отдельное свойство. Например, у полосы, которая анимирует позицию и поворот, можно выключить поворот — ключевые кадры при этом сохранятся.
Анимация, которая пришла с моделью, сохраняет исходные кривые. Импортированный цикл ходьбы играет в точности так, как его сделали.
Клипы модели
У модели могут быть свои клипы с названиями. При импорте модели каждый клип становится её анимацией с тем же названием. Она лежит в панели Анимация, как и анимации, которые вы сделали сами.
Чтобы запустить клип из события, используйте шаг Проиграть анимацию и выберите эту анимацию.
Единицы измерения
- Время — в секундах. Длительность переключения состояний — в миллисекундах.
- Поворот везде, где его видно, — в градусах.
Ни один из трёх способов не сообщает, что анимация закончилась. Чтобы запустить что-то после анимации, используйте шаг Подождать и той же длительности или отслеживайте время в скрипте.
Дальше: Состояния — как сохранить разные виды объекта и переключаться между ними.