Анимация контуров SVG-фигур с примерами. Эффект «рисования» c помощью stroke-dasharray и stroke-dashoffset.

Скорее всего вы уже не раз видели эффект постепенного контурного рисования SVG-фигур. Такая анимация особенно популярна на лендингах c привязкой к прокрутке страниц. Сморится довольно эффектно. Давайте рассмотрим пример, чтобы понять, что я имею ввиду.

Draw svg stroke demo

Такой эффект достигается при помощи установки нужного значения атрибута stroke-dasharray и плавного изменения атрибута stroke-dashoffset SVG-фигур.

Принцип хорошо описан в статьях:

Плагины для анимирования контуров SVG

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

Все они работают по одному и тому же принципу и отличаются лишь набором опций и возможностей. Мне лично больше всех понравился Vivus. Демо, которое вы видели в начале статьи, сделано с помощью него.

Видео

Видео урок о том, как создать эффект рисования SVG без плагинов, можно найти здесь

Красивые примеры эффекта «рисования» c помощью stroke-dasharray и stroke-dashoffset

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

Знаете красивые примеры с таким эффектом? Оставьте пожалуйста ссылку в комментариях ;)

PDF и версия для печати

Posted on Июнь 1, 2015
by Nedudi Дудин Дмитрий
3 комментария ↓
67 059 views

Отмечено как: animation, lazy-line-painter.js, path, svg, vivus.js, walkway.js, анимация

3 comments on “Анимация контуров SVG-фигур с примерами. Эффект «рисования» c помощью stroke-dasharray и stroke-dashoffset.”

BLRseo:

Июнь 20, 2015 в 23:43

Очень в тему … Спасиб!!!

Ответить
Alexei Zababurin:

Август 20, 2015 в 12:57

Демо-страничка с подобной анимацией и привязкой с scroll

http://hydraulicus.github.io/My_Git/

Ответить
Igor:

Ноябрь 13, 2016 в 0:12

А как Вам удалось заставить это работать в IE ? Поделитесь, пожалуйста секретом :)

Ответить

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

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

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Комментарий

Имя *

E-mail *

Сайт

* Copy This Password *

* Type Or Paste Password Here *