Изменение прозрачности
В прошлом уроке мы познакомились с анимацией движения объектов svg файла. Сегодня мы попробуем изменить прозрачность отдельных элементов векторной иллюстрации.
SVG анимация: изменение прозрачности элементов
Как обычно, сначала мы нарисуем простенькую иллюстрацию, ну а затем поиграемся с прозрачностью. Мы нарисуем солнце, появляющееся из-за пирамид, а вокруг солнца добавим сияние. В результате мы получим вот такую svg анимацию.
Шаг 1. Подготовка иллюстрации.
После запуска редактора я удалил слой и уменьшил размер документа до A5 в свойствах (shift+ctrl+D).
Далее берем инструмент Рисовать прямоугольники и квадраты и растягиваем прямоугольник по размеру равный A5. В качестве заливки используем линейный градиент, обводки нет.
В нижней части рисунка добавляем произвольный контур, напоминающий холмы или барханы. Совершенно неважно будет ли это похоже на барханы- нас больше интересует svg анимация. Контур создаем кривыми Безье.
Дублируем наш холм (Ctrl+D), отражаем по вертикали и отправляем на задний план (PageDown). Цвет задаем более светлый чем цвет у переднего холма.
Далее добавляем пару более темных участков на холмах. Темные участки проще добавить инструментом карандаш, а затем упростить полученный контур с помощью Ctrl+L. Немного тени в пустыне не помешает.
Пришла очередь пирамид. В настройках инструмента Рисовать звезды и многоугольники задаем число углов 3 и рисуем пару пирамид. Их отправляем на задний план (они должны быть за барханами). Цвет произвольный. Отлично.
Солнце спрячем за пирамиды, цвет заливки белый (или ваш собственный). На рисунке ниже солнце находится там, где оно окажется после появления из-за пирамиды. После этого перетащите солнце за пирамиду вниз.
Рисуем еще одну окружность и размываем ее на процентов 40. После этого устанавливаем непрозрачность в 0.
Все, готово.
Шаг 2. Анимируем изображение.
Откройте редактор xml (shift+ctrl+X) и найдите id окружности и размытой окружности. Там же найдите значение ry для этих элементов. Теперь можно открыть в блокноте наш svg файл и внести необходимые изменения.
<circle r="6" cy="92.251251" cx="57.475945" id="path918" style="opacity:1;fill:#f5f3f4;fill-opacity:1;stroke:none;stroke-width:0.72307694;stroke- linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke- dashoffset:0;stroke-opacity:1" /> <animate fill="freeze" dur="3s" to="67" from="92" begin="1s" attributeName="cy" xlink:href="#path918" />
Проверяем наличие строки xmlns:xlink=»http://www.w3.org/1999/xlink» в описании svg документа. И далее по id ищем солнце и добавляем строки, описывающие svg анимацию движения солнца (это мы делали в первом уроке по svg анимации)
Теперь добавим свечение вокруг солнца. Свечение появиться в тот момент, когда солнце достигнет максимальной высоты на нашем рисунке. За прозрачность отвечает атрибут opacity. Для from мы установим значение 0 (объект не виден), а для to установим 1 (объект полностью виден). Длительность анимации 3 секунды (dur=»3s»), задержка в появлении 2 секунды (начало анимации позже чем для солнца).
<circle style="opacity:0;fill:#f5f3f4;fill-opacity:1;stroke:none;stroke-width:1.72217119;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;filter:url(#filter1221)" id="circle920" cx="57.475945" cy="67" r="17" /> <animate fill="freeze" dur="3s" to="1" from="0" begin="2s" attributeName="opacity" xlink:href="#circle920" />
После всех изменений сохраняем документ и проверяем работу- любуемся солнцем над пирамидами.
Продолжение следует