Как анимировать маршрут (path) на SVG карте?

193

16 апреля 2022, 16:10

Есть SVG карта созданная на Raphael. Как можно анимировать маршрут между двумя кликами на карте, как например здесь

Пример на картинке -

На яндекс и гугл картах понятно, там свой API, но как сделать нечто подобное на SVG. Есть ли какие-то примеры?

Answer 1

Есть такая библиотека OpenLayers. Она может помочь. Приведу ссылки на три примера.

Анимация линий (анимация полётов).
Анимация передвижения по траектории. Тут надо нажать на кнопочку Start animation.
Анимация перехода к точке. Тут надо нажать на кнопочку Take a tour.

Answer 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>