1. Вращение пятиугольника
2. Увеличение размеров пятиугольника
3. Увеличение размеров с одновременным вращением фигуры
4. Скачать примеры анимации

В статье – Определение центра вращения фигур рассматривался вопрос, как математически определить центр вращения, имея в наличии готовый файл *.SVG.
Конечно, можно попытаться подобрать вручную координаты центра вращения фигуры, но это будет трудоёмко и неточно, а в результате при вращении фигуры будет “биение по центру”.

Для анимации вращения многоугольника будем использовать команду – “rotate” с атрибутами from=”0 38.6 63.46″ и to=”360 38.6 63.46″ – первая цифра начальный и конечный угол вращения соответственно в обоих атрибутах, вторая и третья цифры – координаты “x” и “y” цетра вращения.

begin=”click” – начало анимации после щелчка мышки по фигуре.
end=”mouseout+0.5s” – окончание анимации через полсекунды при уходе курсора с периметра фигуры.
repeatCount=”indefinite” – цикл анимации повторяется бесконечно, если не происходит других действий, например – движение курсора за пределы фигуры.
restart=”whenNotActive” – пока анимация не закончилась, невозможно запустить её вновь.

Увеличение размеров пятиугольника происходит после клика мышки.
type=”scale” – тип трансформации фигуры – увеличение.
values=”1; 2.3; 1″ – последовательно увеличивается с одинарного размера до двухкратного и затем уменьшение до прежнего размера.
repeatCount=”2″ – два цикла повторения анимации.
dur=”3s” – продолжительности анимации -3 секунды.

Более сложный пример анимации. Блок анимации вращения <g id=”an2″> … </g> вкладывается в блок анимации масштабирования <g id=”an1″> … </g> .
В роли блоков анимации выступают теги группы.
Структурная схема анимации

В блок вращения id=”an2″ входит path, отвечающий за отрисовку шестиугольника и сама команда анимации … type=”rotate”, которая вращает всё содержимое группы. Внешняя группа анимации – id=”an1″ осуществляет масштабирование …type=”scale” values=”1;1.5; 2;1.5; 1″ Сначало увеличение, затем возврат к прежним размерам.
Ниже полная версия кода.

Начнем с блока вращения.
from=”0 32.9 33.19″ to=”360 32.9 33.19″ – полный круг от 0 до 360 градусов
begin=”an1.click” – начало анимации при клике по любому элементу внешней либо внутренней группы анимации.
Обратите внимание, что шестиугольник вращается и увеличивается, так как он входит во внутреннюю группу вращения, но окружности только увеличивается, так как они находятся вне группы вращения.
dur=”1.5s” – Время одного цикла вращения на один оборот, но вся анимации будет происходить дольше, так как повторение установлено на бесконечность, см. ниже
repeatCount=”indefinite” – анимация будет повторяться пока не вступят в силу другие условия
end=”an1.mouseout+6s” – окончание анимации через 6 сек. после ухода курсора с фигуры вращения. Попробуйте не уводить курсор мышки с шестиугольника, и вращение будет продолжаться бесконечно.
Блок масштабирования векторной фигуры.
type=”scale”
values=”1;1.5; 2;1.5; 1″ – увеличение, затем умеьшение размеров, согласно цепочке цифр
begin=”an1.click” – начало анимации при клике на элементе внешней группы.
Остальные параметры те же, как в группе id=”an2″

⇚ Определение центра вращения фигур
Анимация рисования линии ⇛