Графическая анимация SVG

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

SVG наконец становится все более используемым и веселым компонентом сайта. Это мощный инструмент и с помощью SVG есть множество творческих возможностей для интересных эффектов на веб-сайте. Сегодня мы хотели бы поделиться с вами двумя экспериментальными концепция, которые используют анимации очертаний, и которые стали популярными благодаря анимации наPlayStation 4 and Xbox One review sites. Этот технику ввел и растолковал Джейк Арчибальд в своей статье Animated line drawing in SVG, а также изучил Брайан Сьюда в своей статье Animating Vectors with SVG. Для наших экспериментов мы используем его код для анимации очертаний путей.

Итак, какую концепцию мы исследуем? Первый рисования линий анимации, которая исчезает в «реальном» изображении или иллюстрации, как только соответствующая фигура в области просмотра. Это может быть отличным эффектом для любого вида иллюстрации на сайте. Вторая концепция исследует использование SVG анимации для имитации загрузки веб-сайта: части сайта представлены плоскими чертежами очертаний которые анимируются, и как только анимация закончится «реальные» элементы будут показаны. Сама методика реализуется в статическом пути, где мы используем SVG для каждого из элементов которые исчезают. Идеи для схематического представления сайта приходят из awesome Dribbble shot сделанными Chris Bannister.

Красивые иллюстрации устройств сделаны Pixeden,  PSD файлы на которые вы можете найти здесь:

• iPad Air Perspective Mockup
• 3D View iPhone 5s Vector Mockup
• iMac Mockup Template

Вычерченные линейные  SVG чертежи этих иллюстраций были тщательно созданы талантливым Emanuel Serbanoiu. Зайдите на его  Dribbble profile или посетите его сайт.
Первое демо происходит рисования линий анимации с  иллюстрацией fade-in:

Второе демо — рисования линий анимации сайта fade in:

И третий демо, похожее на демо 2, просто анимация и замирание элементов происходит последовательно, но в случайном временном промежутке:

Мы надеемся что вам понравились эффекты и вы найдете в них вдохновение!

Источник урока: http://tympanus.net/codrops/2013/12/30/svg-drawing-animation

Перевел для сайта wordpress-club.com: Александр Овчаренко