Анимация пешеходных и других маршрутов на растровой карте
1,00
р.
Возникла идея, как сделать анимацию похода с семьей в ТЮЗ г. Санкт-Петербурга, допустим для жителей Ленинградской области. Чтобы реализовать анимацию нескольких маршрутов.
Маршрут движения будет на поезде до вокзала и пешком собственно до театра.
Это учебный пример, где будет использованs несколько техник реализации анимации:
Анимация поезда,- составленного из символов юникода, который движется вдоль заданного пути, проложенного на растровой карте. Анимация рисования пешеходного маршрута от вокзала до ТЮЗ'а. Анимация фигурок взрослых и их детей. Анимация движения персонажей вдоль заданного маршрута.
Ниже пример одной части анимации - прокладка пешеходного маршрута
Как сделать, перечисленные выше, виды анимации?
Ответ
Буду поэтапно, подробно объяснять все фрагменты анимации. Отдельные куски могут быть использованы для оживления раздела "Контакты" сайта заказчика. Опираясь на описание, можно добавить собственные карты и проложить необходимы маршруты.
Добавление растровой карты в SVG
Для внедрения выбранного фрагмента растровой карты в SVG используется тег
Прорисовка маршрутов движения поезда и людей
Загружаем карту в векторный редактор и инструментом "Рисовать кривые Безье" добавляем узловые точки на маршруты движения.
Сохраняем файл в формате *.svg и копируем из него патчи маршрутов
Вычисляем длину маршрутов:
для поезда это будет - 312px пешеходный маршрут - 409px
Пишем команду анимации для пешеходного маршрута
Анимация поезда,- составленного из символов юникода
Юникод вагона - 🚃 Перемычки между вагонами - -
Поезд будет идти по маршруту:
Ниже код поезда без анимации людей:
🚂 - 🚃 - 🚃 - 🚃 - 🚃 - 🚃 - 🚂
Команда анимации движения поезда здесь будет несколько иная в отличии от анимации пешеходного маршрута, так как необходимо запустить по одному маршруту несколько вагонов.
`
Ниже код анимации поезда:
🚃 - 🚃 - 🚃 - 🚃 - 🚃 - 🚃 - 🚃
Анимация фигурок взрослых и их детей
Анимация движения людей основана на анимации параметра "d" нескольких для фигуры человека в нескольких фазах ходьбы, что при быстрой смене значений "d" создаёт иллюзию ходьбы.
Ниже код анимации:
<!-- Man -->
Собираем все фрагменты анимации вместе
Тайминг в 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.11.2020 г.
Добавлен аудиоплейер.
Использован трек: eruption-one-way-ticket
Маршрут движения будет на поезде до вокзала и пешком собственно до театра.
Это учебный пример, где будет использованs несколько техник реализации анимации:
Анимация поезда,- составленного из символов юникода, который движется вдоль заданного пути, проложенного на растровой карте. Анимация рисования пешеходного маршрута от вокзала до ТЮЗ'а. Анимация фигурок взрослых и их детей. Анимация движения персонажей вдоль заданного маршрута.
Ниже пример одной части анимации - прокладка пешеходного маршрута
Как сделать, перечисленные выше, виды анимации?
Ответ
Буду поэтапно, подробно объяснять все фрагменты анимации. Отдельные куски могут быть использованы для оживления раздела "Контакты" сайта заказчика. Опираясь на описание, можно добавить собственные карты и проложить необходимы маршруты.
Добавление растровой карты в SVG
Для внедрения выбранного фрагмента растровой карты в SVG используется тег
Прорисовка маршрутов движения поезда и людей
Загружаем карту в векторный редактор и инструментом "Рисовать кривые Безье" добавляем узловые точки на маршруты движения.
Сохраняем файл в формате *.svg и копируем из него патчи маршрутов
Вычисляем длину маршрутов:
для поезда это будет - 312px пешеходный маршрут - 409px
Пишем команду анимации для пешеходного маршрута
Анимация поезда,- составленного из символов юникода
Юникод вагона - 🚃 Перемычки между вагонами - -
Поезд будет идти по маршруту:
Ниже код поезда без анимации людей:
🚂 - 🚃 - 🚃 - 🚃 - 🚃 - 🚃 - 🚂
Команда анимации движения поезда здесь будет несколько иная в отличии от анимации пешеходного маршрута, так как необходимо запустить по одному маршруту несколько вагонов.
`
Ниже код анимации поезда:
🚃 - 🚃 - 🚃 - 🚃 - 🚃 - 🚃 - 🚃
Анимация фигурок взрослых и их детей
Анимация движения людей основана на анимации параметра "d" нескольких для фигуры человека в нескольких фазах ходьбы, что при быстрой смене значений "d" создаёт иллюзию ходьбы.
Ниже код анимации:
<!-- Man -->
Собираем все фрагменты анимации вместе
Тайминг в 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.11.2020 г.
Добавлен аудиоплейер.
Использован трек: eruption-one-way-ticket
