На днях в Redshift Digital мы столкнулись с несколькими сбоями при создании анимации GSAP с простым путем SVG. Можно подумать, что со всеми доступными инструментами это будет не так уж сложно. Что ж, угадайте, что? Иногда слишком много технологий и слишком много вариантов. Чтобы помочь вам избежать некоторых изумительных моментов, связанных с разгадыванием векторной тайны, вот небольшой рабочий процесс, описывающий часть процесса.
Первым препятствием был актив для SVG. В этом примере показаны скриншоты Sketch. Актив для начала нашей анимации был минным полем сломанных сюжетов и мечтаний, отключенных путей и пропущенных соединений (Изображение 1). Экспорт этого SVG из Sketch и открытие его в текстовом редакторе содержит несколько путей, загадочные длинные числа, которые все преобразуются, переводятся и поворачиваются. К тому же, кто знает, в каком направлении все идет? Да, направление - это вещь, потому что анимация идет от начала до конца.
Супер беспорядочный код SVG с изображения 1:
<svg viewBox="0 0 577 131">
<g id="Nodes-v2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-Copy-13" transform="translate(0.000000, -142.000000)">
<g id="Group" transform="translate(-12.000000, 142.000000)">
<path d="M294.234899,100 C294.234899,83.4314575 280.818116,70 264.267676,70" id="Oval-2" stroke="#DDDDDD" stroke-width="2" transform="translate(279.251288, 85.000000) rotate(-90.000000) translate(-279.251288, -85.000000) "></path>
<path d="M264.267676,130 C264.267676,113.431458 250.850893,100 234.300453,100" id="Oval-2-Copy" stroke="#DDDDDD" stroke-width="2" transform="translate(249.284064, 115.000000) rotate(-270.000000) translate(-249.284064, -115.000000) "></path>
<path d="M517.234899,40 C517.234899,23.4314575 503.818116,10 487.267676,10" id="Oval-2" stroke="#DDDDDD" stroke-width="2" transform="translate(502.251288, 25.000000) rotate(-90.000000) translate(-502.251288, -25.000000) "></path>
<path d="M487.267676,70 C487.267676,53.4314575 473.850893,40 457.300453,40" id="Oval-2-Copy" stroke="#DDDDDD" stroke-width="2" transform="translate(472.284064, 55.000000) rotate(-270.000000) translate(-472.284064, -55.000000) "></path>
<path d="M0.991208961,130 L228.5,130" id="Line-Copy-3" stroke="#DDDDDD" stroke-width="2" stroke-linecap="square" stroke-dasharray="1"></path>
<path d="M295,70 L460,70" id="Line-Copy-4" stroke="#DDDDDD" stroke-width="2" stroke-linecap="square" stroke-dasharray="1"></path>
<path d="M518.5,10 L569.5,10" id="Line-Copy-6" stroke="#DDDDDD" stroke-width="2" stroke-linecap="square" stroke-dasharray="1"></path>
<circle id="Oval-3-Copy-4" fill="#BF3C95" cx="579" cy="10" r="10"></circle>
</g>
</g>
</g>
</svg>
Первое, что нужно, - это чистый путь от начала до конца на артборде. Создайте этот путь на артборде примерно в том месте, где он вам понадобится в дизайне. Изображение 2 - это пример чистого пути на артборде в Sketch.
Ок, отлично! У нас есть хороший чистый простой путь, но когда этот путь экспортируется из эскиза, к элементу G в SVG все еще применяется преобразование.
Более чистый код SVG из изображения 2 с выбранным путем:
<svg viewBox="0 0 573 120" version="1.1">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square" stroke-dasharray="1,1">
<g id="Artboard" transform="translate(0.000000, -99.000000)" stroke="#DCDCDB" stroke-width="2">
<path d="M0,218 L235,218 C251.569,218 265,205.552 265,189 C265,172.151 278.432,159 295,159 L461,159 C477.569,159 490,146.55 490,130 C490,113.451 504.432,100 521,100 L572,100" id="1"></path>
</g>
</g>
</svg>
Кажется, в этом нет ничего страшного, но это препятствие номер два. Вы не хотите, чтобы код SVG включал преобразование. Преобразование SVG говорит: Нарисуйте этот путь, но переместите сюда. Анимация SVG с помощью плагина GSAP MorphSVG манипулирует путем. Если другие анимации полагаются на этот путь, они будут следовать по нему, но они будут ниже и выше влево или в каком-то другом странном направлении.
Так как же получить путь из Sketch относительно артборда? На этот вопрос потребовалось гораздо больше времени, чем я могу признать. Я просмотрел настройки Переполнение стека, погуглил по всем видам связанных терминов и случайно понял это. В Sketch сделайте видимым только рабочий контур (Изображение 2), выберите монтажную область и экспортируйте монтажную область как SVG вместо выбора и экспорта одного пути.
Теперь, когда вы открываете SVG в текстовом редакторе, он, вероятно, все еще имеет несколько длинных чисел, но он намного удобоваримее, и больше не должно происходить никакого преобразования.
Код SVG изображения 2 с выбранной монтажной областью (с небольшими изменениями):
<svg viewBox="0 0 1440 1050">
<g>
<path d="M0,218 L235,218 C251.569,218 265,205.552 265,189 C265,172.151 278.432,159 295,159 L461,159 C477.569,159 490,146.55 490,130 C490,113.451 504.432,100 521,100 L572,100" id="1">
</path>
</g>
</svg>
Вот что вам нужно знать для хорошего пути SVG.
1. ‹svg viewBox =” 0 0 1440 250 ”› Последние два числа - это ширина и высота SVG. В теге SVG также полезно проверить тег preserveAspectRatio для выравнивания. SVG не следует типичному поведению правил CSS.
2. ‹g› Создайте здесь свой собственный класс или идентификатор и используйте CSS для обводки, заливки, цветов и т. Д.
3. ‹path d = M # ##, ### L ###, ### C ###, ### ###, ### ###, ### ›Вот настоящая суть SVG.
Что означают все эти буквы и цифры в пути?
M ###, ### - это координаты x, y начального вектора. точка.
L ###, ### - это координаты x, y вектора прямой линии без маркеров на пути.
C ### , ### ###, ### - это положение x, y кривой линии. Числа C - это x, y маркера Безье. Следующий набор чисел - это векторная точка.
Используя эту технику, можно вносить изменения в точки в файле эскиза, а позиции x, y должны напрямую соответствовать данным в элементе D SVG. (изображение 3)
Вместо повторного экспорта, открытия в текстовом редакторе, поиска SVG для обновления и вставки кода в проект теперь нужно редактировать только числа в элементе D SVG.
