Способы создания анимированных хотспотов рассматривались в этой статье. Они имеют свои недостатки. GIF-анимация имеет ограниченный диапазон цветов, а SVG-анимация не позволяет создать объемное изображение. Способ анимации, описанный в этой статье, основан на CSS3 (Cascading Style Sheets), а именно на свойстве animation, которое появилось в третьей версии. Штатными средствами Pano2VR такую анимацию сделать нельзя. Но ничто не мешает это сделать вручную. Данный пример рассмотрен на версии Pano2VR 4.5.3.
Создание шаблона.
Для начала добавим в оформление элемент "метка активной зоны". Затем добавим кнопку, используя не анимированное изображение, и текстовое поле, расположив его под изображением кнопки. Оно будет использоваться в качестве вывода подсказки. используя не анимированное изображение.
Определим для метки активной зоны сценарии для отображения и скрытия текстового поля (рис. 2). Изначально у текстового поля отключено свойство Visible.
Шаблон готов. Экспортируем проект в формат HTML5.
Создание спрайта.
Спрайт представляет собой раскадровку анимации на одном изображении. Её можно сделать в любом графическом редакторе. Для наглядности изображение на рис. 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. Об этом также будет статья. А пока всё. Ниже находится демонстрационный пример. Если возникнут вопросы, пишите в комментариях ниже.