Анимация персонажей сцены Paris shopping

#svg #анимация

На просторах интернета встретился вот такой яркий образ - юной парижанки, которая
неспешно возвращается после удачного шопинга.

Хочется сделать анимацию этого романтичного образа. В голову приходят различные техники
реализации: использование различных JS библиотек, но это будет чисто механическое прорисовывание
линий одновременно всех персонажей.
 А хочется создать сценарий постепенного появления и раскрашивания отдельных фрагментов
на основе последовательно-параллельных эффектов анимаций.
Возможно ли это?
    

Ответы

Ответ 1

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

  Оптимизация кода внутри svg файла


Объединение патчей, которые имеют одинаковый цвет и отвечают за
небольшие, соседние фрагменты изображения


Находим патчи с одинаковым цветом, допустим - #E3FFF0 и объединяем их в один патч,
соединяя патчи из разных фрагментов:
      


Присвоение уникальных идентификаторов фрагментам изображения, которые
будут анимированы


Названия id лучше задавать осмысленно, например: для фрагмента кода Эйфелевой башни
-     
  
   
   
   





DEMO

Live demo