Как создать потрясающую AR-анимацию в Torch

В приложениях с дополненной реальностью (AR) интерактивные анимации помогают пользователям переходить от сцены к сцене посредством отточенных таймингов и осмысленного опыта взаимодействия в дополненной реальности.

В этом руководстве мы покажем, как использовать элементы взаимодействия для перемещения и масштабирования 3D объектов, как связывать сцены для плавных переходов и как создавать сложные взаимодействия из простых компонентов и паттернов. Кроме того, вы поймете, как изменение сцены на заднем плане помогает переместить зрителя на новую сцену с новыми интерактивными элементами.

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

Чтобы следовать нашим инструкциям, в первую очередь вам необходимо скачать самую последнюю версию Torch AR. Готово? Отлично, теперь давайте начнем.

Шаг 1. Создаем взаимодействие для выделенного объекта (Select interaction)

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

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

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

Чтобы запустить Select Interaction, мы сначала используем настройки видимости, чтобы скрыть все модели, которые не используются в следующей сцене. По ходу дела мы будем опираться на следующую простую схему для создания сложной анимации:

1. Выберите объект, который станет триггером для вашего дальнейшего взаимодействия. Затем нажмите иконку Interactions/Взаимодействие (иконка молнии) в контекстном меню. Откроется панель Object Interactions/Взаимодействия объектов и появится список всех взаимодействий для выбранного объекта.

2. Добавьте и дайте название взаимодействию. Откроется поле ввода The Trigger& Responses /Триггеры и отклики. Нажмите поле с названием и присвойте взаимодействию название.

3. Настройте триггерное событие для вашего взаимодействия. Триггер Select Object выбирается по умолчанию в новых взаимодействиях, и это то, что нам нужно для этого взаимодействия. Нажмите на триггер, чтобы настроить его параметры.

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

5. Измените свойства видимости. Для выбранных целей взаимодействия нажмите кнопку свойства Visibility/ Видимость, выберите Invisible /Невидимый и не забудьте нажать на флажок в правом нижнем углу, чтобы подтвердить ваши настройки.

6. Протестируйте взаимодействие в Play Mode/Режиме воспроизведения. Нажмите кнопку Play Mode, треугольник в контекстном меню. Протестируйте анимацию в режиме воспроизведения, нажав (выбрав) объект с новым взаимодействием. Для достижения наилучших результатов важно постепенно создавать взаимодействия с Torch и постоянно проверять результат.

А сейчас профессиональный совет по поводу сцен

Смена сцен без перемещения ваших 3D-объектов позволяет вам добавлять свойства объекта и логику взаимодействия в Torch незаметно для вашего пользователя

По сути сцены представляют собой артборды, визуально организующие ваше приложение в группы 2D и 3D объектов. Но скрытая сила сцен заключается в их способности наложения и упорядочения правил взаимодействия и свойств объектов, которые делают ваше приложение по-настоящему интерактивным. Когда вы начинаете учиться использовать сцены таким образом, каждая новая созданная сцена открывает неограниченные возможности.

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

1. Выберите сцену, которая будет использована в качестве начального состояния взаимодействия. Создайте копию этой сцены, используя панель Scene Options — мы будем использовать эту копию как конечное состояние для взаимодействия.
2. В копии сцены выберите объект и используйте свободную трансформацию для его перемещения и масштабирования. Мы будем использовать эти конкретные координаты и размеры, чтобы установить взаимодействие в первой сцене.
3. Вернувшись назад к первой сцене, создайте взаимодействие с другим объектом и введите значения свойств из сцены конечного состояния для идеальных значений переменных объекта, которым вы управляли.
4. Как только две сцены установлены как начальное и конечное состояния, мы можем добавить к ним изменения сцены при взаимодействии. Поскольку начальное состояние во второй сцене совпадает с конечным состоянием взаимодействия в первой сцене, между ними будет плавный переход. Если вы сделали это правильно, вы даже не заметите смены сцен!

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

Шаг 2. Добавляем Scaling/Масштабирование

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

Эта модель была пропорционально масштабирована со значением 3,182 по каждой оси

При нажатии на отель, а затем на Object Properties/Свойства объекта, мы видим, что модель во второй сцене масштабируется со значением 3,182 в каждом измерении — эта модель масштабируется пропорционально. Вот шаги, которые мы можем предпринять, чтобы настроить взаимодействие масштабирования, которое приведет нас к этой сцене:

1. Скопируйте переменные масштабаиз конечного состояния и вернитесь к начальной сцене.
2. Откройте взаимодействие «Select1» в первой сцене. Нажмите на информационную карточку отеля, затем на иконку Interactions/ Взаимодействия и выберите «Select1»
3. Измените значение Scale/Масштаб. Выберите модель отеля, а затем нажмите Scale/Масштаб, чтобы ввести переменные масштаба, 3.182, которые мы сохранили со сцены конечного состояния.
4. Протестируйте взаимодействие в PlayMode/Режиме воспроизведения. Быстрый переход в режим воспроизведения показывает нам, что наше взаимодействие с масштабом работает так, как мы предполагали, но вертикальное положение нуждается в настройке.

Шаг 3. Настроим позицию отеля

Помните, что в Torch «Y» — вертикальная ось, и все значения вычисляются относительно позиции World Anchor.

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

