Способы создания анимированных хотспотов рассматривались в этой статье. Они имеют свои недостатки. 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".

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

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