Как сделать AR анимацию

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

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

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

Чтобы следовать этим инструкциям, первое, что вам нужно сделать, это загрузить самую последнюю версию Torch AR . Понял? Отлично, теперь давайте начнем.

Шаг 1: начало построения взаимодействия Select

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

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

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

• Выберите объект, который инициирует взаимодействие . Затем нажмите значок взаимодействия (молния) в контекстном меню. Откроется ящик и появится список всех взаимодействий для выбранного объекта.
• Добавьте и назовите взаимодействие . Откроется представление триггер и ответы. Коснитесь таблетки имя взаимодействия и назовите взаимодействие.
• Установите событие триггера для взаимодействия. Триггер Select Object выбран по умолчанию в новых взаимодействиях, и это то, что мы хотим для этого взаимодействия. Нажмите на триггер, чтобы изменить его настройки.
• Выберите ответ взаимодействия. Сначала коснитесь любого из объектов, которые будут реагировать на триггер. Теперь отображается окно свойства объекта. Здесь настройте ответ для выбранного объекта или коснитесь любых дополнительных объектов в сцене, которые будут совместно использовать тот же ответ на триггер взаимодействия.
• Измените свойства видимости. Выбрав цели взаимодействия, нажмите кнопку Свойства, выберите невидимый и не забудьте установить флажок в правом нижнем углу, чтобы подтвердить настройки.
• Протестируйте взаимодействие в режиме воспроизведения . кнопка, треугольник, в контекстном меню. В режиме воспроизведения проверьте анимации, нажав (выбрав) объект с новым взаимодействием. Для получения наилучших результатов важно строить факельные взаимодействия постепенно и часто тестировать

А теперь, про совет о сценах

Изменение сцен без перемещения 3D-объектов позволяет добавлять свойства объектов и логику взаимодействия в Torch без того, чтобы пользователь это заметил.

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

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

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

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

Шаг 2: Добавьте ответ масштабирования

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

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

• Скопируйте переменные масштаба из конечного состояния и вернитесь в начальную сцену.
• Откройте взаимодействие "Select 1" в первой сцене. Коснитесь информационной карты отеля, затем значка взаимодействия, а затем взаимодействия с пометкой “выбрать 1.”
• Отредактируйте ответ масштаба. Выберите модель отеля, а затем нажмите на ответ, чтобы ввести переменные масштаба, 3.182, сохраненные из сцены конечного состояния.
• Протестируйте взаимодействие в режиме воспроизведения . Быстрый переход в режим воспроизведения показывает нам, что наше взаимодействие в масштабе работает так, как мы ожидаем, но вертикальное положение нуждается в корректировке.

Шаг 3: отрегулируйте положение отеля

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

• Скопируйте значения позиции отеля из конечного состояния. Знайте, что этот объект должен двигаться только вверх по оси "Y", поэтому это единственное значение, которое нам нужно будет захватить. Теперь вернемся к первой сцене.
• Откройте взаимодействие "выбрать 1". Коснитесь информационной карты отеля, затем значка взаимодействия, а затем взаимодействия с пометкой “выбрать 1.”
• Отредактируйте ответ позиции. Выберите модель отеля и нажмите на ответ масштаба, чтобы ввести координаты Y, 0.7021.
• Двойная Проверка! Обязательно выберите абсолютное положение. Абсолютные положения привязывают объект к определенным координатам, чего мы и хотим. Кумулятивная позиция будет меняться на те же отношения каждый раз, когда взаимодействие инициируется.
• Протестируйте взаимодействие в режиме воспроизведения . Поскольку мы создаем аддитивную анимацию с Факелом взаимодействий, мы можем сэкономить много усилий и разочарования, тестируя эти анимации, как мы добавляем каждый ответ взаимодействия.
• Повторите эти шаги для облачных моделей. Включение этого декоративного элемента из предыдущей сцены поддерживает ощущение погружения, когда покупатели перемещаются через приложение, не подавляя и не отвлекая их от их цели–бронирования бронирования.

И теперь, профессиональный совет об изменениях сцены

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

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

Шаг 4: Добавьте ответ на изменение сцены

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

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

• Откройте взаимодействие "выбрать 1". В первой сцене коснитесь информационной карты отеля, затем значка взаимодействия, а затем взаимодействия с пометкой “выбрать 1.”
• Выберите Действие Ответ. Вместо выбора какой-либо модели коснитесь ответ действия, чтобы показать три новых ответа, которые могут переместить вас между сценами Факела, в другие приложения или веб-страницы или подключить приложение с помощью API. Нажатие на ответ открывает список сцен в проекте.
• Выберите целевую сцену. Нажмите, чтобы выбрать целевую сцену, а затем “X” из меню взаимодействия, чтобы проверить изменение сцены в режиме воспроизведения . Сладко! Осталось сделать еще несколько шагов.
• Протестируйте взаимодействие в режиме воспроизведения.

Шаг 5: скрыть карту

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

• Откройте взаимодействие "выбрать 1". В первой сцене коснитесь информационной карты отеля, затем значка взаимодействия, а затем взаимодействия с пометкой “выбрать 1.”
• Выберите и масштабируйте карту. Нажмите на карту и используйте два пальца, чтобы уменьшить масштаб карты.
• Уберите карту из поля зрения. Просто перетащите карту в конечное положение под моделью отеля.
• Протестируйте взаимодействие в режиме воспроизведения .

Шаг 6: настройка кривых анимации и скорости

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

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

• Откройте взаимодействие "выбрать 1". В первой сцене коснитесь информационной карты отеля, затем значка взаимодействия, а затем взаимодействия с пометкой “выбрать 1.
• Нажмите Редактировать кривые в центре панели взаимодействие в разделе Ответы на взаимодействие . На экране предварительный просмотр кривых ответов можно просмотреть и изменить каждый ответ взаимодействия в этой группе взаимодействий. В этом представлении можно изменить длительность, задержку и тип кривой для каждого ответа взаимодействия.
• (Необязательно) воспроизведение с кривыми анимации. Чтобы изменить фактическую кривую анимации ответа, выберите одну или несколько ячеек ответа, затем переключите кривые анимации в нижней части экрана.
• Установите длительность в одну секунду. Поскольку я уже протестировал эти анимации, я знаю, что одна секунда будет работать потрясающе для всех компонентов этой группы взаимодействия. Каждый проект будет отличаться, поэтому не забудьте проверить свои кривые для оптимального опыта.
• Протестируйте взаимодействие в режиме воспроизведения . Делайте заметки о том, что сработало, и вносите корректировки в кривые для каждого шага взаимодействия.

Теперь твоя очередь

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