На этом примере анимации – движение гоночных машинок вдоль пути “path”, разбирается параметр “animateMotion”, который управляет направлением, началом, продолжительностью и окончанием движения.

Создание примера анимации состоит из нескольких этапов:

1. Создание криволинейного пути
2. Создание объектов движения
3. Присоединение объектов движения к пути
4. Создание элементов управления
5. Оформление ландшафта

Путь можно создать вручную, но это довольно трудоёмкая операция, для упрощения воспользуемся любым векторным редактором, например – Inkscape. В редакторе рисуем путь с помощью инструмента – “Рисовать кривые Безье и прямые линии”. Путь должен быть замкнутым, если планируете неоднократное движение по контуру. Далее сохраняем файл в формате – *.svg .
Код получился очень избыточным. Для оптимизации кода загрузим файл в редактор SVG Editor. Далее необходимо нажать кнопку “Load”. В новом открывшемся окне нужно отметить все чекбоксы, как показано на рисунке ниже.

В разделах “Attributes” и “Styles” я выбрал значение “Decimal places” равное нулю, то есть в отредактированом файле будет ноль значащих цифр после запятой, а не “5” как в файле Inkscape. Далее на этой же вкладке нажимаем “Download”. Видим, что файл хорошо сократился в размере. Открываем этот файл любым текстовым редактором, находим строку path d=”M.. Присваиваем этому пути индификационный номер или уникальное имя – <path id=”t_path”. К этому “id=” будут привязаны движущиеся объекты.

Мы задумали, что по криволинейному пути будут двигаться машинки. Но в принципе это может быть любой объект: самолет в небе или баба-яга на метле, всё зависит от вашей фантазии. В случае летающих объектов траекторию пути в небе можно скрыть – style=”fill:none; stroke:none”/> . Для нашего примера находим машинку в векторных клип-артах.

Для уменьшения картинки в формате SVG есть несколько приёмов. На мой взгляд самый удобный способ – это непосредственное масштабирование внутри файла *.svg. Для этого откройте файл и, после объявления формата “SVG”, создайте новую группу <g>, которая охватит весь код файла до заключающего тега </g> <svg> , с присвоением группе уникального индификатора – <g id=”car-dodger” transform=”scale(0.15)”>. Масштаб уменьшения подберите, изменяя дробную часть команды scale(0.15). Пример кода смотри ниже.

Используем доработанный готовый файл для изображения машинки в другом файле с анимацией. Сделаем это с помощью парного тега <image>..</image> Внутри этих тегов командой xlink:href=”car-dodger.svg” открывается изображение машинки из другого файла см. код ниже начиная со строки 19.

Внутри парных тегов <animateMotion> … </animateMotion>, которые реализуют анимацию, с помощью команды <mpath xlink:href=”#t_path” /> происходит привязка объекта движения к криволинейному пути с иденфикатором “#t_path”.
begin=”race_cars.mouseover” – начало анимации при наведении курсора на объект с иденфикатором race_cars.
dur=”12s” repeatCount=”3″ – анимация продолжается 12сек., повторяется 3 раза.
rotate=”auto” – ориентация объекта движения относительно пути.
restart=”whenNotActive” – анимация не запустится повторно, пока она не закончится.
fill=”freeze” – по окончании движения объект останется на месте, “заморозится”.
Для начала анимации наведите курсор на картинку.

Создадим две кнопки: одна будет запускать анимацию “Start” при наведении курсора мышки, вторая “Stop” – останавливать, и добавим еще две машинки.

Команда на запуск анимации – begin=”startButton.mouseover”
Команда остановки анимации – end=”stopButton.mouseover”

Для придания большей реалистичности движению машинок добавим к первому пути второй путь и разнесем машинки по этим путям. Снова открываем в Inkscape файл path.svg. Дублируем путь и сдвигаем копию вправо и вниз на несколько пикселей (18px). Присваиваем этому пути иденфикатор <path id=”t_path2″. Добавляем еще машинок, делим их по количеству на две части и прикрепляем их соответственно к разным путям.

Опять обращаемся к векторным клипартам. Находим подходящие картинки домов, пальм, кустов. Оптимизируем в SVG Editor, масштабируем и помещаем эти “svg” файлы в ту же директорию, где находится наш файл. Открываем его и в секции <defs> размещаем ссылки на файлы, участвующие в оформлении. Присваиваем им иденфикационные номера: id=”palms”, id=”build”, id=”grass”. Изображения пальм и других оформительских элементов пока не видно, но далее мы будем ссылаться на них не один раз.

Размещаем оформительские элементы <use xlink:href=”” , указывая их координаты и масштабируя при необходимости.

Добавление звука к SVG файлам ⇛