В этой статье узнаете как быстро создать CSS анимацию рисования линии обводки подписи, используя в работе только свободное (бесплатное) кроссплатформенное программное обеспечение и векторный формат SVG. Полученный результат можно использовать на мероприятиях, факультативах и образовательных занятиях (как фоновую заставку или в качестве оформления презентации), также разработку можно разместить на своем сайте или блоге.
Короткий видеоролик с анимацией подписи не удалось вставить в статью, поэтому предлагаю посмотреть итоговый вариант по ссылке в нашей группе Вконтакте, при желании можете на нас подписаться.
Порядок разработки SVG анимации рисования линии обводки
- Подбираем и обрабатываем растровое изображение
- Используем свободное ПО: кроссплатформенный векторный редактор Inkscape
- Обводим подпись, сохраняем SVG документ
- Оптимизируем линию обводки в SVG
- Определяем длину линии обводки
- Добавляем в SVG стили и @keyframes анимацию рисования линии контура
1. Подбираем и обрабатываем растровое изображение
Ищем в интернете изображение нужной нам подписи. Мне попался растровый рисунок не слишком хорошего качества, но это для нас не важно. Главное, чтобы начертание подписи было заметно и подходило для поставленной цели.
Если изображение очень маленькое, то его можно увеличить и сразу же обработать, улучшив качество с помощью бесплатных онлайн сервисов, использующих Искусственный Интеллект. Можно воспользоваться проектом https://betterimage.ai/ru, который увеличит в 2 раза масштаб и быстро почистит рисунок. На момент написания статьи сайт позволяет бесплатно обрабатывать 5 рисунков в день. В сети можно найти много подобных проектов с таким же функционалом, поэтому воспользуйтесь актуальным на данный момент.
С изображением разобрались.
2. Кроссплатформенный векторный редактор Inkscape
Inkscape — это бесплатный кроссплатформенный графический редактор, работающий с векторной графикой. В настоящее время многие образовательные учреждения переходят с операционной системы Windows на Linux. Данное свободное программное обеспечение работает на любых ОС: macOS, Windows и Linux — это и есть кроссплатформенность.
Другим преимуществом редактора является то, что его можно использовать портативно, то есть запускать с флеш-накопителя или внешнего диска (для Windows).
Скачать последнюю актуальную версию Inkscape и установить можно по ссылке https://inkscape.org/ru/.
3. Обводим подпись, сохраняем SVG документ
Если у Вас уже есть свой любимый редактор, работающий с векторной SVG графикой (Adobe Illustrator, CorelDraw, Figma и другие), то в нашем случае можете все операции по обрисовке линии обводки и сохранению SVG документа выполнить самостоятельно. Алгоритм действий одинаков.
Обрисовываем линию обводки контура подписи с помощью инструмента Pen Tool, позволяющий рисовать кривые Безье и прямые линии (B). Открываем панель слоев в редакторе Inkscape, загружаем на нижний слой наше растровое изображение с подписью, создаем новый слой, и уже на новом слое начинаем обводить подпись.
Важная деталь: меньше точек в кривой Безье </path> — легче (в килобайтах) будет "вес" итогового изображения. Чем точнее линия обводки контура, тем качественнее получится по итогу анимация. Для плавности все узлы следует по возможности создавать симметричными.
Чтобы линия обводки фигуры внутри не окрашивалась, необходимо убрать заливку, окрасив только линию контура. Тот, кто работал в программах векторной графики (CorelDraw, Adobe Illustrator) с этим разберется. Новичкам же нужно немного попрактиковаться.
Во-первых, следует открыть панель обводки и поставить цвет, который не будет сливаться с изображением и установить удобную для обрисовки ширину линии контура. Во-вторых, удалить заливку. Эти параметры настроек удобно выведены в левом нижнем углу приложения Inkscape.
Сохраняем документ в формате SVG, это будет исходник, к которому всегда можно при случае вернуться. И сохраняем еще раз, уже под новым именем, удаляем нижний слой. Если этого не сделать, то SVG документ будет в себя включать и растровый рисунок. После удаления слоя вновь сохранимся.
Будем считать, что с обводкой контура справились, переходим к оптимизации.
4. Оптимизируем линию обводки в SVG
Несколько слов о том, зачем нужна оптимизация. После сохранения SVG документа, в нём остается большое количество ненужного кода. В SVG сохраняются слои, лишние атрибуты, многочисленные пробелы и переходы на новую строку, информация о файле и прочий "мусор" — всё это добавляет вес проекту.
Самый простой и удобный способ избавиться от всего лишнего, это проект SvgOmg.
Переходим на сайт и перетаскиваем наш последний (без растровой картинки) SVG документ.
Достаточно настроек по умолчанию. Если по каким-то причинам Вы забудете удалить растровую картинку (или даже несколько растровых элементов), то в онлайн сервисе SvgOmg есть переключатель Remove Raster Images, который легко удаляет растр.
Кликнув на вкладку сверху MARCUP, можно видеть оптимизированный код SVG документа. В нашем случае у SVG должен остаться только один элемент </path>. Это и есть линия обводки контура подписи, с которой будем работать.
В правом нижнем углу видно насколько процентов (с указанием килобайт) SvgOmg оптимизировал SVG документ.
Скачиваем оптимизированный SVG файл себе на диск для дальнейшей работы.
5. Определяем длину линии обводки
Все дальнейшие действия будут производиться в текстовом редакторе. Так как мы решили все делать в кроссплатформенном свободном ПО (бесплатном, работающим под macOS, Windows и Linux), то нам понадобится любой текстовый редактор, соответствующий данным требованиям, например: Atom, Sublime Text. Если Вы привыкли работать в своём текстовом редакторе, то используйте его.
Мой SVG код выглядит таким образом:
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='100%' height='100%' viewBox='0 0 465 300' class='fon'>
<rect width='100%' height='100%' class='fon'/>
<path id='path' d='m -57,0 c 4,12.2 22, ...'/>
</svg>
В вашем случае будет отличаться viewBox='0 0 465 300' (должен быть свой размер) и <path id='path' d='m -57,0 c 4,12.2 22, ...'/> (в атрибуте d у вас свои координаты).
Зададим class для фона SVG документа, а также id='path' для линии обводки подписи </path>.
В планах у нас было все делать без JavaScript — так и будет по итогу, но для начала необходимо подсчитать длину линии при помощи простого JS кода. На будущее: если вам в проекте необходимо подсчитать длину </path> в SVG документе — воспользуйтесь следующим кодом:
<script>
let line = document.getElementById('path');
let lineLength = line.getTotalLength();
console.log(lineLength);
</script>
В консоли браузера нам выведут число. Это число нужно для CSS анимации. JavaScript можно удалить в самом конце, так как JS код ни на что не влияет, а лишь подсчитывает длину <path>.
В моём случае консоль выдала число 424.94085693359375, округлю его до ровных 425 и перехожу к итоговому рывку: написанию стилей.
6. Добавляем в SVG стили и @keyframes анимацию рисования линии контура
Под тегом <svg> сверху следует добавить CSS стили и код для @keyframes анимации:
<style>
.fon{
fill: #500000;
background: #500000;
}
#path {
stroke-width: 1;
stroke: #f5a156;
stroke-dasharray: 425;
stroke-dashoffset: 425;
animation: dash 3s .5s ease-in-out forwards;
}
@keyframes dash {
0% {
stroke-dashoffset: 425;
}
100% {
stroke-dashoffset: 0;
}
}
</style>
Длина кривой Безье, которое вычисляли при помощи JavaScript кода, при округлении равнялась 425. Расположена в следующих строках: stroke-dasharray: 425; и stroke-dashoffset: 425; (в том числе в @keyframes). В вашем случае длина будет другой, поэтому следует просто подставить свои расчёты.
JavaScript удаляем, чтобы не раздувать SVG файл, он более не нужен.
Заключение
Мой итоговой SVG документ с анимацией имеет размер всего 2 килобайта(!). Причем обрисовывал подпись Героя Советского Союза, лауреата Ленинской премии СССР, татарского поэта и писателя Мусы Джалиля с растрового изображения плохого качества. В результате получилась векторная анимация с четкими линиями. SVG анимацию можно масштабировать (увеличивать) бесконечно, и она не потеряет своего качества и актуальности ввиду свойств вектора.
Если все делали правильно, то анимация рисования линии должна корректно работать. Для этого нужно сохранить SVG документ и открыть его в любом современном браузере (Opera, Firefox, Chrome, Яндекс браузер и другие): просто перетащив SVG на страничку.
Вы можете скачать GIF анимацию и абсолютно свободно использовать в своей педагогической практике, образовательных презентациях, тематических факультативах и мероприятиях в детском саду, школе и дома.
Не получилась анимация рисования линии на SVG и CSS без JavaScript библиотек и фреймворков или есть вопросы — с удовольствием отвечу, подскажу. Приветствуется конструктивная критика. Напишу более детальную статью, если что-то следует пояснить подробнее по разработке веб анимации, интерактивных образовательных проектов, игр и не только. :)
