Взаимодействие последовательных и параллельных анимаций SVG

Порою хочется добавить на свой сайт красивую и сложную анимацию, реализующую какой-то образ, сценку. Мне попалась эта красивая картинка юной парижанки, которая отправилась совершать shopping,- и пусть весь мир вокруг подождёт.

Для реализации анимации с помощью smil нужен файл svg. Нужно либо нарисовать его в векторном редакторе, либо найти готовый. Я взял готовый файл. Сценарий анимации заключается в последовательном прорисовывании предметов окружения девушки и параллельно самой девушки. Чтобы найти фрагменты кода в огромном файле, которые отвечают за определенный предмет можно воспользоваться простым приемом: в формуле патча(path) подставить “1” перед командой M(moveto) и сразу будет видно – какой фрагмент изображения исчезнет.

В нашем случае исчезла Эйфелева башня. Присваиваем этому патчу id=”Eiffel”
После присвоения “id” убираем единичку перед “M”
Точно также присваиваем уникальные идентификаторы остальным патчам. Старайтесь присваивать смысловые имена, чтобы потом легче было ориентироваться. Для уменьшения количества патчей объединяем те из них, которые имеют одинаковый цвет.

Анимация фрагмента изображения

icon heart-break


Вся анимация будет реализована на технике рисования контуров предметов с последующим заполнением цветом.
Как реализуется данная техника рисования подробно изложено в статье: Анимация рисования линии. Формула условия выполнения анимации закраски цветом после завершения рисования контура, следующая: begin = “EiffelStroke.end” Ниже приведен полный код команд анимации рисования и закраски.

Обратите внимание на присвоение названий уникальных идентификаторов патчей и анимаций:
Если для “id” патча изображения “Эйфелевой башни” присваивается наименование,- <path id=”Eiffel”, то для анимации рисования линий будет присвоено составное имя,- <path id=”EiffelStroke”
Для закраски изображения – <path id=”EiffelFill”

Алгоритм последовательных и параллельных анимаций

Допустим вы решили сделать следующую последовательность выполнения анимаций:
1. Эйфелевая башня ➔ 2. голова девушки ➔ 3. тело девушки ➔ 4. кофточка ➔
5. юбка
id=”Eiffel” ➔ 2. id=”Head” ➔ 3. id=”BodyWoman” ➔ 4. id=”Blouse”
5. id=”Skirt”
Последовательность выполнения анимаций словами звучит так: после окончания выполнения анимации эйфелевой башни запускается анимация прорисовки головы девушки.
2. Команда запуска этой анимации begin = “EiffelFill.end
3. Команда запуска анимации тела девушки начинается после завершения прорисовки головы девушки – begin = “HeadStroke.end”
итак далее по составленной последовательности выполнения анимаций.

Параллельно можно запускать другие анимации, например вместе с анимацией головы девушки запускать параллельно анимацию прорисовки пуделя. Другими словами, команда запуска для этих анимаций будет общей: begin = “EiffelFill.end”

В любой момент вы можете изменить, по своему вкусу, порядок выполнения анимаций. Для этого достаточно изменить порядок выполнения команд begin=”…end” запуска анимаций.
Весь код анимации очень большой, поэтому вынесен на отдельную страницу.

⇚ Анимация семейства улиток

Добавить комментарий