1. Скопируйте значения позиции отеля из конечного состояния. Знайте, что этот объект должен перемещаться только вдоль оси «Y», так что это единственное значение, которое нам необходимо. Теперь вернитесь к первой сцене.
2. Откройте взаимодействие «Select 1». Нажмите на информационную карточку отеля, затем на значок Interactions /Взаимодействия, далее выберите взаимодействие «Select 1».
3. Отредактируйте позицию. Выберите модель отеля, а затем нажмите Scale/Масштаб, чтобы ввести координаты для оси Y– 0,7021.
4. Дважды проверьте! Обязательно убедитесь, что выбрана Absolute position/Абсолютная позиция. Абсолютные позиции привязывают объект к определенным координатам, чего мы и хотим. Кумулятивная позиция будет меняться с одними и теми же значениями каждый раз, когда инициируется взаимодействие.
5. Протестируйте взаимодействие в PlayMode/Режиме воспроизведения. Поскольку мы создаем аддитивную анимацию с Torch взаимодействиями, мы можем избежать множества усилий и разочарований, протестировав эти анимации по мере добавления каждого отклика на взаимодействие.
6. Повторите эти шаги для моделей облаков. Включение этого единственного декоративного элемента из более ранней сцены сохраняет ощущение погружения, когда пользователи перемещаются по приложению, не перегружая и не отвлекая их от основной цели — бронирования отеля.

А сейчас профессиональный совет по поводу изменения сцен

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

Найдите функции Scene Change, Open Link и API call в меню действий.

Как только происходит это изменение сцены в Torch проекте, в ваших руках появляется еще один мощный инструмент — триггер Enter Scene. Добавив взаимодействие на саму сцену, вы можете использовать триггер Enter Scene, чтобы немедленно запустить новую анимацию и интерактивность при входе в любой сцене.

Сочетание отклика Scene Change и триггеров Enter Scene добавляет еще один уровень глубины в ваших Torch проектах.

Шаг 4. Добавим отклик на изменение сцены Scene Change

При нажатии на Scene Change будет доступен список сцен в вашем проекте, которые могут открыться как целевой отклик на этот триггер взаимодействия.

Давайте подтвердим, что соединение, которое мы настроили для анимации отеля, действительно достигает своей цели, связывая две наши сцены, добавив отклик Scene Change к этому взаимодействию.

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

1. Откройте взаимодействие «Select 1». В первой сцене нажмите информационную карточку отеля, затем иконку взаимодействий, далее взаимодействие, отмеченное как «Select 1».

2. Выберите Action Response. Вместо того чтобы выбирать какие-либо модели, нажмите Action Response, чтобы раскрыть три новых отклика, которые могут перемещать вас между Torch сценами, в другие приложения или веб-страницы или связывать ваше приложение с API. При нажатии на отклик Scene Change открывается список сцен в вашем проекте.

3. Выберите целевую сцену. Нажмите, чтобы выбрать целевую сцену, а затем «X» из интерактивного меню, чтобы проверить изменение сцены в Play Mode. Прекрасно! Осталось всего несколько шагов.

4. Тестируйте взаимодействие в Play Mode.

Шаг 5. Скрываем карту

Сожмем модель карты, пока она не станет достаточно маленькой, чтобы можно было её спрятать, а затем удалить со сцены.

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

1. Откройте взаимодействие «Select 1». В первой сцене нажмите информационную карточку отеля, затем иконку взаимодействий, далее взаимодействие, обозначенное как «Select 1».
2. Выберите и отмасштабируйте карту. Нажмите на карту и используя сжатие двумя пальцами уменьшите масштаб карты.
3. Удалите карту из поля зрения. Просто перетащите карту в ее конечное положение под моделью отеля.
4. Тестируйте взаимодействие в Play Mode.

Шаг 6. Настроим кривые анимации и скорость

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

Вы можете редактировать длину, задержку и тип кривой анимации в меню Edit Curves для каждого взаимодействия.

Чтобы настроить тайминги, нам необходимо отредактировать кривые анимации. В Torch все взаимодействия начинаются с линейной кривой и таймингом, по умолчанию равным 0,5 секунды, но вы можете изменить эти параметры в любое время, отредактировав взаимодействие.

1. Откройте взаимодействие «Select 1». В первой сцене нажмите информационную карточку отеля, затем иконку взаимодействий и далее взаимодействие, обозначенное как «Select 1».
2. Нажмите Edit Curves /Редактировать кривые в центре панели взаимодействия под Interaction Responses. На экране Preview Response Curves вы можете видеть и редактировать каждый отклик в этой группе взаимодействий. В этом окне вы можете редактировать продолжительность, задержку и тип кривой для каждого отклика на взаимодействие.
3. (Необязательно) Поиграйте с кривыми анимации. Чтобы изменить текущее состояние кривой анимации, выберите одну или несколько ячеек, а затем переключайтесь между кривыми анимации в нижней части экрана.
4. Настройте длину анимации везде на одну секунду. Поскольку эта анимация уже мной протестирована, я знаю, что одна секунда будет работать прекрасно для всех компонентов этой группы взаимодействия. Каждый проект будет отличаться, поэтому обязательно проверяйте свои кривые на предмет оптимального опыта.
5. Протестируйте взаимодействие в режиме Play Mode. Делайте заметки о том, что сработало, и вносите корректировки в кривые для каждого шага взаимодействия.

А теперь ваша очередь!

Отлично сделано! Благодаря наложению небольших компонентов взаимодействия теперь вы можете создавать продуманную AR анимацию. Используйте эффектные отклики со сменой сцен для перехода пользователей между сценами и создавайте плавное погружение. Я надеюсь, что этот рабочий процесс построения взаимодействий в Torch поможет вам планировать и разрабатывать интерактивные элементы в вашем следующем AR приложении. Как только вы правильно настроили тайминг анимации, не забудьте поделиться своим проектом с хэштегом #BuiltWithTorch

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

Перевод How to Make Eye-popping AR Animations in Torch