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

 Работа в Pano2VR | Все о создании анимации
 29.11.2016 |  13:00 |  3.6k |  4.4/32 |  22.09.2017
 Время на чтение: ... |  Комментировать |  Напечатать
Содержание статьи
 Пользователи Pano2VR
В своем сообществе ВКонтакте работает чат, созданный специально для пользователей конвертера панорамных изображений Pano2VR. В нем мы решаем проблемы, возникающие в работе с Pano2VR, обмениваемся опытом и просто общаемся.
 Нас уже ...
Возможно, Вас заинтересуют эти материалы
Самое читаемое
Не знаете, как в проекте Pano2VR сделать анимацию спрайта с помощью CSS3? Читайте статью.

Анимированные хотспоты в проектах 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. Об этом также будет статья. А пока всё. Ниже находится демонстрационный пример. Если возникнут вопросы, пишите в комментариях ниже.

Демонстрация работы оформления.
Теги:  HTML5, точка перехода, Pano2VR, css3, хотспот, анимация
Об авторе

Сергей Дишук, фотограф-любитель и профессионал. Занимаюсь пейзажной, архитектурной, интерьерной, репортажной фотосъемкой, а также другими видами фотосъемки. Связал жизнь с IT, увлекаюсь программированием и разработкой программного обеспечения.

Занимаюсь панорамной фотосъемкой и созданием виртуальных 3D-туров более 8-ми лет. Имею опыт работы в программах Pano2VR, PTGui, Photomatix, Adobe Photoshop, Lightroom и других.

Реализовал некоторые фичи в проектах Pano2VR задолго до их официального появления. За всё время помог разобраться с Pano2VR более 5k пользователям, из них более 200 лично.

Оцените материал
Поделитесь материалом в социальных сетях
Материалы по теме статьи

У Вас остались вопросы по статье? Задавайте. Буду рад ответить на них в комментариях.

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

Нет комментариев
Сейчас просматривают
Связь со мной и соцсети
Telegram
Viber
LinkedIn
ВКонтакте
 
Одноклассники
 
Instagram
 
Опрос
Оцените ваши впечатления от сайта?
Всего проголосовавших: 40
Онлайн всего: 4
Гостей: 4
Пользователей: 0