Анимация в SVG осуществляется средствами языка SMIL. Это язык разметки, рекомендованный W3C для описания мультимедийных презентаций. И тут все гораздо интереснее, чем, допустим, в Canvas или в WebGL (где анимация — покадровая), хотя подход довольно необычный: в SVG каждой отдельной геометрической фигуре можно присвоить свои анимационные инструкции, заставить двигаться. Как и SVG, SMIL является простым подмножеством XML.
На практике мультипликация реализуется эффектным и довольно необычным образом. Существует класс ответственных за анимацию объектов, помещаемых прямо внутри фигур, которые надо «оживить». Прежде всего это элемент <animate>. Вот как он работает:
<svg>
<ellipse cx=»280″ cy=»180″ rx=»180″ ry=»40″
Style=»stroke:#55ccff; stroke-width:3; fill: #ffcc22;»> <animate attributeType=»XML» attributeName=»ry» from=»25″ to=»100″ dur=»5s»
RepeatCount=»indefinite» />
</ellipse>
</svg>
Прежде всего выбирается атрибут, который будет изменяться в процессе анимации. Тут у нас это малый радиус эллипса. В теге <animate> мы задаем его тип, затем через s ttributeName указываем имя атрибута и начальное и конечное значения, то есть диапазон, в котором значения атрибута будут меняться.
Параметром repeatCount задается количество циклов анимации, при значении indefinite оно равно бесконечности.
Следующий объект занимается изменением цвета:
<svg>
<ellipse cx=»280″ cy=»180″ rx=»180″ ry=»80″ style=»stroke:#55ccff; stroke-width:3;»>
<animateColor
AttributeName=»fill» from=»red» to=»blue»
Iur=»10s» repeatCount=2 iegin=»2s» iill=»freeze» />
<ellipse
</svg>
В этом примере атрибут dur задает длительность анимационного цикла, begin устанавливает время старта анимации (есть и атрибут end). fill=»freeze» означает то, что по окончании проигрывания значение атрибута fill останется неизменным.
Объект animateMotion реализует движение элемента по заданной траектории. Продемонстрируем его работу, заставив перемещаться небольшой шарик:
<!DOCTYPE html>
<head>
<title>SVG Animation</title>
</head>
<body>
<svg>
<circle cx=”10” cy=”10” r=”10” style=”stroke: #55ccff; stroke-width: 3; fill: #66ff66;”>
<animateMotion
Fath=”M20,160 L160,220 L 220,160 L 160,20 Z”
Dur=”12s”
Fotate=”auto”
RepeatCount=”indefinite”
>
</circle >
</svg>
</body>
Главный параметр тут path — это путь движения, задаваемый теми же командами, какими мы рисовали ломаную линию. Атрибут rotate указан для автоматического поворота объекта вокруг своей оси при движении (правда, для шарика это не очень важно).
Объект animateTransform позволяет анимировать SVG-тратефор-мации, которые мы тут подробно не рассматривали, исключительно из желания не превращать главу в полноценный учебник по SVG. Тут ограничимся небольшим примером:
<svg>
<ellipse cx=”280” cy=”280” rx=”80” ry=”40”
Style=”stroke:#55ccff; stroke-width: 3; fill: #ffcc22; ”> <animateColor
AttributeName=”fill”
From=”red” to=”green”
Dur=”5s” repeatCount=”indefinite” />
<animateTransform attributeName=”transform” fttributeType=”XML” type=”skewY” from=”0” to=”45” begin=”2s” dur=”10s” fill=”freeze”/>
</ellipse>
</svg>
Еще один объект, ответственный за анимацию, — <set> — позволяет изменять анимируемые свойства не плавно, а скачком, но программируемым скачком.
В примере ниже уже использованный нами эллипс через две секунды после отображения «схлопнется» по горизонтали, но еще через две секунды восстановит свои размеры:
<svg>
<ellipse cx=»280″ cy=»180″ rx=»180″ ry=»40″
Style=»stroke:#55ccff; stroke-width:3; fill: #ffcc22; «> <set attributeName=»rx» to =»2″ begin=»2s» dur=»2s»/> </ellipse>
</svg>
Еще одно важное замечание — во всех примерах, здесь приведенных, мы вкладывали объекты, отвечающие за анимацию, внутрь «оживляемых» фигур. Те же действия вполне можно осуществлять, обращаясь к ним по ссылке:
<svg>
<ellipse id =»myEllipse» cx=»280″ cy=»180″ rx=»180″ ry=»40″ /> <animate xlink:href=»#myEllipse» attributeType=»XML» attributeName=»ry» from=»25″ to=»100″ dur=»5s»
RepeatCount=»indefinite» />
</svg>
Как показывает статистика, а самое главное практика – IT специальности не утрачивают своей актуальности, и потребность в квалифицированных кадрах лишь растет. Освоить новую профессию самостоятельно под силу не каждому, потому репатриантам и жителям Израиля стоит обратить свое внимание на данную сферу деятельности, и пройти соответствующие курсы, например программирования на Java, Web, Mobile и т.д. www.tel-ran.com . Упомянутые по ссылке курсы проходят в Израиле. После прохождения данных курсов, с вероятностью 70-100%, вы сможете трудоустроиться в данной области. Остается пожелать успехов в освоении и мастерства в применении приобретенных навыков!
Добавить комментарий