Анимация движения
В этом уроке мы заглянем внутрь svg файла и познакомимся с анимацией движения объектов. Использовать будем SMIL анимацию.
Подробно познакомиться с SMIL 3.0 можно на сайте.
Пример простейшей SVG анимации (SMIL)
В этом уроке мы будем использовать только конструкцию <animate …/>, а вот <animateTransform …./> рассмотрим позже.
Двигать объекты на пустом экране скучно, поэтому давайте создадим простую иллюстрацию и на ней потренируемся. Рисунок совы на фоне луны ночью как раз подойдет. Результат получится такой.
SMIL анимация не работает в MS EDGE (увы). Работа проверялась в Firefox и Chrome.
Шаг 1. Рисуем иллюстрацию для svg анимации
Итак, запускайте редактор и задайте в свойствах документа альбомную ориентацию (shift+ctrl+D). Начнем рисовать с неба. Нарисуйте прямоугольник и задайте любой градиент, подойдет как радиальный так и линейный.
В качестве цвета можно выбрать любой темно-синий цвет, все-таки у нас ночь.
В нижней части рисунка добавьте прямоугольник. Он должен занимать менее половины рисунка. Верхнюю сторону прямоугольника сделайте в виде дуги. Для этого оконтуриваем объект Контур-оконтурить объект.
После этого достаточно потянуть мышку вверх и мы получим дугу. Таким образом мы получили холм.
Звезды получить проще всего. Рисуем несколько кругов белого цвета и дублируем необходимое количество раз.
Для создания изображения тумана рисуем несколько кругов, накладываем их друг на друга, выделяем и применяем операцию Сумма Ctrl+. Для тумана лучше задать радиальный градиент.
Полученное облако дублируем пару раз, изменяем размер и отражаем по горизонтали. Затем размещаем за холмом.
С помощью инструмента кривые Безье рисуем контур произвольного дерева и задаем заливку черным цветом (дерево можно создать и с помощью векторизации растрового изображения реального дерева).
Далее сова. Нарисуйте контур совы и задайте заливку цветом чуть более светлым чем небо. Сова должна быть едва видна. Контур совы можно нарисовать из пары эллипсов. После оконтуривания эллипсов придаем им нужную форму.
Вот что у меня получилось.
Последний объект это Луна. Здесь все просто. Рисуем круг белого цвета.
И с помощью Page Down опускаем его за туман.
Все, иллюстрация готова. Можно заняться анимацией.
Шаг 2. Анимация луны
Для создания svg анимации в документе необходимо указать тег <animate …>, который анимирует почти любые атрибуты. В коде необходимо указать целевой элемент. Как это сделать показано ниже.
Для создания анимации предварительно необходимо выяснить id окружности. Наша луна будет подниматься вверх пока не окажется за совой, освещая ее сзади. Для это открываем окно объектов Объект- объекты. Далее выделяем наш белый круг и в панели объектов находим его id. В моем случае это circle1327.
Затем выясняем координаты центра окружности. Для этого открываем окно xml редактора, находим по id нашу окружность (левое окно) и в правом окне находим cx и cy. Скорее всего числа будут нецелыми. Лучше изменить значения на целые- так удобнее.
Теперь сохраняем свою работу как простой 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. Все, готово, осталось посмотреть результат.