SVG-анимация

Анимация svg-фигур

Тэг svg позволяет не только рисовать в HTML, но и создавать анимированные (движущиеся) рисунки.
Делать такое гораздо сложнее, чем прописать код для обычной, неподвижной фигуры.

Чтобы подробнее изучить анимацию, собрал много нужной информации по данной теме в интернете.

Для полноценного обучения, из собранных мною материалов сделал справочник - 75-ти страничную фотокнигу.

Справочник основ svg-анимации здесь:

Сделал его из скриншотов, и он содержит ВСЮ необходимую информацию для изучения основ анимации svg-фигур.

Результаты занятий и тренировок по этому справочнику я и разместил далее на этой странице, а самое интересное в них то, что они сделаны БЕЗ использования скриптов!  Только HTML + CSS!   И часто - лишь на одном HTML!

Примеры svg-анимации

Сначала показываю несколько интересных примеров svg-анимации, а после них объясняю, с помощью каких тэгов и атрибутов это было сделано.   смотреть сразу:

Плавная анимация логотипа

Самый сложный svg-рисунок с анимацией, но он же и самый интересный! Сделан на HTML + CSS, причём, большая часть кода анимации прописана в CSS.

* * *

Свечение (расходящиеся волны)

Тоже довольно сложная svg-анимация. Сделана только на HTML.
Состоит из 6-ти тэгов <path>, в которых по 2 тэга <animate> в каждом, и из 36-ти тэгов <use>, разбитых на 6 групп.

* * *

Планета и спутник

Поначалу этот пример анимации я сделал из 2-ух частей: CSS и HTML, но позже убрал отсюда весь CSS. Код стал меньше, но тем не менее - работает!

Кстати!  Здесь использовал другой тэг анимации.

Это гораздо менее "могущественный", но значительно более простой для изучения тэг <animateTransform></animateTransform> (это самостоятельный тэг).

Специально сделал "планету" двухцветной, т.к. её svg-код цвета прописывается сразу в 2-ух тэгах: <svg> и <circle>.

* * *

Анимация по заданной траектории

Шар движется по прописанному в коде svg маршруту.
И здесь самостоятельный тэг движения <animateMotion></animateMotion>, и его вспомогательный, т.е. его внутренний тэг <mpath></mpath>, в атрибуте ссылки xlink:href="#motionPath" которого, указывается на заданный путь движения.

Пути движения обычно задаются в тэгах <path></path>.   Именно на него и ссылается упомянутый внутренний тэг.
Сам же он прописывается в самом конце, перед закрывающим тэгом </animateMotion>.

* * *

Мячик

Эту несложную анимацию сделал так, чтобы можно было "гонять мячик" по отведённому полю, кликнув по нему.
Прописал "мячу": прыгать 3 раза после клика, применив атрибут repeatCount="3".

Если же использовать атрибут: fill="always", то "мяч" будет прыгать 1 раз после клика.

Прописав в коде сразу 2 названных атрибута, выполняться станет только 1 из них. Более приоритетный - repeatCount (счётчик повторений).

* * *

Анимация двух фигур

Этот пример svg-анимации сделал с помощью 2-ух независимых тэгов <animate>, в каждом из которых прописал свой анимационный код.

Для её запуска нужно сперва кликнуть по кругу, чтобы он стал анимировать, а следом за ним (с небольшой задержкой) двинется и квадрат.
Выполнив предписанную им анимацию, они дружно "уедут" из области просмотра.

Для повторного просмотра, страницу нужно перезагрузить.

* * *

Анимация Translate-трансформации

Здесь, хоть он и довольно простой, решил показать ещё один пример анимации, созданной с помощью тэга <animateTransform></animateTransform>, о котором писал ранее.   вспомнить:

А на этом примере легко понять принцип создания svg-анимаций!

Используя названный тэг, прописал в коде анимации:
За 2 секунды ("dur") передвинуть квадрат из его начального состояния ("from") в конечное состояние ("to").
Анимацию при загрузке страницы начать сразу (begin="0s"), и продолжать бесконечно(repeatCount="indefinite").

SVG-фигура, в данном случае квадрат, должна иметь открывающий и закрывающий теги, то есть: <rect></rect>.
Тэг <animateTransform> должен находиться между этих двух тегов. Пример ниже.

* * *

* * *

Теперь немного подробнее о том, как были созданы, показанные на этой странице примеры svg-анимаций.

Создание svg-анимации

За создание анимации отвечает внутренний тэг svg <animate></animate> и целый ряд его собственных, специальных внутренних тэгов и атрибутов.

Внутри тэга animate комментарии не писать!

Далее указал его главные атрибуты.

И их все нужно обязательно(!) задать, чтобы анимация работала.

Создание анимации включает в себя указание 5-ти обязательных атрибутов и 2-ух по необходимости.

Обязательные атрибуты анимации

• Прописать имя трансформации: attributeName="какой атрибут трансформируется".
• Указать координаты начального состояния трансформации: from - атрибут.
• Задать координаты конечной точки трансформации: to - атрибут.
• Прописать временное начало (сразу или с задержкой) трансформации: begin - атрибут.
• Установить время dur (т.е. скорость) для переходов анимации от начального from к конечному to.
• **Можно задать количество: repeatCount - сколько раз анимировать.
• **Можно прописать поведение анимации: fill - возвращаться в исходное, или отработать и всё.

