Общие условия выбора системы дренажа: Система дренажа выбирается в зависимости от характера защищаемого...
Типы оградительных сооружений в морском порту: По расположению оградительных сооружений в плане различают волноломы, обе оконечности...
Топ:
История развития методов оптимизации: теорема Куна-Таккера, метод Лагранжа, роль выпуклости в оптимизации...
Генеалогическое древо Султанов Османской империи: Османские правители, вначале, будучи еще бейлербеями Анатолии, женились на дочерях византийских императоров...
Оценка эффективности инструментов коммуникационной политики: Внешние коммуникации - обмен информацией между организацией и её внешней средой...
Интересное:
Финансовый рынок и его значение в управлении денежными потоками на современном этапе: любому предприятию для расширения производства и увеличения прибыли нужны...
Средства для ингаляционного наркоза: Наркоз наступает в результате вдыхания (ингаляции) средств, которое осуществляют или с помощью маски...
Аура как энергетическое поле: многослойную ауру человека можно представить себе подобным...
Дисциплины:
2017-09-30 | 422 |
5.00
из
|
Заказать работу |
|
|
Цель: научиться применять анимацию к различным свойствам 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"…..>
|
|
Адаптации растений и животных к жизни в горах: Большое значение для жизни организмов в горах имеют степень расчленения, крутизна и экспозиционные различия склонов...
Биохимия спиртового брожения: Основу технологии получения пива составляет спиртовое брожение, - при котором сахар превращается...
История развития пистолетов-пулеметов: Предпосылкой для возникновения пистолетов-пулеметов послужила давняя тенденция тяготения винтовок...
Эмиссия газов от очистных сооружений канализации: В последние годы внимание мирового сообщества сосредоточено на экологических проблемах...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!