Плавный морфинг одного изображения в другое

#javascript #css3 #html5 #svg #анимация

Допустим, в начале на дисплее находится лого Wordpress, которое начинает плавно исчезать
и одновременно с этим, на этом же месте, начинает прорисовываться лого Twitter. В конце
процесса остается только лого Twitter.   

Другими словами, морфинг изображений должен реализоваться без использования opacity,
но с помощью прорисовки и стирания линий, образующих векторные изображения.   

Ниже для примера svg коды лого:    

Wordpress








Twitter






 

Приветствуются любые решения, реализующие морфинг изображений: svg, css, js
    

Ответы

Ответ 1

Например с применением известного плагина TweenMax совместно с MorphSVGPlugin



TweenMax.to("#a1", 2, {morphSVG:"#a2"});
#a2 {
   visibility:hidden;
}






  





Рабочий пример на codepen

Вариант с бесплатным похожим плагином Kute.js:



var tween = KUTE.fromTo('#a1', {
  path: '#a1',
}, {
  path: '#a2',
}, {
  morphPrecision: 4,
  morphIndex: 5,
  yoyo: false,
  //repeat: 1,
  duration: 500,
  delay: 500,
  easing: 'easingQuadraticInOut'
});

tween.start();
#a2 {
   visibility:hidden;
}






  



Ответ 2

Общая идея морфинга: 


На первом этапе показан логотип Wordpress, логотип twitter расположен на этом же
месте, но скрыт, для этого устанавливаем: 

 `    


Для логотипа twitter линии рисуются с нуля для этого
stroke-dashoffset" изменяется от максимального значения равного
суммарной длине линий до нулевого значения.   












Пример без анимации цвета 

Рисуются и стираются только линии контуров логотипов. 






  

Пример трансформации логотипа Facebook --> Twitter  






Ответ 3

Пример, показывающий возможности svg smil 



Техника реализация та же, что и в первом ответе ниже,- использование анимации stroke-dashoffset
Пусть вас не пугает обилие цифр в патче, они автоматически генерятся в векторном
редакторе при рисовании.