Атрибут "fill" в анимации - это НЕ то же самое(!), что его "тёзка" в кодах svg-фигур.

В последнем примере есть ещё один обязательный атрибут, указывающий тип трансформации: type="translate". Но! Он нужен лишь для анимаций именно с тэгом <animateTransform>.   Использовал его в этом примере. вот он:

О значениях некоторых атрибутов анимации

Часто устанавливают - repeatCount="indefinite", т.е. БЕСКОНЕЧНО. А если НЕ прописывать этот атрибут, тогда анимирует только 1 раз. Поставив ЦИФРУ - укажем количество анимаций. Выполнит - остановится!

* * *

Если атрибуту begin задано значение, например, "0s", то оно запускает анимацию сразу же, как только страница загрузилась.

Можно поставить этому атрибуту значение "click", что скажет фигуре начать двигаться, когда её кликнули.

Также можно задавать этому атрибуту значения времени.

Например, желая отсрочить анимацию, нужно прописать положительные значения. Скажем, begin="5s" запустит анимацию через пять секунд после загрузки страницы.

Еще более интересная возможность begin — прописать ему значение "click + 5s", чтобы запустить анимацию через пять секунд после клика!

Более того! Можно использовать разные временные величины.

Можно прописать счётчик времени таким образом - минуты:секунды, т.е. "01:05", что запустит анимацию через 1 минуту 5 секунд после загрузки страницы.

И это ещё не всё!

Ещё можно этому атрибуту задать комбинированное значение "click + 01:30" - запустит её через полторы минуты после клика.

Можно ли таким же образом: "click + 01:01:30" указать ещё и часы??  Честно говоря, пока не проверял. Уж очень долго ждать результата.
Да, по большому-то счёту, это и не важно! Кто его увидит с такой отсрочкой запуска?

А вот такая возможность - очень даже пригодится!

Можно прописать начало анимации одной фигуры в зависимости от другой.

Для этого достаточно в коде сделать запись типа - begin="circ-anim.begin + 1s", что запустит анимацию второй фигуры через 1 секунду после начала анимации первой.

Пример работы подобного кода здесь:

А если бы в том же самом примере я бы прописал begin="circ-anim.end + 1s", тогда анимация второй фигуры началась бы через 1 секунду после конца анимации первой.

Кстати!  Можно давать пробелы до и после знака +, можно нет. Работает и так, и так!

Короче, интересных возможностей у этого атрибута - более чем достаточно!

* * *

Значения трибута fill тоже позволяют создавать любопытные виды анимаций. Прописав ему такое значение: fill="freeze", скажем браузеру, чтобы он показывал до завершения, а закончив, убирал её результаты из области просмотра.

Пример анимации с такими значениями атрибутов в коде здесь:

А если написать так: fill="remove", тогда браузер, закончив анимацию, вернёт всё в исходное состояние. Можно снова её запускать!

Для наглядности, я снова прописал показанный пример анимации двух фигур, НО(!) уже задав их атрибутам fill значения "remove".

Всё то же самое. Для запуска анимации, нужно кликнуть по зелёному кругу.

Анимация двух фигур №2

Просмотрев оба почти одинаковых примера, разница будет видна сразу! Если в первом примере фигуры "уехали" из области просмотра, то здесь, отработав, они вернулись в исходное состояние.

По умолчанию (если не использовать этот атрибут вообще) происходит именно так.

Очень важно!  Прописывая одинаковые коды, необходимо задать в них разные идентификаторы!

* * *

Противоречия в атрибутах

Иногда значения атрибутов могут конфликтовать, т.е. либо одно из них будет игнорироваться браузером (не станет выполняться), либо (что вообще-то интересно) они будут накладываться друг на друга.

Если в последнем примере анимации прописать одновременно: fill="freeze" и ещё repeatCount="indefinite", то браузер проигнорирует fill="freeze", и будет, как ни в чём не бывало, продолжать анимацию.

Ещё раз, чтобы всё было понятно, показываю тот же самый пример с двумя фигурами.
Аналогично. Для запуска - кликнуть по кругу.

Анимация двух фигур №3

Для её остановки, страницу нужно перезагрузить.

А вот, если в коде показанного примера анимации, атрибуту repeatCount задать значение НЕ "indefinite" (не определено, т.е. БЕСКОНЕЧНО), а поставить цифру, то он, честно отработав указанное количество раз, "уедет" из поля обзора, как это происходит в самом первом примере.   вспомнить:

Подобное поведение означает, что в этом случае браузер уже НЕ игнорирует ни один из прописанных атрибутов.

Короче, всё нужно проверять ... ... ... !

Много дополнительной интересной и подробной информации о разных способах создания svg-анимации находится здесь:

Нижняя синяя стрелка вернёт в главный раздел "Рисование в HTML", а верхний мини-навигатор даст посетить другие страницы, тесно связанные с этой темой.

ВВЕРХ