Анимация элементов оформления средствами 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)
231 | Теги: логика, Pano2VR5, таймер, хотспоты, Pano2VR, Логические блоки, переменные, элементы, анимация
Рейтинг: 5.0 / 2 | Оцените материал:

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

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

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

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

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

Загляните в мои соцсети

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

Фотографии и панорамные изображения публикую на этих ресурсах:

Профиль на 360cities.net

Профиль на 1panorama.ru

Профиль на fotokto.ru

Профиль на photocentra.ru

Профиль на photosight.ru

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