SMIL анимации для SVG

В предыдущей статье мы рассказывали о том, как анимировать SVG-графику с помощью только CSS кода. Существует еще один метод, который позволяет сделать практически то же самое прямо в коде HTML — это SMIL (Synchronized Multimedia Integration Language). Поскольку он также имеет в своей основе XML-разметку, задавать все преобразования элементов SVG можно в одном файле, что удобнее и быстрее.

В качестве примера для этой статьи возьмем простой схематический рисунок зонта в закрытом и открытом состоянии:

Как видно из кода, различаются они только значениями внутри пути с id=«umbrella». Соответственно, работать мы будем только с этой частью рисунка. Мы хотим, чтобы зонт плавно открывался и закрывался подобно тому, как это происходит с использованием плагина MorphSVG. С той лишь разницей, что мы не будем использовать вообще никаких плагинов.

Зонт нарисован чистым SVG кодом (можете прочитать статью о том, как это делается) и заливка «купола» имеет одинаковое количество узлов в обоих состояниях — это важно для правильной работы анимации.

SMIL предлагает нам замечательный тег <animate>, внутри которого мы можем задать все нужные атрибуты. В нашем случае меняется атрибут «d», то есть набор измерений (values). Здесь же задаем длительность анимации (dur) , количество повторов (repeatCount), время начала или действие, при котором будет запускаться анимация (begin). В нашем случае запуск анимации будет происходить при нажатии на другой объект с id=«reload». Соответственно, код будет выглядеть так:

<animate begin="reload.click" dur="2s" repeatCount="1" attributeName="d" values="M 50 10 40 80 Q 50 85 60 80; M 50 10 0 25 Q 50 35 100 25; M 50 10 40 80 Q 50 85 60 80"/>

Внутри параметра values мы видим три строки — это три состояния заливки: исходное, конечное и вновь исходное. Можно также добавить промежуточные заливки или убрать возврат к исходному положению, чтобы зонт оставался в раскрытом состоянии. Если же мы хотим, чтобы анимация происходила постоянно, задаем значение repeatCount=«indefinite» — именно indefinite, а не просто infinite, как в css.

Что получается в конечном итоге:

See the Pen
Opening umbrella SMIL animation by Alexander Webmassa (@Webmassa)
on CodePen.

Как видите, в данном примере у нас также присутствует вращение другого объекта — сделать такую анимацию еще проще. Нужно лишь задать ей тип type=«rotate» и точное положение точки, вокруг которой будет происходить вращение (в нашем случае x=100, y=76). Цифры 0 и 360 внутри атрибутов from и to означают полный круг. Запуск будет происходить по клику на сам же объект. Полностью же код этой анимации выглядит так:

<animateTransform attributeName="transform" type="rotate" from="0 100 76" to="360 100 76" dur="2s" repeatCount="1" begin="reload.click"/>

Разумеется, это не все возможности SMIL, но надеемся, что эта статья была полезной для оценки возможностей этого языка для SVG-анимаций и понимания основ.

Полную спецификацию по анимациям SMIL 3.0 вы можете прочесть на сайте W3C.