SVG анимация

Исходник с картинками и выделенными заголовками и списками скачать тут https://drive.google.com/open?id=1TGkAaGYSBbk5TPxv68zmuvp_kgberaUr


Анимация SVG, наконец, начинает приобретать заслуженную популярность среди разработчиков сайтов, особенно адаптивных для разных диагоналей экрана. Масштабирование без потери качества, малый объем изображений, и широкие возможности анимации позволяют делать с помощью SVG анимацию и эффекты, ранее доступные только на специализированных устройствах, таких как PlayStation 4 или Xbox One. Для изучения основ обработки SVG и используемых в данном примере программных методов рекомендуется статья «Анимированные линии рисунка в SVG» от Джейка Арчибальда и «Анимация векторов SVG» Брайана Суда. В нашем примере мы будем расширять использованные в статьях коды, поэтому изучите их подробнее.


Итак, что мы попытаемся реализовать в этой статье? Мы будем отрисовывать контуры объектов, с помощью SVG-линий которые затем будут исчезать из соответствующей области просмотра. Такой эффект будет интересным для любых иллюстраций на сайте, что хорошо видно на демопримерах.


Исходные высококачественные изображения устройств Apple для создания исходных SVG контуров взяты в виде исходных файлов PSD с хостинга изображений Pixeden:


iPad Air в перспективе

Векторная 3D модель телефона iPhone 5s

iMac Векторный шаблон iMac Mockup Template


Как вариант анимация SVG по контурам могут использоваться для показа процесса загрузки страницы или части сайта. Функционально это выглядит следующим образом: на экран выводятся статические элементы страницы, которые затем с помощью анимации «обводятся» постепенно исчезающими SVG-контурами, которые определены заранее по готовым шаблонам формата PSD. Первоначальная реализация идеи была сделана художником Крисом Баннистером, и посмотреть ее можно по ссылке на сайте Dribbble.


Все изображения SVG созданы компьютерным художником Emanuel Serbanoiu. Посетите его личный сайт или профиль в социальной сети Dribbble profile и вы найдете множество примером и идей для собственных проектов.


На первом демо показана анимация в виде наплывания растрового изображения с дополнительной фоновой отрисовкой контуров с применением SVG. Эффект хорошо смотрится при презентации товара или загрузке каталога.


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


Третья анимация SVG по схеме работы аналогична предыдущей, но с добавлением элемента случайности в порядок отрисовки и «исчезновений» элементов и контуров.


Надеемся, что наши примеры будут полезны для Вас и станут основой для собственных анимаций!