Как анимировать маршрут (path) на SVG карте?
Есть SVG карта созданная на Raphael. Как можно анимировать маршрут между двумя кликами на карте, как например здесь
Пример на картинке -
На яндекс и гугл картах понятно, там свой API, но как сделать нечто подобное на SVG. Есть ли какие-то примеры?
Ответы (2 шт):
На яндекс и гугл картах понятно, там свой API, но как сделать нечто подобное на SVG. Есть ли какие-то примеры?
В svg подобных API для рисования карт нет. Но сделать анимацию прокладки маршрута можно.
И совсем не обязательно рисовать SVG карту, можно взять фрагмент растрового скриншота и нарисовать маршрут в векторном редакторе:
Для этого инструментом - рисовать кривые Безье и прямые линии наносите узловые точки вдоль маршрута
Сохраняете файл и копируете path маршрута.
Вычисляете длину маршрута с помощью getTotalLength() в вашем случае = 801px
Далее пишите команду анимации изменения stroke-dashoffset от максимума до нуля, обеспечивая тем самым рост линии от нуля до максимума.
Анимация начнется после клика. Откройте на полный экран.
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="889" height="514" viewBox="0 0 889 514" preserveAspectRatio="xMinYMin meet" border="1">
<!-- скриншот карты -->
<image xlink:href="https://i.stack.imgur.com/J7iG0.png" height="100%" width="100%"/>
<path stroke-dasharray="801" stroke-dashoffset="801" d="m58.8 343c0 0 57.6-28.5 82.8-51.2 20.2-18.2 43.6-32.6 65.3-49 12.2-9.2 25.4-17.2 36.5-27.8 17.7-16.9 29.8-39.1 47.4-56.1 18.9-18.3 39.3-35.8 62.1-49 20.6-12 43.4-20.4 66.4-26.7 32.9-9.1 67.1-15.1 101.3-15.8 22.5-0.5 45.9 2.7 67 7.6 28.1 6.5 69.9 15 84.9 17.4 6.9 1.1 20.7-9.9 31-14.7 12.3-5.7 24.5-11.7 37-16.9 5.7-2.4 17.4-6.5 17.4-6.5" style="fill:none;stroke:red" stroke-width="6">
<!-- Анимация маршрута -->
<animate attributeName="stroke-dashoffset" begin="svg1.click" dur="10s" values="801;0" fill="freeze" />
</path>
</svg>UPDATE
Вариант с прокладкой маршрута пунктирной линией
Пунктирную линию невозможно анимировать с помощью изменения stroke-dashoffset, так линия уже заранее вся разбита на прерывистые участки длиной - 15px с пробелами 10px , - stroke-dasharray="15 10" и она просто будет постоянно бежать на всей длине линии.
Чтобы добиться эффекта постепенного роста пунктирной линии, нужно сначала её закрыть сверху и постепенно открывать с помощью анимации маски.
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="889" height="514" viewBox="0 0 889 514" preserveAspectRatio="xMinYMin meet" border="1">
<defs>
<mask id="msk">
<path stroke-dasharray="801" stroke-dashoffset="801" d="m58.8 343c0 0 57.6-28.5 82.8-51.2 20.2-18.2 43.6-32.6 65.3-49 12.2-9.2 25.4-17.2 36.5-27.8 17.7-16.9 29.8-39.1 47.4-56.1 18.9-18.3 39.3-35.8 62.1-49 20.6-12 43.4-20.4 66.4-26.7 32.9-9.1 67.1-15.1 101.3-15.8 22.5-0.5 45.9 2.7 67 7.6 28.1 6.5 69.9 15 84.9 17.4 6.9 1.1 20.7-9.9 31-14.7 12.3-5.7 24.5-11.7 37-16.9 5.7-2.4 17.4-6.5 17.4-6.5" style="fill:none;stroke:white" stroke-width="4">
<!-- Анимация маршрута маски -->
<animate attributeName="stroke-dashoffset" begin="svg1.click" dur="10s" values="801;0" fill="freeze" />
</path>
</mask>
</defs>
<!-- скриншот карты -->
<image xlink:href="https://i.stack.imgur.com/J7iG0.png" height="100%" width="100%"/>
<!-- Изначально скрытый маской маршрут движения -->
<path stroke-dasharray="15 10" mask="url(#msk)" d="m58.8 343c0 0 57.6-28.5 82.8-51.2 20.2-18.2 43.6-32.6 65.3-49 12.2-9.2 25.4-17.2 36.5-27.8 17.7-16.9 29.8-39.1 47.4-56.1 18.9-18.3 39.3-35.8 62.1-49 20.6-12 43.4-20.4 66.4-26.7 32.9-9.1 67.1-15.1 101.3-15.8 22.5-0.5 45.9 2.7 67 7.6 28.1 6.5 69.9 15 84.9 17.4 6.9 1.1 20.7-9.9 31-14.7 12.3-5.7 24.5-11.7 37-16.9 5.7-2.4 17.4-6.5 17.4-6.5" style="fill:none;stroke:red" stroke-width="4">
</path>
</svg>Есть такая библиотека OpenLayers. Она может помочь. Приведу ссылки на три примера.
Анимация передвижения по траектории. Тут надо нажать на кнопочку Start animation.
Анимация перехода к точке. Тут надо нажать на кнопочку Take a tour.