SVG - замкнутая вселенная в мире веб. С помощью этой технологии можно мастерить всё - от простых иконок до web-приложений. Остановимся на том, что векторный контур в SVG в виде элемента с координатами пути, можно анимировать таким образом, что этот путь как бы рисуется с нуля. Это выглядит привлекательно. Нажмите кнопку START ниже для просмотра того, чему мы хотим научиться.
Таким образом анимировать контур можно силами:
Только SVG. В этом случае нам надо заранее знать длину контура.
SVG + CSS. В этом случае нам тоже надо заранее знать длину контура.
SVG + CSS + JS. В этом случае определить на лету длину контура может помочь Javascript.
SVG + JS. В этом случае определить длину контура и запустить анимацию сможет Javascript.
Анимирование контура на чистом SVG
Идея такая. Представляем контур, будь то path или, например, polygon в виде пунктира! Длина одного штриха пунктира должна быть равна длине контура. Также длина разрыва между штрихами должна быть равна длине контура. Анимированию будем подвергать атрибут зазора между штрихами stroke-dashoffset элемента polygon. Изменяя его величину от максимального до нуля, мы будем видеть продвижение штриха, за который отвечает атрибут stroke-dasharray. Для этого у 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. Чтобы повторить анимацию кликните по этой же кнопке два раза с секундным интервалом.
Здесь задается длина штриха и зазора для обеих окружностей чуть больше, чем есть на самом деле. Анимация с именем draw длится 4s (один цикл) по линейной функции. Начинается анимация через 3 секунды после загрузки SVG. Параметр animation-iteration-count отвечает за количество циклов анимации. Атрибут forwards говорит о том, что после завершения анимации к элементу применяется стиль последнего ключевого кадра.
Анимирование контура SVG с помощью CSS и JS
Анимируем кривую, определив ее длину с помощью Javascript и запустив ее рисование через стили. Для просмотр анимации кликните по кнопке 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, например, так:
Здесь ключевым моментом является цикл по всем элементам animate и запуск этого элемента с помощью метода beginElement(). А до этого в другом цикле JS пробегается по все путям по их id, вычисляет их длины и присваивает эти длины штрихам и зазорам.
Ссылки для ленивых или любознательных
Для тех кому лень (нет времени) возиться с кодом или тех, кто код просто не понимает, даю наводки, как сделать анимацию линии без лишних умственных затрат:
• Vivus Instant - это онлайновый сервис, куда можно загрузить свой SVG-файл и получить на выходе анимированный SVG по методу анимации с помощью CSS и JS.
Как анимировать контур в других программах:
• Aphalina Animator - программа для создания SVG-анимации. В ней есть тип анимации Add stroke draw animation - это наш случай.
• HelpXplain - программа для создания веб-презентаций. В ней есть функционал, который находится на панели Animation, вызываемой при выделенной фигуре, и называется Outline.
• AquaSoft Stages - программа для создания видео-презентаций. В ней есть функционал движения по траектории. Можно не только анимировать контур, но и приделать в концу линии любой наконечник, задав для него правило поведения на поворотах.
• Adobe After Effects - лучший редактор для видео-композинга. Для векторного слоя Shape Layer есть элемент Trim Paths, с помощию которого удобно "рисовать" линии.
