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

#html #css #css3 #svg #анимация

У меня есть файлы в форматах *.jpg, *.svg  стран мира.
Например Канады: 

 

Как сделать плавную анимацию появления карты с прорисовкой границ и с последующей
закраской внутри?
    

Ответы

Ответ 1

Пример с использованием Vivus.js:



window.onload = function() {
  var states = [
      "#DE-BW",
      "#DE-BY",
      "#DE-BE",
      "#DE-BB",
      "#DE-HB",
      "#DE-HH",
      "#DE-HE",
      "#DE-MV",
      "#DE-NI",
      "#DE-NW",
      "#DE-RP",
      "#DE-SL",
      "#DE-SN",
      "#DE-ST",
      "#DE-SH",
      "#DE-TH"
    ],
    colors = [
      "#a3bc8f",
      "#8fbc8f",
      "#a3d58f",
      "#a3d5a5",
      "#84d5a5",
      "#6dd5b8",
      "#6dd5b8",
      "#6db4c4",
      "#81b4c4",
      "#a3bc8f",
      "#8fbc8f",
      "#a3d58f",
      "#a3d5a5",
      "#84d5a5",
      "#84d5a5",
      "#a3d58f"
    ];

  function fillMap(state, color, time) {
    setTimeout(function() {
      $(state).css("fill", color);
    }, time);
  }

  new Vivus("germany", {
    duration: 500
  }, function() {
    for (var i = 0; i < 17; i++) {
      fillMap(states[i], colors[i], (i + 1) * 225);
    }
  });
}
path {
  fill: #fff;
  stroke: #000;
  stroke-width: 0.8;
  transition: fill 1.6s ease;
}





Ответ 2

Если есть файл svg, то анимацию прорисовки границ можно сделать с помощью изменения
атрибута stroke-dashoffset от максимального значения равного длине линии до нуля. 

Длину линии можно узнать при помощи функции getTotalLength() 

Пример скрипта

   


Пример вычисления длины линии смотри ниже.    





  

 
 
   
 

   





Длина линии получилась:  3635px     

Команда анимация прорисовки линии:

     


Команда заполнения цветом: 

      


Полный код анимации ниже:  






Ответ 3

Добавлено несколько карт.      

Карта России

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


Россия 

    
  


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




  

 




Карта Казахстана

Усложнена анимация на примере карты Казахстана,- добавлена цепочка последовательных
анимаций.   


По окончании анимации прорисовки контуров карты и заполнения её
цветом начинается анимация текста - названия государства.

Казахстан 
     
  
Затем начинается цепочка последовательных анимаций:   прорисовки
знака столицы          


    
    
    
           
названия столицы государства:    

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





  


  




Карта Белоруссии








Карта Грузии



  




Карта Армении