Домой / Для сайта / Графическая анимация SVG
Графическая анимация SVG

Графическая анимация 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 файлы на которые вы можете найти здесь:

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

Чертежная анимация SVG

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

Чертежная анимация SVG

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

Чертежная анимация SVG

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

Демо Исходники

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

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


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

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.83 ( 2 голосов )
100

Оставить комментарий

Ваш email не будет опубликован.

*