Подписаться на получение новых статей на почту:

Использование анимации (SMIL) в SVG на примере. Шаг 66

Всем привет. Рассмотрев в прошлой статье кликабельность кнопок веб — интерфейса, перейдем к части анимации семи сегментного индикатора. Включение анимации будет происходить по событию: нажатие на кнопку.  Для данной задачи используем язык разметки SMIL. Итак как всегда кратенько о технологии и переходим к сути.

 SMIL (The Synchronized Multimedia Integration Language) —язык разметки для создания интерактивных мультимедийных презентаций, таких как анимации, визуальные преобразования, создание слайд шоу для презентаций, демонстрации видео, аудио и многое другое. Является рекомендацией консорциума Всемирной паутиныДанный язык выполнен на основе XML, что в свою очередь позволяет в  себя включать ссылки на другие презентации SMIL, а также кнопки и другое. В дополнение к анимационным элементам, определенным в спецификации SMIL, SVG включает расширения, совместимые с данной спецификацией SMIL.  

Анимировать можно тремя способами, первый декларативный подход это использование SVG — анимации, второй – CSS, но есть SVG-свойства, которые не анимируются css и третий — JS-анимации, кроме случаев когда SVG встроен в страницу в виде img или использован как background-image в CSS. Насчет браузерной поддержки, то к сожалению некоторые браузеры молчаливо отказываются от него, забывая упомянуть об этом в стандартах. Как альтернативу можно использовать Web Animations API. Но мы пока что рассмотрим SMIL.

Итак ниже рисунки нашего индикатора, который по нажатию на кнопку в течении определенного времени выводит на индикатор  HELL SET BUTT.

анимация SMIL в SVG

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

Ниже код сегментов первого элемента, который отображает буквы H, S, B

<polygon xmlns="http://www.w3.org/2000/svg" fill="#646464" points="4.729,12.458,10.784,12.458,11.188,12.86,10.38,14.071,5.132,14.071,4.326,12.86">

                        <animate attributeName="fill"

                             attributeType="XML"

                             values="#646464;#646464;#EF1818;#EF1818;#EF1818;#EF1818"

                             dur="8s"

                             begin="lake.mouseover"

                             repeatCount="indefinite"/>

              </polygon>

Где animate – непосредственно сам элемент который позволяет производить анимацию. Например более поддерживаемое браузерами SVG — расширение это animateTransform attributeName="transform".
attributeName – данный атрибут указывает имя атрибута элемента который мы будем анимировать, в данном случае у нас fill, т.е. меняем цвет фигуры polygon.
attributeType="XML" – с помощью данного атрибута мы указываем пространство имен, в данном случае XML.
values – задание значения анимируемого свойства. В данном случае мы перебираем цвета.
dur – атрибут в течении времени которого происходит анимация атрибута.

begin – данный атрибут принимает какие – либо значения для начала анимации, т.е. синхронизации. Также принимает значения события, что в данном примере мы и сделали. Выражение выше (begin = «lake.mouseover») означает что как только по фигуре с ID = lake, будет произведен клик мышкой (рисунок ниже), в данном случае событие то у нас запустится анимация.

анимация интерфейса на SVG

И последнее     repeatCount="indefinite"/> — зацикливание анимации с атрибутом indefinite, означает бесконечный цикл.

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

Просмотрено 1077 раз.

Я на Google+

Использование анимации (SMIL) в SVG на примере. Шаг 66: Один комментарий

  1. Очень позновательно. Только жалко что технология повторяет судьбу апплетов.

Добавить комментарий

Ваш e-mail не будет опубликован.

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting