Главная » Статьи » Pano2VR

Анимированные хотспоты в проектах Pano2VR средствами CSS3

Не знаете, как в проекте Pano2VR сделать анимацию спрайта с помощью CSS3? Читайте статью.

1 5 4.4 32

Анимированные хотспоты в проектах Pano2VR средствами CSS3

Изображение

Способы создания анимированных хотспотов рассматривались в этой статье. Они имеют свои недостатки. GIF-анимация имеет ограниченный диапазон цветов, а SVG-анимация не позволяет создать объемное изображение. Способ анимации, описанный в этой статье, основан на CSS3 (Cascading Style Sheets), а именно на свойстве animation, которое появилось в третьей версии. Штатными средствами Pano2VR такую анимацию сделать нельзя. Но ничто не мешает это сделать вручную. Данный пример рассмотрен на версии Pano2VR 4.5.3.

Создание шаблона.

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

Рисунок 1. Шаблон хотспота.

Определим для метки активной зоны сценарии для отображения и скрытия текстового поля (рис. 2). Изначально у текстового поля отключено свойство Visible.

Рисунок 2. Сценарии для элемента "animated_hotspot".

Шаблон готов. Экспортируем проект в формат HTML5.

Создание спрайта.

Рисунок 3. Изображение спрайта.

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

Написание кода на Javascript и CSS3.

После экспорта откроем в текстовом редакторе html-файл, который находится в папке экспорта и в секции стилей создадим новый класс, в котором опишем анимацию. Свойство background определяет фон элемента. Им будет изображение спрайта – hs_normal.png.

Рассмотрим свойство "animation". hsAnimate – это функция анимации, определяемая ключевыми кадрами @keyframes. Её код расположен ниже. 1s – это длительность всей анимации. infinite – количество повторов не ограничено. steps(9, end) – временная функция, разбивающая анимацию на 9 равных шагов. Количество шагов зависит от количества кадров и меньше его на единицу.

.ggskin_animated_button { 
	background: url(hs_normal.png) left top no-repeat;
	animation: hsAnimate 1s infinite steps(9, end);
	-webkit-animation: hsAnimate 1s infinite steps(9, end);
	-moz-animation: hsAnimate 1s infinite steps(9, end);
	-ms-animation: hsAnimate 1s infinite steps(9, end);
}

Свойства с префиксами -webkit-, -moz-, -ms- аналогичны и понимаются только определенными браузерами.

С помощью ключевых кадров определено изменение свойства background-position-y от 0px до -495px.

@keyframes hsAnimate {
	0% {background-position-y: 0px}
	100% {background-position-y: -495px}
} 

Теперь напишем код на Javascript, который будет вносить изменения в структуру оформления.

<script>
document.addEventListener('DOMContentLoaded', function() {
	hotspots = document.getElementsByClassName('ggskin ggskin_hotspot');
	for (var i=0; i<hotspots.length; i++){
		elements = hotspots[i].getElementsByClassName('ggskin ggskin_button');
		for (var j=0; j<elements.length; j++){
			if (elements[j].nodeName.toLowerCase() == 'img') {
				elements[j].parentNode.removeChild(elements[j]);
			} else {
				if (elements[j].nodeName.toLowerCase() == 'div') {
					elements[j].classList.add('ggskin_animated_button');
				}
			} 
		}
	}
}); 
</script>

Как это работает. сначала находятся элементы имеющие класс "ggskin_hotspot", а затем среди этих элементов выполняется поиск элементов имеющих класс "ggskin_button". Если это элемент изображение (Тег <IMG>), то удаляется из дерева элементов, а если это блок (Тег <DIV>), то в список классов добавляется, определенный ранее класс "ggskin_animated_button".

До изменений

После изменений

<div class="ggskin ggskin_hotspot"> <div class="ggskin ggskin_button"> <img class="ggskin ggskin_button"> </div> </div>

<div class="ggskin ggskin_hotspot"> <div class="ggskin ggskin_button ggskin_animated_button"> </div> </div>

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

В случае наличия в проекте различных хотспотов понадобится поработать с файлом skin.js, внося определенные изменения и дополнения в структуру кода. В Pano2VR 5 реализовать такое будет проще, ведь в нем есть поддержка классов и свойств CSS. Об этом также будет статья. А пока всё. Ниже находится демонстрационный пример. Если возникнут вопросы, пишите в комментариях ниже.

Демонстрация работы оформления.
Pano2VR | Добавил: СЕРГЕЙ ДИШУК (29.11.2016)
638 | Теги: HTML5, хотспот, CSS3, Pano2VR, точка перехода, анимация
Рейтинг: 4.4 / 32 | Оцените материал:

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

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

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

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

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

comments powered by HyperComments
Недавние панорамы

Список последних опубликованных сферических панорам

Рубрикатор
Случайная панорама
Опрос
Какие разделы сайта Вам интересны?
Всего ответов: 26
Я в социальных сетях
  1. Вконтакте
  2. Одноклассники
  3. Facebook
Комментарии и страницы
comments powered by HyperComments