Первая страница

Анимация рисования с помощью SVG

разбор примеров
Онлайн: РИСОВАЛКИ | ИГРЫ | РЕЛАКС программы

О технике

SVG - замкнутая вселенная в мире веб. С помощью этой технологии можно мастерить всё - от простых иконок до web-приложений. Остановимся на том, что векторный контур в SVG в виде элемента с координатами пути, можно анимировать таким образом, что этот путь как бы рисуется с нуля. Это выглядит привлекательно. Нажмите кнопку START ниже для просмотра того, чему мы хотим научиться.

START

Таким образом анимировать контур можно силами:

  • Только SVG. В этом случае нам надо заранее знать длину контура.
  • SVG + CSS. В этом случае нам тоже надо заранее знать длину контура.
  • SVG + CSS + JS. В этом случае определить на лету длину контура может помочь Javascript.
  • SVG + JS. В этом случае определить длину контура и запустить анимацию сможет Javascript.

Анимирование контура на чистом SVG

Идея такая. Представляем контур, будь то path или, например, polygon в виде пунктира! Длина одного штриха пунктира должна быть равна длине контура. Также длина разрыва между штрихами должна быть равна длине контура. Анимированию будем подвергать атрибут зазора между штрихами stroke-dashoffset элемента polygon. Изменяя его величину от максимального до нуля, мы будем видеть продвижение штриха, за который отвечает атрибут stroke-dasharray. Для этого у SVG есть элемент animate, который должен быть дочерним для элемента пути. Разберем простой пример:
ReStart <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="150px height="150px" viewBox="0 0 150 150"> <polygon stroke-dashoffset="500" stroke-dasharray="500" fill="none" stroke="#993333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" points="75,11.861 96.201,54.819 143.608,61.708 109.305,95.146 117.402,142.361 75,120.069 32.598,142.361 40.696,95.146 6.392,61.708 53.799,54.819"> <animate attributeName="stroke-dashoffset" begin="1s" repeatCount="5" values="500;0;500" dur="5s"/> </polygon> </svg>
Здесь у элемента animate есть такие атрибуты:

  • attributeName="stroke-dashoffset" - имя атрибута, который анимируется, в нашем случае это stroke-dashoffset - пространство между штрихами пунктира;
  • values="500;0;500" - ключевые кадры - те значения атрибута, которые достигаются в реперных точках, в нашем случае - идет пульсация от 500px до 0 и обратно. В случае, если у нас только два ключевых кадра, то запись можно заменить на такую: from="500" to="0". 500px - это длина всей звезды;
  • begin="1s" - начать анимацию через 1 секунду после загрузки.
  • dur="5s" - продолжительность одного цикла анимации, тут задано 5 секунд;
  • repeatCount="5" - сколько циклов анимации, в нашем случае 5, но можно продолжать до умопомрачения, если задать значение indefinite.

Анимирование контура SVG силами CSS

Анимируем две окружности, запустив их рисование через стили. Для просмотр анимации кликните по кнопке START. Чтобы повторить анимацию кликните по этой же кнопке два раза с секундным интервалом.
START <svg xmlns="http://www.w3.org/2000/svg" width="150px" height="150px" viewBox="0 0 150 150"> <circle class="c1" cx="75" cy="75" r="70" stroke="#339" fill="none" stroke-width="2"/> <circle class="c2" cx="75" cy="75" r="60" stroke="#933" fill="none" stroke-width="2"/> <style> .c1, .c2 { stroke-dasharray:500; stroke-dashoffset:500; animation: draw 4s linear forwards; animation-delay:3s; animation-iteration-count:2; } @keyframes draw{100%{stroke-dashoffset:0;}} </style> </svg>
Здесь задается длина штриха и зазора для обеих окружностей чуть больше, чем есть на самом деле. Анимация с именем draw длится 4s (один цикл) по линейной функции. Начинается анимация через 3 секунды после загрузки SVG. Параметр animation-iteration-count отвечает за количество циклов анимации. Атрибут forwards говорит о том, что после завершения анимации к элементу применяется стиль последнего ключевого кадра.

Анимирование контура SVG с помощью CSS и JS

Анимируем кривую, определив ее длину с помощью Javascript и запустив ее рисование через стили. Для просмотр анимации кликните по кнопке START. Чтобы повторить анимацию кликните по этой же кнопке два раза с секундным интервалом.
START <svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="300px" height="200px" viewBox="0 0 300 200"> <path id="p" stroke="#339" fill="none" stroke-width="5" d="M5,131.097c0,0,4-94,62-82s15,98,66,88 s1-92,44-95S228,71,233,90s30,27,34-0.102"/> <script> // вычисляем длину пути и присваиваем её параметрам window.onload=function(){ var path = document.getElementById('p'); const length = path.getTotalLength(); path.style.strokeDasharray = length; path.style.strokeDashoffset = length; } </script> <style> /* анимируем путь по id */ #p { animation: strokeOffset 2s linear forwards; } @keyframes strokeOffset { to { stroke-dashoffset: 0; } } </style> </svg>
Здесь в Javascript мы ищем элемент пути по id, находим длину пути методом getTotalLength() и присваиваем найденное значения атрибутам штриха и зазора. А саму анимацию запускаем с помощью стилей: в правиле @keyframes задаем ключевые точки для зазора от максимального значения (по умолчанию) до нуля.

