Анимация элементов оформления средствами Pano2VR5

Если способы создания анимации в Pano2VR, о которых писалось ранее, для вас слишком неудобны, то вот еще одно решение. Только делается оно в Pano2VR версии 5

1 5 5.0 2

Анимация элементов оформления средствами Pano2VR5

Изображение

Ранее я уже писал о создании анимированных хотспотов здесь и здесь. Однако способы, описанные в статьях, требуют вмешательства в текст Javascript, написания css-сценария, а также создания gif-анимации, на которую после экспорта требовалось заменить статические изображения. Если способы создания анимации в Pano2VR, о которых писалось ранее, для вас слишком неудобны, то вот еще одно решение. С появлением в Pano2VR (в версии 5) элемента таймер и логических блоков, стала доступна возможность создавать анимацию для элементов.

Немного теории

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

Рисунок 1. Элементы для примера

Кроме этого в списке переменных необходимо определить одну переменную, от которой будет зависеть процесс анимация. Переменная должна иметь тип True/False (логический тип) и начальное значение false.

Рисунок 2. Определенная переменная

Настроим таймер. Зададим интервал (Timeout) 0,5 секунд, тип (Type) Init и повторение (Repeat) Toggle. При таких значениях таймер будет срабатывать через 0,5 секунд и столько же простаивать в ожидании следующего срабатывания.

Рисунок 3. Настройка таймера

Добавим для таймера сценарий с событием Activate и действием Set Variable Value с параметром Not для целевой переменной anim_state, созданной несколькими шагами выше.

Рисунок 4. Сценарий с событием Activate для таймера.

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

В соответствии со сценарием, при каждом назначении интервала, значение переменной будет инвертироваться функцией Not (было false, стало true; было true, стало false).

После всех настрое можно переходить к анимированию. Для этого нужно выбрать объект и анимировать какое-нибудь свойство, например положение (Position). В этом случае, когда значение переменной anim_state станет равным true, положение элемента изменится на 10 пикс. вправо. При значении false положение установится в исходное.

Рисунок 5. Логический блок для анимируемого свойства

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

Рисунок 6. Опции плавного перехода

Чтобы вам было проще понять, как работает анимация того или иного свойства, я создал демонстрационный пример.

Демонстрация работы анимации. Можно задавать свойство и интервал таймера.

Пример анимированного хотспота (идея GGnome.com)

Добавим на холст следующие элементы: таймер и 2 прямоугольника. Зададим прямоугольникам одинаковые значения размеры (Size). У обоих элементов уберем фон (Background), увеличим толщину границы (Border > Width). Радиусу (Border > Radius) зададим значение, немного превышающее половину ширины элемента, чтобы элемент обрел форму окружности.

Рисунок 7. Начало создания.

Для элемента «ring_inside», который будет являться внутренней окружностью, установим значения свойства Scaling 0,5 для X и Y. Для элемента «ring_outside», который будет являться внешней окружностью, установим значения свойства Alpha равным 0. Совместим окружности, задав элементам одинаковые значения свойств положения (Position) и поместим их в контейнер.

Рисунок 8. Сгруппированные элементы окружностей.

Создадим логические блоки для элементов « и ring_inside» и «ring_outside». Анимация будет основана на изменениях значений Scaling и Aplha.

Для элемента «ring_inside» логические блоки будут и иметь следующие настройки.

Рисунок 9. Логический блок для свойства Scaling для «ring_inside».
Рисунок 10. Логический блок для свойства Alpha для «ring_inside».

Для элемента «ring_outside» логические блоки будут и иметь следующие настройки.

Рисунок 11. Логический блок для свойства Scaling для «ring_outside».
Рисунок 12. Логический блок для свойства Alpha для «ring_outside».

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

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

Рисунок 13. Окончательная структура элементов.

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

Рисунок 14. Сценарий для элемента активной зоны.

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

Все о создании анимации | Добавил: СЕРГЕЙ ДИШУК (16.09.2017)
100 | Теги: логика, Pano2VR5, таймер, хотспоты, Pano2VR, Логические блоки, переменные, элементы, анимация
Рейтинг: 5.0 / 2 | Оцените материал:

Поделиться в социальных сетях:

Об авторе статьи:

Сергей Дишук, фотограф-любитель. Снимает пейзажи, животных, репортажи различных городских мероприятий. Увлекается программированием и разработкой программного обеспечения. Занимается съемкой панорам и созданием виртуальных туров более 5-ти лет. Имеет опыт работы в программах Adobe Photoshop, Lightroom, PTGui, Pano2VR, Autopano, Panotour.

У Вас возникли вопросы по статье? Задайте их в комментариях ниже и получите развернутый ответ. Если данный материал не соответствует Вашему поисковому запросу, попробуйте воспользоваться поиском или найдите нужный материал в разделе статьи.

Комментарии:


Недавние панорамы
Рубрикатор
Случайная панорама
Опрос
Как помогают Вам мои материалы по работе с Pano2VR?
Всего ответов: 2