- •Введение
- •Глава1. Html и css
- •1.1. Лабораторная работа № 1. Знакомство с html
- •1.4. Лабораторная работа № 4. Блоковая модель
- •1.5. Лабораторная работа № 5. Новые возможности в css3
- •1.6. Лабораторная работа № 6. Анимация. Создание выпадающего меню
- •Глава 2. Java script
- •2.2. Лабораторная работа №2. Функции. Операторы цикла. Объекты Math, Number
- •2.3. Лабораторная работа №3. Встроенные объекты JavaScript
- •2.4. Лабораторная работа № 4. Пользовательские объекты js. Специальные операторы
- •2.5. Лабораторная работа № 5. Объектная модель документа. Доступ к элементам web-страницы
- •2.6. Лабораторная работа № 6. Объектная модель браузера (bom)
- •2.7. Лабораторная работа № 7. Работа с формами
- •2.8. Лабораторная работа № 8. События. Динамические эффекты на js
- •2.9. Лабораторная работа № 9. Движение объектов и графика на JavaScript
- •2.10. Лабораторная работа № 10. Знакомство с jQuery
- •Глава 3. Xml
- •3.1. Лабораторная работа № 1. Создание xml-документа
- •3.2. Лабораторная работа № 2. Создание валидных xml-документов
- •Xml схема
- •3.3. Лабораторная работа № 3. Отображение xml с использованием xslt
- •3.6. Лабораторная работа № 6. Знакомство с svg-графикой.
- •3.7. Лабораторная работа № 7. Svg-анимация
- •Глава 4. Использование возможностей html5
- •4.1. Лабораторная работа № 1. Знакомство с html5. Элементы video и audio. Геолокация. Элемент canvas.
- •4.2. Лабораторная работа № 2. Использование новых элементов и атрибутов в html5 формах
3.7. Лабораторная работа № 7. Svg-анимация
Цель: научиться применять анимацию к различным свойствам svg-фигур, создавать анимацию трансформаций.
Теория
SMIL (the Synchronized Multimedia Integration Language) – язык разметки, c помощью которого осуществляется анимация в SVG. В SVG каждой отдельной геометрической фигуре можно присвоить свои инструкции по поведению, каждый элемент может стать актером на сцене – холсте. Как и SVG, SMIL представляет из себя простой XML.
Тег <animate> анимирует отдельные свойства. Можно прописать тег <animate> непосредственно в теге фигуры с указанием анимированного свойства в параметре attributeName. В примере анимируется свойство cx, расположение по оси x изменяется от 100 до 300px:
<circle cy="70" r="50" fill="red">
<animate attributeName="cx" from="100" to="300"dur="5s"/>
</circle>
Анимируемыми свойствами могут быть также толщина обводки stroke-width; радиус в круге или размеры в других фигурах; заливка (при этом изменение заливки можно задавать от цвета к цвету); прозрачность opacity от 0 до 1, пунктирная заливка stroke-dasharray и др.
Ниже приведены различные примеры:
<animate attributeName="fill" from="blue" to="red"dur="6s" repeatCount="indefinite"/>
<animate attributeName="fill" values="red; yellow; green; #0000ff <!-- несколько промежуточных значений цвета--> dur="15s" fill="freeze"/>
Можно задавать сразу несколько анимаций, и они будут выполняться одновременно, для последовательного выполнения можно задать атрибут begin.
<animate attributeName="fill" from="red" to="blue" dur="6s" begin="0s" repeatCount="indefinite" />
<animate attributeName="fill" from="blue" to="red" dur="6s" begin="6s" repeatCount="indefinite" />
В теге <animate> можно ссылаться на анимируемый объект через его id:
<circle id="myelement" r="50" cx="100" cy="70" fill="red"/>
<animate xlink:href="#myelement" attributeName="fill" from="red" to="blue" dur="5s"/>
Тег <animateTransform> предназначен для создания анимации трансформаций, вид трансформации указывается в атрибуте type.
<rect x="5" y="10" width="50" height="25" fill="grey"> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="4" dur="5s" fill="freeze"/></rect>
<animateTransform xlink:href="#mygroup" attributeName="transform" attributeType="XML" type="rotate" from="0, 60 50" to="45,60,50" dur="5s" additive="sum" fill="freeze"/>
Для обработки событий мыши можно воспользоваться тегами анимации с атрибутами begin и end.
Например:
begin="mousedown" end="mouseup" или begin="mouseover".
Задания к лабораторной работе № 7
Задание 1. Напишите коды следующих анимаций для любого примитива (круг, прямоугольник):
перемещение по прямой;
изменение размера (радиуса);
изменение цвета при одновременном перемещении по оси X;
изменение толщины обводки.
Задание 2. Примените анимацию трансформации для изменения размеров любого svg-контура из предыдущей работы.
Задание 3. Добавьте обработку событий в любую из созданных ранее анимациий.
Для эффекта постепенной прорисовки необходимо установить свойства stroke-dasharray (длина штриха) и stroke-dashoffset (сдвиг штриха) равными длине контура (подбирается на глаз, например 500px), а затем любыми известными уже нам способами установить свойство stroke-dashoffset в 0.
Задание 4. Создайте новый html файл с svg-изображением. Скопируйте svg-код иконки из предыдущей лабораторной работы. Увеличьте масштаб при помощи параметра viewBox. Если в этом параметре задать размер меньше, чем в параметрах высоты и ширины svg области, то изображение зрительно увеличится. В примере кода изображение увеличено в 2 раза.
<svg width="400" height="200" viewBox="0 0 200 100">
Задание 5. Задайте контуру свойства stroke-dasharray и stroke-dashoffset. Примените эффект прорисовки при помощи команды
<animate attributeName="stroke-dashoffset"…..>