Простой пример анимации контуров в SVG
- 31 января 2023
SVG-графика поддаётся анимированию. В этой статье мы покажем, как анимировать отрисовку контуров.
![](https://cs1.htmlacademy.ru/blog/js/svg-animation/7d8502966a4a62fe3e404c7abc5a8c1c.gif)
Сначала мы разберём свойства SVG-анимации и синтаксис библиотеки Anime.js, а затем анимируем отрисовку котов. Если вы уже знакомы с теорией, можете сразу перейти к практике.
Для анимации нам понадобятся:
- элемент
path
— контур; - атрибуты обводки:
stroke
иstroke-dashoffset
; - библиотека Anime.js.
Контур и обводка в SVG
path
— это способ описать траекторию внутри векторного изображения. Далее эту траекторию можно отобразить, задав ей обводку. Как выглядит path
:
<svg xmlns="http://www.w3.org/2000/svg" width="205" height="118" viewBox="0 0 205 118" fill="none">
<path d="M3 55.5286C8.43655 49.2385 14.7452 43.6721 21.6476 39.052C23.1876 38.0129 25.4513 37.1037 26.6945 38.4768C27.381 39.2375 27.3995 40.3693 27.384 V45.43 C8.43 48.57" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Обводка задаётся с помощью атрибута stroke
или аналогичного CSS-свойства. За толщину отвечает stroke-width
, за скругление — stroke-linecap: round;
.
stroke-dashoffset
задаёт смещение обводки. Этот атрибут можно анимировать. Например, с его помощью создаётся примитивный индикатор загрузки.
Синтаксис библиотеки Anime.js
Мы будем использовать Anime.js, потому что с ней легко настроить анимацию — библиотека берёт на себя часть вычислений. Например, когда мы не можем посчитать длину контура, anime.setDashoffset
делает это за нас.
У библиотеки простой синтаксис. В примере ниже мы в первой строке находим все контуры, а внутри anime()
описываем параметры анимации. Последняя строка указывает на изменяемое свойство, а остальные являются параметрами и не затрагивают конкретных атрибутов или свойств элемента.
const paths = document.querySelectorAll('svg path');
anime({
targets: paths,
duration: 2000,
delay: 200,
easing: 'easeInOutExpo',
strokeDashoffset: [anime.setDashoffset, 0]
});
targets
— элементы, у которых будет меняться значение атрибута.
duration
— длительность анимации в миллисекундах.
delay
— задержка перед началом анимации.
easing
— временная функция. Здесь для примера приводим easeInOutExpo
, а полный список временных функций вы найдёте на сайте библиотеки.
strokeDashoffset
— изменяемый атрибут. Передаём туда массив с исходным и конечным значениями атрибута.
Мы не сможем вычислить длину каждого контура в SVG с котами, поэтому используем anime.setDashoffset
, чтобы получить длину.
![](https://cs1.htmlacademy.ru/blog/js/svg-animation/04c1ae929da0deb5d45e5ac7e4f1e790.gif)
Можно воздействовать на любые свойства и атрибуты, которые поддаются анимированию. Например, opacity
, fill
, background-color
или transform
:
const circles = document.querySelectorAll('svg circle');
anime({
targets: circles,
duration: 1000,
easing: 'easeInOutExpo',
opacity: [0, 1],
scale: [0, 1]
});
В результате получится анимация плавного появления окружности из прозрачности.
![](https://cs1.htmlacademy.ru/blog/js/svg-animation/bfb0f7de655f1557c86c35c95297434a.gif)
💫 Научитесь создавать анимации
Приходите на наши курсы — мы показываем там самые популярные и интересные техники для создания эффектов на CSS и JavaScript.
Практика: создаём SVG-анимацию контуров
Соберём анимацию — отрисуем три изображения с котами. Используем для этого заготовку — SVG-файл.
Экспортируем каждое изображение в формате SVG и поместим в <div>
с классом wrapper
.
<div class='wrapper'>
//Сюда помещаем все <svg>
</div>
Найдём все контуры и анимируем так, как показывали выше:
const paths = document.querySelectorAll('svg path');
anime({
targets: paths,
duration: 2000,
delay: 200,
easing: 'easeInOutExpo',
strokeDashoffset: [anime.setDashoffset, 0]
});
Последовательная отрисовка картинок
Сейчас все изображения рисуются одновременно. Сделаем так, чтобы картинки появлялись последовательно. Используем для этого timeline
— временной отрезок, на котором расставляется анимация в определённом порядке и с нужной задержкой.
Синтаксис timeline
:
const timeline = anime.timeline({
duration: 3000,
easing: 'easeInOutExpo'
});
timeline.add({
targets: firstImagePaths,
strokeDashoffset: [anime.setDashoffset, 0]
});
timeline.add({
targets: secondImagePaths,
strokeDashoffset: [anime.setDashoffset, 0]
});
timeline.add({
targets: thirdImagePaths,
strokeDashoffset: [anime.setDashoffset, 0]
});
timeline
создаётся один раз. Он принимает параметры, общие для каждой анимации, которая будет на нём располагаться — в нашем случае duration
и easing
. Затем при помощи timeline.add()
добавляются анимации — они будут выполняться последовательно.
💡 Некоторые параметры можно переопределять — например, delay
, easing
, duration
. А вот loop
и direction
переопределить нельзя. Параметр loop
отвечает за бесконечное проигрывание, direction
— за направление анимации.
Задержка следующей анимации
Чтобы начать анимацию не сразу после окончания предыдущей, передайте второй аргумент со временем в миллисекундах:
timeline.add({
targets: firstImagePaths,
strokeDashoffset: [anime.setDashoffset, 0]
});
timeline.add({
targets: secondImagePaths,
strokeDashoffset: [anime.setDashoffset, 0]
}, ‘+=500’);
Вторая анимация начнётся спустя полсекунды после окончания предыдущей.
Если вместо знака +
поставить -
, анимация начнётся заранее — когда предыдущей останется проигрывать 500 миллисекунд. Так можно управлять композицией.
Стейджер
Напоследок рассмотрим ещё одну возможность управлять анимацией контура — стейджер. Каждый кот состоит из нескольких контуров — сделаем так, чтобы эти контуры рисовались последовательно.
Стейджер реализуется при помощи конструкции anime.stagger(<время задержки>)
.
timeline.add({
targets: firstImagePaths,
strokeDashoffset: [anime.setDashoffset, 0],
delay: anime.stagger(300)
});
Теперь каждый последующий контур начнёт анимироваться спустя 300 миллисекунд после начала анимирования предыдущего.
Итог
Мы рассмотрели лишь один из видов анимаций векторной графики, но есть и другие. Например, если совместить разобранную выше анимацию с SVG-масками, можно добиться такого эффекта:
![](https://cs1.htmlacademy.ru/blog/js/svg-animation/fe61ead48ac2f84649843e24e735efcb.gif)
Можно анимировать форму фигур. Такая анимация называется морфингом.
![Источник](https://cs1.htmlacademy.ru/blog/js/svg-animation/78b2b463acb341b5b67b5e237c8c68bf.gif)
Ещё один эффект достигается при помощи SVG-фильтров:
![](https://cs1.htmlacademy.ru/blog/js/svg-animation/7b5672e451f558c6ba7d955a4ea5e30f.gif)
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
![300кк в наносекунду](https://assets.htmlacademy.ru/previews/blog/2179/default1709791748864@1x.png)
300кк в наносекунду
Игра, где нужно забрать своё и продержаться ещё один день.
- 7 марта 2024
![9 книг по JavaScript для начинающих в 2024](https://cs1.htmlacademy.ru/blog/js/books-javascript/preview.png)
9 книг по JavaScript для начинающих в 2024
Все вокруг говорят, что книги — прошлый век. Но вовремя прочитанная хорошая книжка может здорово помочь в изучении нового языка или технологии, а то и вообще целиком объяснить какую-нибудь важную штуку. Например, какие бывают алгоритмы, или зачем нужен рефакторинг. К тому же, хоть фреймворки меняются каждый год, основы обычно долго не меняются.
Мы опросили знакомых разработчиков, узнали, что читают они сами, и предлагаем вам подборку хороших книг по JavaScript.
- 6 марта 2024
![Объект URL в JavaScript: полный разбор](https://cs1.htmlacademy.ru/blog/js/url/preview.png)
Объект URL в JavaScript: полный разбор
Объект URL
в JavaScript представляет URL-адрес и предоставляет удобные методы для работы с ним. Он позволяет анализировать, конструировать и декодировать URL-адреса.
Создать объект URL
можно двумя способами:
Конструктор URL()
— самый распространённый способ, в котором вы передаёте любой URL в виде строки в качестве аргумента.
const url = new URL("https://www.example.com/path?query=123#hash");
Использование window.location
— это глобальный объект в браузерах, который содержит информацию о текущем URL.
const currentUrl = new URL(window.location.href);
- 23 января 2024
![Генерация QR-кодов на JS в 4 шага. Node.js + qrcode](https://cs1.htmlacademy.ru/blog/js/qr-generator/preview.png)
Генерация QR-кодов на JS в 4 шага. Node.js + qrcode
Давайте сделаем простой REST API на Node.js и Express, который будет генерировать QR-коды для любой ссылки. Если у вас ещё не установлены Node.js
и npm
, установите их с официального сайта.
- 22 ноября 2023
![ChatGPT не справляется](https://assets.htmlacademy.ru/previews/blog/2153/default1698921768956@1x.png)
ChatGPT не справляется
Притворитесь нейросетью и решите 101 задачку по JavaScript как можно быстрее.
- 2 ноября 2023
![Знакомство с JavaScript](https://cs1.htmlacademy.ru/blog/js/introduction-to-javascript/preview.png)
Знакомство с JavaScript
Теперь, когда вы знаете, как создать структуру веб-страницы с помощью HTML и оформить ее стилями с помощью CSS, пришло время оживить её с помощью JavaScript (JS). JavaScript — это мощный язык программирования, который используется для создания интерактивных и динамических веб-сайтов.
Вы можете добавить JavaScript в ваш HTML-документ двумя способами:
Встроенный JavaScript: непосредственно в HTML-документ, в тегах <script>
:
<script>
alert("Привет, мир!");
</script>
Внешний JavaScript: подключение внешнего .js
файла к HTML-документу:
<script src="script.js"></script>
- 1 ноября 2023
![Событие onclick в JS на примерах](https://cs1.htmlacademy.ru/blog/js/onclick/preview.png)
Событие onclick в JS на примерах
Интерактивность — ключевой компонент любого современного сайта. И одним из наиболее часто используемых событий для создания интерактивности является событие onclick
. В этой статье мы подробно разберёмся, что такое событие onclick
, как его использовать и приведем примеры применения.
Событие onclick
— это событие JavaScript, которое активируется, когда пользователь кликает на определенный элемент страницы. Это может быть кнопка, ссылка, изображение или любой другой элемент, на который можно нажать.
- 30 октября 2023
![Как перевернуть сайт. Самая короткая инструкция](https://assets.htmlacademy.ru/previews/blog/2141/default1698229018763@1x.png)
Как перевернуть сайт. Самая короткая инструкция
Не представляем, зачем это может понадобиться, но не могли пройти мимо.
Никакой магии. Мы вызываем JavaScript-функцию rotateBody()
, которая применяет свойство transform
с значением rotate(180deg)
к элементу <body>
. Когда вы нажмете на кнопку «Перевернуть», всё, что находится внутри <body>
будет повернуто на 180 градусов (то есть, встанет вниз головой)
function rotateBody() {
document.body.style.transform = 'rotate(180deg)';
}
<button onclick="rotateBody()">Перевернуть</button>
Но такой код повернёт страницу только один раз. Если нужно, чтобы она возвращалась обратно при втором клике, усложним код:
let isRotated = false;
function rotateBody() {
if (isRotated) {
document.body.style.transform = 'rotate(0deg)';
document.body.style.direction = "ltr";
} else {
document.body.style.transform = 'rotate(180deg)';
document.body.style.direction = "rtl";
}
isRotated = !isRotated;
}
Надеемся, вы прочитали это описание до того, как нажать на кнопку.
- 25 октября 2023
![Как узнать геолокацию: Geolocation API](https://cs1.htmlacademy.ru/blog/js/geolocation/preview.png)
Как узнать геолокацию: Geolocation API
Geolocation API позволяет сайтам запрашивать, а пользователям предоставлять свое местоположение веб-приложениям. Геолокация может использоваться для выбора города в интернет-магазине, отображения пользователя на карте или навигации в ближайший гипермаркет.
Основной метод Geolocation API — getCurrentPosition()
, но есть и другие методы и свойства, которые могут пригодиться.
- 16 октября 2023
![Что такое localStorage и как им пользоваться](https://cs1.htmlacademy.ru/blog/js/localstorage/preview.png)
Что такое localStorage и как им пользоваться
localStorage
— это место в браузере пользователя, в котором сайты могут сохранять разные данные. Это как ящик для хранения вещей, которые не исчезнут, даже если вы выключите компьютер или закроете браузер.
До localStorage
разработчики часто использовали cookies, но они были не очень удобны: мало места и постоянная передача данных туда-сюда. LocalStorage появился, чтобы сделать процесс более простым и эффективным.
- 12 октября 2023