В предыдущих уроках серии мы разбирались использованием векторной графики SVG в HTML. Теперь пришел черед рассмотреть анимацию SVG.
Основы
Анимация SVG выполняется с помощью элемента <animate>:
<svg> <rect width=»200″ height=»200″ fill=»slategrey»> <animate attributeName=»height» from=»0″ to=»200″ dur=»3s»/> </rect> </svg>
Мы добавляем элемент <animate>внутрь элемента <svg>, который будем анимировать. Элемент <animate> содержит следующие атрибуты:
attributeName: здесь определяется атрибут, который будет участвовать в анимации.
from: опциональный атрибут. Определяет стартовое значение, по умолчанию используется текущее значение.
to: данный атрибут определяет направление анимации. В зависимости от заданного в атрибуте attributeName значения результат может различаться. В приведенном примере будет изменяться высота элемента.
dur: определяется длительность анимации. Значение нужно задавать в формате Clock Value Syntax. Например, 02:33 соответствует 2 минутам и 33 секундам, а 3h соответствует 3 часам. Для нашего примера мы определяем длительность анимации в 3 секунды.
То же самое мы проделываем с элементом <circle>, но для него будет анимировать атрибут радиуса (r).
<svg> <circle r=»100″ cx=»100″ cy=»100″ fill=»slategrey»> <animate attributeName=»r» from=»0″ to=»100″ dur=»3s»/> </circle> </svg>
Перемещение элементов
Для перемещения SVG элементов нужно только указать координаты x и y:
<svg> <rect x=»0″ y=»0″ width=»200″ height=»200″ fill=»slategrey»> <animate attributeName=»x» from=»0″ to=»200″ dur=»3s» fill=»freeze»/> </rect> </svg>
В примере мы перемещаем прямоугольник с 0 до 200 за 3 секунды. Также мы добавляем атрибут fill к элементу <animate>. Данный атрибут определяет как анимация будет действовать после завершения. В примере значение freeze вынуждает элемент оставаться там, где завершается анимация.
Также все действует и для элемента <circle>, но для него будем изменять атрибуты cx или cy:
<svg> <circle r=»100″ cx=»100″ cy=»100″ fill=»slategrey»> <animate attributeName=»cy» from=»100″ to=»200″ dur=»3s» fill=»freeze»/> </circle> </svg>
Анимация нескольких атрибутов
Конечно, в элементе <animate> мы можем задавать изменения только для одного атрибута, но самих элементов <animate> мы можем определять несколько. Вот так, например:
<svg> <circle r=»100″ cx=»110″ cy=»110″ fill=»slategrey» stroke=»#000″ stroke-width=»7″> <animate attributeName=»r» from=»0″ to=»100″ dur=»3s»/> <animate attributeName=»stroke-width» from=»0″ to=»10″ dur=»7s»/> </circle> </svg>
Здесь мы анимируем для атрибута для элемента <circle> — радиус и ширину обводки.
Задаем траекторию перемещения
В одном из предыдущих уроков серии мы рассматривали как расположить текст по заданной линии. Также можно задавать анимацию элемента по заданной траектории:
<svg> <defs> <path id=»thepath» fill=»none» stroke=»#000000″ d=»M0.905,0.643c0,0,51.428,73.809,79.047,166.19s68.095,38.572,107.144-18.095 c39.047-56.667,72.381-92.382,113.333-42.381S335.5,178.5,374,200.5s82-18.5,97.5-33.5″/> </defs> <circle r=»15″ cx=»15″ cy=»15″ fill=»slategrey»> </svg>
Траекторию лучше задавать с помощью элемента <defs>, как показано в примере. Чтобы векторный элемент следовал по траектории нужно определить анимацию с помощью элемента <animateMotion> и связать id траектории с элементом <mpath>:
<animateMotion dur=»3s»> <mpath xlink:href=»#thepath»/> </animateMotion>
Трансформации
Мы также можем использовать трансформации scale, translate и rotate для анимаций с помощью элемента <animateTransform>:
<svg> <rect width=»200″ height=»200″ fill=»slategrey»> <animateTransform attributeName=»transform» type=»scale» from=»0″ to=»1″ dur=»3s»/> </rect> </svg>
Трансформации в SVG действуют по тому же принципу, что и в CSS3.
Заключение
С помощью описанных инструментов можно создавать различные эффекты и приложения. Например, такие, которые пока выглядят баловством, но скрывают в себе большой потенциал, особенно в условиях отступления Flash.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/GOd12sZlVjE/lessons.php
Источник: