Как анимировать стрелочки на картинке?
Появилась идея сделать анимированные потоки воздуха(стрелки) на сайте с исчезновением в конце. Только не знаю как лучше реализовать.
Как вариант думаю нарисовать в Figma стрелку и искажая её сделать несколько кадров анимации с несколькими стрелками так, чтобы получилось будто они двигаются в лево и склеить в гифку, потом вставить на сайт, а слева от этой гифки добавить блок с белой тенью чтобы получился эффект рассеивания.
Подскажите, правильно ли я придумал и как вообще такое делается?
Ответы (2 шт):
Автор решения: Sevastopol'
→ Ссылка
Мощные анимированные потоки воздуха:
div {
width: 100%; font-size: 50px; line-height: 28px; color: dodgerblue;
transform: scale(-1, 1); animation: arrow 2s linear infinite;
}
@keyframes arrow {
0% {transform: scale(-1, 1) translateX(0);}
100% {transform: scale(-1, 1) translateX(100%);}
}<div>➠</div><div>➠</div><div>➠</div><div>➠</div><div>➠</div><div>➠</div>
Автор решения: Alexandr_TT
→ Ссылка
Подскажите, правильно ли я придумал и как вообще такое делается?
Можно сделать по разному:
- Каждой стрелке будет соответствовать своя растровая отдельная картинка и её можно перемещать командами трансформации
- Использовать анимацию трансформации контуров стрелки, используя атрибут
dpathи одновременно перемещать стрелку, как в способе 1. Но это очень трудоемкий процесс при подготовки path для морфинга стрелки. - Использовать textPath для перемещения стрелки-символа юникода. Например такого
🢨?
Этот способ интересен тем, что на одну траекторию для textPath можно повесить сколько угодно символов стрелки
<textPath xlink:href="#red" letter-spacing="40" startOffset="0%">
🢡🢩🢡🢩🢡🢡🢩🢡🢩
185;🢡🢩🢡🢩🢡🢡🢩🢡🢩🢡
</textPath>
В векторном редакторе рисуем трассы для движения стрелок. Их будет 4 для 4-х групп стрелок На рисунке они разного цвета.
Ниже пример одной группы стрелок, которая будет перемещаться по одному пути (на рисунке это красная линия)
Анимация начнется после клика
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="877" height="347" viewBox="0 0 877 347" >
<defs>
<path id="red" d="m840.5 188.3c0 0-32 38.4-54.7 41.8-43.3 6.6-80.6-35.3-123.3-45C610.1 173.1 550.2 192.7 501.8 169 461.8 149.5 452.6 84.4 409.7 72.6 341.4 53.7 273.5 146.7 204.8 129.4 168.8 120.3 163.9 43.3 124.4 52.2 76.4 62.9 27.9 136.9 27.9 136.9" style="fill:none;stroke-width:2;stroke:#eb2323"/>
</defs>
<image xlink:href="https://i.stack.imgur.com/Sghlt.png" width="100%" height="100%" />
<!-- Одиночная стрелка на верху кондиционера (просто для примера) -->
<text id="arrow1" x="800" y="50" font-size="42px" fill="dodgerblue"><tspan>
🢨</tspan></text>
<text dy="0px" dx="0" font-size="42px" fill="dodgerblue" letter-spacing="32" >
<textPath xlink:href="#red" letter-spacing="40" startOffset="0%"> 🢡🢩🢡🢩🢡🢡🢩🢡🢩🢡🢡🢩🢡🢩🢡🢡🢩🢡🢩🢡
<!-- Анимация стрелок по одному пути xlink:href="#red" -->
<animate id="an1" attributeName="startOffset" begin="svg1.click" dur="6s" values="0%;100%"
repeatCount="indefinite" restart="whenNotActive" />
</textPath>
</text>
</svg> Добавляем другие группы стрелок
Добавляются в секцию <defs> path- траектории движения стрелок и команды textPath для каждой группы стрелок с соответствующими ID path трассы
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="877" height="347" viewBox="0 0 877 347" >
<defs>
<path id="red" d="m840.5 188.3c0 0-32 38.4-54.7 41.8-43.3 6.6-80.6-35.3-123.3-45C610.1 173.1 550.2 192.7 501.8 169 461.8 149.5 452.6 84.4 409.7 72.6 341.4 53.7 273.5 146.7 204.8 129.4 168.8 120.3 163.9 43.3 124.4 52.2 76.4 62.9 27.9 136.9 27.9 136.9" style="fill:none;stroke-width:2;stroke:#eb2323"/>
<path id="purple" d="m865.2 246.2c0 0-71 15.2-101.9 1.1-32.3-14.8-37.2-64.9-68.6-81.5-30.8-16.3-73.2 5.6-104-10.7-26.8-14.2-29.9-59.9-58.6-69.8-32.6-11.2-71.4 4.1-101.1 21.6-27 15.9-33.9 56.6-61.8 70.9-26.7 13.7-59.7 10.5-89.7 8.5-39.8-2.6-53.7-21-116.6-26.9-98.3-4.3-17.4 110.6-142.6 97.6" style="fill:none;stroke-width:2;stroke:#d81b94"/>
<path id="blue" d="m802 184c0 0-57.3 42.5-91.1 46.1-33.8 3.6-64.8-23.1-98.6-25.7-51-4-101.7 19.8-152.7 15.2C410 215.2 355.7 208.8 316.3 178.7 285.6 155.2 293.5 89.6 256.2 79.6c-34.7-9.3-59.2 44.3-94.3 51.9-14 3-29.1-7.5-42.8-3.3-28.8 8.8-42.4 46-70.8 55.8-0.3 0.1-1.1 0-1.1 0" style="fill:none;stroke-width:2;stroke:#325ada"/>
<path id="black" d="m856.6 229.1c0 0-46.9 44.5-175.8-93.3-47-50.2-94.8 78.1-151.3 76.6-57.2-1.5-91.7-85.6-148.9-85.2-55.1 0.3-87.5 86.9-142.5 83.8C156 206.4 40.7 62.9 40.7 62.9v0" style="fill:none;stroke:#000"/>
</defs>
<image xlink:href="https://i.stack.imgur.com/Sghlt.png" width="100%" height="100%" />
<!-- Одиночная стрелка -->
<text id="arrow1" x="800" y="50" font-size="42px" fill="dodgerblue"><tspan>
🢨</tspan></text>
<text dy="0px" dx="0" font-size="42px" fill="dodgerblue" letter-spacing="32" >
<textPath xlink:href="#red" letter-spacing="40" startOffset="0%"> 🢡🢩🢡🢩🢡🢡🢩🢡🢩🢡🢡🢩🢡🢩🢡🢡🢩🢡🢩🢡
<!-- Анимация стрелок по одному пути xlink:href="#red" -->
<animate id="an1" attributeName="startOffset" begin="svg1.click" dur="6s" values="0%;100%"
repeatCount="indefinite" restart="whenNotActive" />
</textPath>
</text>
<text dy="0px" dx="0" font-size="42px" fill="dodgerblue" letter-spacing="32" >
<textPath xlink:href="#purple" startOffset="100%" > 🢡🢩🢡🢩🢡🢡🢩🢡🢩🢡🢡🢩🢡🢩🢡🢡🢩🢡🢩🢡
<!-- Анимация стрелок по одному пути xlink:href="#purple" -->
<animate id="an2" attributeName="startOffset" begin="an1.begin+2s" dur="6s" values="0%;100%"
repeatCount="indefinite" restart="whenNotActive" />
</textPath>
</text>
<text dy="0px" dx="0" font-size="42px" fill="dodgerblue" letter-spacing="32" >
<textPath xlink:href="#blue" startOffset="100%"> 🢡🢩🢡🢩🢡🢡🢩🢡🢩🢡🢡🢩🢡🢩🢡🢡🢩🢡🢩🢡
<!-- Анимация стрелок по одному пути xlink:href="#blue" -->
<animate id="an3" attributeName="startOffset" begin="an1.begin+4s" dur="6s" values="0%;100%"
repeatCount="indefinite" restart="whenNotActive" />
</textPath>
</text>
<text dy="0px" dx="0" font-size="42px" fill="dodgerblue" letter-spacing="32" >
<textPath xlink:href="#black" startOffset="100%"> 🢡🢩🢡🢩🢡🢡🢩🢡🢩🢡🢡🢩🢡🢩🢡🢡🢩🢡🢩🢡
<!-- Анимация стрелок по одному пути xlink:href="#black" -->
<animate id="an4" attributeName="startOffset" begin="an1.begin+6s" dur="6s" values="0%;100%"
repeatCount="indefinite" restart="whenNotActive" />
</textPath>
</text>
</svg>