Запуск анимации контура SVG с помощью JS

Иногда требуется, чтобы анимация запускалась не автоматически, а по действию пользователя. Довольно хороший способ есть в самом SVG - это для элемента animate поставить атрибут begin="id_element.click", где id_element - это id, например, созданной вами кнопки. Такая анимация будет запускаться по клику на элемент id_element. Но если анимировать надо много путей, то рациональней это сделать в помощью JS, например, так:
START <svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="278px" height="260px" viewBox="-128 0 278 260"> <path id="k1" fill="none" stroke="#333" stroke-width="3" d="M138.097,5.173c-7.571,0.407-17.893,6.74-21.187,10.05l-13.446,13.445l-15.753-1.086c0.934-2.394,1.035-5.348-0.951-7.334 c-2.938-2.937-8.064-1.324-10.186,0.815l-5.433, 5.432l-28.928-1.901L34.2,32.879l47.398, 17.52L57.424,74.574H43.028l-9.371, 9.507 l27.163,6.654l6.655,27.163l9.506-9.372V93.995l24.176-24.174l17.52, 47.534l8.285-8.013l-1.902-28.928l5.434-5.433 c2.138-2.122,3.751-7.249, 0.813-10.186c-1.985-1.986-4.939-1.885-7.333-0.951l-1.087-15.754l13.445-13.446 c4.415-4.414,14.227-21.492, 8.149-27.57C142.952,5.547,140.626,5.038,138.097,5.173z"> <animate attributeName="stroke-dashoffset" begin="0s" repeatCount="1" values="200%;0" fill="freeze" dur="2s"/> </path> <!-- Для упрощения кода остальные пути не указаны, но они есть --> <g id="doA" style="cursor:pointer;"> <rect x="100" y="165" fill="#99f" width="50" height="23"/> <text x="110" y="180" font-family="'Calibri'" font-size="11">START</text> </g> <script> const masks2 = ['k1', 'k2', 'k3', 'k4', 'k5']; window.onload=function(){ masks2.forEach((mask, index, el) => { const id2 = `#${mask}`; var path2 = document.querySelector(id2); const length2 = path2.getTotalLength(); path2.style.strokeDasharray = length2; path2.style.strokeDashoffset = length2; }) } document.getElementById("doA").addEventListener("click", evt => { document.querySelectorAll("animate").forEach(element => { element.beginElement(); }); }); </script> </svg>
Здесь ключевым моментом является цикл по всем элементам animate и запуск этого элемента с помощью метода beginElement(). А до этого в другом цикле JS пробегается по все путям по их id, вычисляет их длины и присваивает эти длины штрихам и зазорам.

Ссылки для ленивых

Для тех кому лень (нет времени) возиться с кодом или тех, кто код просто не понимает, даю наводки, как сделать анимацию линии без лишних умственных затрат:

Vivus Instant - это онлайновый сервис, куда можно загрузить свой SVG-файл и получить на выходе анимированный SVG по методу анимации с помощью CSS и JS.
HelpXplain - программа для создания веб-презентаций. В ней есть функционал, который находится на панели Animation, вызываемой при выделенной фигуре, и называется Outline.


Ещё статьи для вебмастеров, расширяющие технологический кругозор:
Памятка начинающему вебмастеру
Спецсимволы HTML - коды около 2000 дизайнерских иконок
Blumentals WeBuilder - удобнейший редактор кода с предпросмотром
WYSIWYG Web Builder - мощный визуальный конструктор сайтов
Pinegrow - визуальный редактор/конструктор сайтов
Lunacy - для макетирования интернет-страниц
Moodle - практика администратора СДО
MediaWiki - как использовать для ведения и хранения документации
MediaWiki - как скачивать Wiki-страницы в PDF
MediaWiki - как подсвечивать синтаксис программного кода в
TimelineJS - библиотека для хронологических лент
HTTP - коротко о протоколе
OpenAPI - спецификация, визуализация, инструментарий
Camtasia Studio = видеоредактор + видеограббер
Инструменты для создания прототипов интернет-страниц: Axure и ProtoShare
Что нужно знать об электронных платежах вебмастеру интернет-магазина
Индекс цитирования сайта - что это?
Новости
От рекламы не скрыться
Молодому дизайнеру книга
Как стать дизайнером с нуля
Объявление
домой | живопись | графика | компьютерная графика | поделки | юные художники | темы | комментарии | перлы
конкурсы | игры | релакс | рисовалки | учиться рисовать | детские карты Москвы | детские стихи | статьи | видео | поиск | обратная связь