Каким образом создаются SVG анимации или трансформации?

#javascript #css #svg #snapsvg #smil

На многих сайтах я видел как svg path в виде треугольника по hover/click превращается
в круг, и потом в книгу или ещё в какой то объект!
Сам вопрос: как это работает и что нужно анимировать?

Я пересмотрел кучу всякого кода и так и не  понял, каким образом такое реализуется!

Если это не сложно, поясните, что анимируют и каким образом?

Этот пример не на SVG, но покажет суть:



.a {
  border: 1px solid red;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  animation: cub 20s linear infinite;
  position: relative;
}

.a:before {
  content: "";
  animation: text 10s linear;
}

@keyframes cub {
  0% {
    width: 100px;
    height: 100px;
  }
  5% {
    border-radius: 0;
    transform: translate(200px, 0);
  }
  10% {
    transform: translate(200px, 20px)rotate(180deg);
  }
  15% {
    transform: translate(200px, 100px)rotate(180deg)scale(3);
  }
  20% {
    background: tomato;
  }
  25% {
    transform: scale(.5);
  }
  100% {
    width: 10px;
    height: 10px;
    opacity: 0;
  }
}

@keyframes text {
  10% {
    content: "Hello word";
    font-size: 30px;
    position: absolute;
    top: 0;
    color: #fff;
    transform: rotate(-220deg);
  }
}




    

Ответы

Ответ 1

Сам вопрос: как это работает и что нужно анимировать?


Автор задал очень хороший вопрос и привел пример реализации анимации path с помощью
изменения аттрибута   d="M.."    

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

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

Возьмем например Inkscape для получения согласованных патчей пятиугольника и прямоугольника 


Задаем размер документа 400х400 px    
Устанавливаем горизонтальные и вертикальные направляющие, проходящие через центр
документа и узловые точки. На рис. ниже - это голубые линии. На них будем ориентироваться
при перетаскивании узлов.
В палитре инструментов выбираем многоугольники  
Рисуем пятиугольник   


   


Выбираем в меню: Контур / Оконтурить объект (Shift+Ctrl+C)  
Сохраняем файлы в формате *.svg, но редактор не закрываем    
Из всего кода файла нам нужна только одна строчка  c атрибутом d="m.."   

    
Возвращаемся в Inkscape, выбираем инструмент - редактировать узлы контура 
и перетаскиваем узлы, чтобы получился квадрат   
Снова сохраняем файл и копируем новые значения атрибута d="m.."   


Полученные значения нам нужны для подстановки в переменную values=".."

 values="m200 724.1 124-0.2 0.9 231.3-246.8-1 0.9-230.3z;
         m200 724.1 122 88.6-46.6 143.4-150.8 0-46.6-143.4z"    


Точка с запятой разделяет значения путей для квадрата и пятиугольника. При анимации
путь будет изменяться от одного значения к другому.   

Ниже код реализующий анимацию плавной трансформации одной фигуры в другую:   



 


  

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

UPD

Трансформация одной формы в другую  (без возврата в исходное положение) 



   


Ответ 2

Это мой второй кривожопый пример но он запускается по click через jQuery function
с использованием TweenMax, все path брал из inkscape и не преследовал красоту ... 



$('.weed').click(function() {
	TweenMax.to(".st1", 1, {
	  ease:Linear.easeNone,
  	delay: 4.8,
  	fill:"#357AC6"
	});
	TweenMax.to(".st2", 3, {
  	ease:Linear.easeNone,
  	strokeDashoffset:"0"
	});
});
.weed .st0 {
    fill:#2666AD;
}
.weed .st1 {
    fill:#2666ad;
}
.weed .st2 {
    fill:none;
    stroke:#FFFFFF;
    stroke-width:5;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray: 3779;
    stroke-dashoffset: 3779;
}