Анимация движения

Поделиться

В этом уроке мы заглянем внутрь svg файла и познакомимся с анимацией движения объектов. Использовать будем SMIL анимацию.

Подробно познакомиться с SMIL 3.0 можно на сайте.

Пример простейшей SVG анимации (SMIL)

В этом уроке мы будем использовать только конструкцию <animate …/>, а вот <animateTransform …./>  рассмотрим позже.

Двигать объекты на пустом экране скучно, поэтому давайте создадим простую иллюстрацию и на ней потренируемся. Рисунок совы на фоне луны ночью как раз подойдет. Результат получится такой.

SMIL анимация не работает в MS EDGE (увы). Работа проверялась в Firefox и Chrome.

Шаг 1. Рисуем иллюстрацию для svg анимации

Итак, запускайте редактор и задайте в свойствах документа альбомную ориентацию (shift+ctrl+D). Начнем рисовать с неба. Нарисуйте прямоугольник и задайте любой градиент, подойдет как радиальный так и линейный.
В качестве цвета можно выбрать любой темно-синий цвет, все-таки у нас ночь.

небо вектор

В нижней части рисунка добавьте прямоугольник. Он должен занимать менее половины рисунка. Верхнюю сторону прямоугольника сделайте в виде дуги. Для этого оконтуриваем объект Контур-оконтурить объект.

После этого достаточно потянуть мышку вверх и мы получим дугу. Таким образом мы получили холм.

небо ночью вектор

Звезды получить проще всего. Рисуем несколько кругов белого цвета и дублируем необходимое количество раз.

небо, звезды вектор

Для создания изображения тумана рисуем несколько кругов, накладываем их друг на друга, выделяем и применяем операцию Сумма Ctrl+. Для тумана лучше задать радиальный градиент.

туман вектор

Полученное облако дублируем пару раз, изменяем размер и отражаем по горизонтали. Затем размещаем за холмом.

подготовка иллюстрации для SVG анимации

С помощью инструмента кривые Безье рисуем контур произвольного дерева и задаем заливку черным цветом (дерево можно создать и с помощью векторизации растрового изображения реального дерева).

дерево для кладбища

Далее сова. Нарисуйте контур совы и задайте заливку цветом чуть более светлым чем небо. Сова должна быть едва видна. Контур совы можно нарисовать из пары эллипсов. После оконтуривания эллипсов придаем им нужную форму.

контур совы

Вот что у меня получилось.

подготовка иллюстрации SVG анимации

Последний объект это Луна. Здесь все просто. Рисуем круг белого цвета.

подготовка иллюстрации SVG анимации

И с помощью Page Down опускаем его за туман.

подготовка иллюстрации SVG анимации

Все, иллюстрация готова. Можно заняться анимацией.

Шаг 2. Анимация луны

Для создания svg анимации в документе необходимо указать тег <animate …>, который анимирует почти любые атрибуты. В коде необходимо указать целевой элемент. Как это сделать показано ниже.

Для создания анимации предварительно необходимо выяснить id окружности. Наша луна будет подниматься вверх пока не окажется за совой, освещая ее сзади. Для это открываем окно объектов Объект- объекты. Далее выделяем наш белый круг и в панели объектов находим его id. В моем случае это circle1327.

панель объектов в inkscape

Затем выясняем координаты центра окружности. Для этого открываем окно xml редактора, находим по id нашу окружность (левое окно) и в правом окне находим cx и cy. Скорее всего числа будут нецелыми. Лучше изменить значения на целые- так удобнее.

xml редактор в inkscape

Теперь сохраняем свою работу как простой svg документ- Файл- сохранить файл. Тип файла- простой svg.

Далее открываем наш файл в блокноте и добавляем в начало svg документа указание на использование пространства имен (возможно в safari не сработает)

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg    xmlns:dc="http://purl.org/dc/elements/1.1/"    xmlns:cc="http://creativecommons.org/ns#"    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"    xmlns:svg="http://www.w3.org/2000/svg"    xmlns="http://www.w3.org/2000/svg"    xmlns:xlink="http://www.w3.org/1999/xlink"    id="svg8"    version="1.1"    viewBox="0 0 297 210"    height="210mm"    width="297mm">

Нужная строка (8) выделена.

Теперь ищем по id нашу окружность. Для этого воспользуйтесь поиском в блокноте

<circle      r="22.623096"      cy="151"      cx="64"      id="circle1327" .......

Отлично , осталось добавить после тега окружности следующую конструкцию.

<animate      fill="freeze"      dur="4s"      to="50"      from="139"      begin="1s"      attributeName="cy"      xlink:href="#circle1327" /> <animate      fill="freeze"      dur="4s"      to="150"      from="64"      begin="1s"      attributeName="cx"      xlink:href="#circle1327" />

Это описание анимации svg графики. Небольшой комментарий

Первая строка (xlink …) связывает анимацию с объектом по его id. В последующих строках задается:

  • имя изменяемой величины (attributeName),
  • продолжительность анимации (dur),
  • начальное и конечное значение величины (from — to),
  • условие начала анимации (в моем случае через 1 секунду begin=1s)
  • в каком состоянии должен находится объект после окончания анимации (fill=»freeze» «заморозить» состояние)

Конструкцию animate добавляем для двух анимируемых атрибутов- отдельно для cx и отдельно для cy. Все, готово, осталось посмотреть результат.

Продолжение следует.

Поделиться