Анимация пешеходных и других маршрутов на растровой карте

Возникла идея, как сделать анимацию похода с семьей в ТЮЗ г. Санкт-Петербурга, допустим для жителей Ленинградской области. Чтобы реализовать анимацию нескольких маршрутов.

Маршрут движения будет на поезде до вокзала и  пешком собственно до театра. 

Это учебный пример, где будет использованs несколько техник реализации анимации: 


Анимация поезда,- составленного из символов юникода, который движется вдоль заданного пути, проложенного на растровой карте. 
Анимация рисования пешеходного маршрута от вокзала до ТЮЗ'а.
Анимация фигурок взрослых и их детей.
Анимация движения персонажей вдоль заданного маршрута.  


Ниже пример одной части анимации - прокладка пешеходного маршрута  








Как сделать, перечисленные выше, виды анимации?
    

Ответы

Ответ 1

Буду поэтапно, подробно объяснять все фрагменты анимации. Отдельные куски могут быт
использованы для оживления раздела "Контакты" сайта заказчика. Опираясь на описание можно добавить собственные карты и проложить необходимы маршруты.

Добавление растровой карты в SVG

Для внедрения выбранного фрагмента растровой карты в SVG используется тег     

   


Прорисовка маршрутов движения поезда и людей


Загружаем карту в векторный редактор и инструментом "Рисовать кривые
Безье" добавляем узловые точки на  маршруты движения.


 


Сохраняем файл в формате *.svg и копируем из него патчи маршрутов 


Вычисляем длину маршрутов: 

для поезда это будет - 312px
 пешеходный маршрут - 409px     


Пишем команду анимации для пешеходного маршрута


   
      
      


Анимация поезда,- составленного из символов юникода

Юникод вагона - 🚃  Перемычки между вагонами - - 

Поезд будет идти по маршруту: 




Ниже код поезда без анимации:   









Команда анимации движения поезда здесь будет несколько иная в отличии
от анимации пешеходного маршрута, так как необходимо запустить по
одному маршруту несколько вагонов.  


`


Ниже код анимации поезда:  








Анимация фигурок взрослых и их детей

Анимация движения людей основана на анимации параметра "d" нескольких для фигур
человека в нескольких фазах ходьбы, что при быстрой смене значений "d" создаёт иллюзию ходьбы.   

Ниже код анимации: 



 




Собираем все фрагменты анимации вместе

Тайминг в SMIL SVG анимации просчитывается и реализуется довольно просто, в отличии от анимации CSS   


Если нужно запустить вторую анимацию строго после окончания первой
анимации, то  применяется следующая запись: begin="an1.end", где
an1 - уникальный идентификатор первой анимации.    
Если вторая анимация должна запуститься через 1 сек. после
окончания первой анимации, то - begin="an1.end+1s"   
Возможна и такая форма записи - begin="anTrain.end-7.5s",что означает
запуск другой анимации за 7.5 сек. до окончания анимации с ID - 
anTrain   


Используя эти возможности можно очень гибко согласовывать взаимодействие отдельны
фрагментов анимации и в дальнейшем, что-то изменить, подстроить, не составит большого труда.

Ниже полный код всей анимации   



.container {
width:100%;
height:100%;
}
.play-audio {

position:absolute;
top:0%;
left:50%;
}




	
		





Приложение адаптивно и работает во всех современных браузерах, кроме IE

Update 03.04.2019 г.

Добавлен аудиоплейер. 

Использован трек: группы Машина времени - Разговор в поезде