SVG объекты: преобразование

SVG объекты: преобразование

От автора: SVG обладает поистине уникальными методами перемещения и манипуляции объектами в области веб-анимации. Возможно, самым зрелищным из них является «морфинг» — способность перемещать и плавно менять форму объектов.

Настройка

Правила нативного морфинга предельно просты: объект, в который требуется преобразовать исходный элемент, должен содержать такое же количество вершин. Речь не идет о том же самом типе вершин, тип может быть другим, однако: вполне можно сделать из кривой Безье угол, к примеру. Наверное, самым простым примером будет неправильный многоугольник, что-то типа того:

Чтобы не писать код вручную, такой же многоугольник можно запросто создать в Adobe Illustrator, сохранив файл в формате SVG:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Вершины объекта будут перемещаться к новым целевым точкам, изменяю тем самым форму. Для этого мы воспользуемся тегом <animate> спецификации SMIL. Сейчас легче всего скопировать объект из иллюстратора и вставить его по новой, почистив и добавив в код что требуется. Получиться должно следующее:

И мы получаем:

Стоит уделить немного внимания следующим вещам:

Тег <polygon> был одиночным (<polygon points=»…» />), а стал парным, внутри него находится <animate>.

Dur это продолжительность анимации, как долго объект переходит из одного состояния в другое.

repeatCount=»indefinite» – SMIL эквивалент бесконечной анимации на CSS.

Анимация по ближайшим точкам

В SVG по умолчанию двигаются только сравниваемые между собой точки. В иллюстраторе, двигая вершины объекта по часовой стрелке, создается ощущение вращения элемента:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

На выходе получаем:

Более сложные преобразования: Скрытие вершин

В случаях, когда необходимо осуществить плавный переход двух совершенно разных объектов, некоторые из точек прячутся. К примеру, при превращении звезды в круг, легче сначала построить круг и добавить к нему дополнительные вершины:

Круг подготовлен для превращения в другой объект, скрытые точки видны

Дополнительные точки на поверхности круга можно переместить и получить форму звезды.

Удар по морфинг анимации

Недавно команда разработчиков Chrome объявила о планах исключения SMIL из своего браузера в пользу других технологий, таких как Web Animation API и CSS анимации. Это не значит, что SMIL будет удален из браузера, но Google советует разработчикам использовать другие технологии. К сожалению, полноценно пока что морфинг заменить просто нечем. Однако недавно анонсированный MorphSVG, наверное, может решить эту проблему.

Морфинг в CSS

В CSS точно можно превратить прямоугольник в эллипс, изменяя свойство border-radius. К примеру, у нас есть квадрат:

И анимируем его:

Можно варьировать анимацию для сглаживания отдельных углов. Основная загвоздка в том, что такой подход применим только к простым прямоугольникам и эллипсам, в отличие от сложных и произвольных форм в SVG.

Заключение

Мне очень нравится SVG морфинг, так как он возвращается к истокам Flash анимации, вобрав все лучшие черты. Но это не единственный способ применения данного типа анимации. О других способах я расскажу в следующей статье.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Курс по HTML5: основы

Изучите HTML5 с нуля!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree