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

Question

На многих сайтах я видел как 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);
  }
}

<div class="a"></div>

Answer 1

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

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

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

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

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

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

5. Выбираем в меню: Контур / Оконтурить объект (Shift+Ctrl+C)

6. Сохраняем файлы в формате *.svg, но редактор не закрываем

7. Из всего кода файла нам нужна только одна строчка c атрибутом d="m.."

   <path d="m200 724.1 124-0.2 0.9 231.3-246.8-1 0.9-230.3z" />

8. Возвращаемся в Inkscape, выбираем инструмент - редактировать узлы контура
   и перетаскиваем узлы, чтобы получился квадрат

9. Снова сохраняем файл и копируем новые значения атрибута 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"    

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

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

 <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400" id="svg2" version="1.1">
<g id="layer1" transform="translate(0,-652.36216)" style="fill:yellowgreen;stroke-width:3;stroke:dodgerblue">
<path d="m200 724.1 124-0.2 0.9 231.3-246.8-1 0.9-230.3z" >
 <animate attributeName="d" dur="6s" fill="freeze" repeatCount="3" 
  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;
          m200 724.1 124-0.2 0.9 231.3-246.8-1 0.9-230.3z" />

</path>
  </g>
</svg>

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

UPD

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

   <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400" id="svg2" version="1.1">
  &lt;g id="layer1" transform="translate(0,-652.36216)" style="fill:yellowgreen;stroke-width:3;stroke:dodgerblue"&gt;
    &lt;path d="m200 724.1 124-0.2 0.9 231.3-246.8-1 0.9-230.3z" &gt;
  &lt;animate attributeName="d" dur="6s" fill="freeze" repeatCount="1" 
      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"/&gt;   
 &lt;/path&gt;
  &lt;/g&gt;
&lt;/svg&gt;</code></pre>

Answer 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;
}

<svg class="weed" viewBox="0 0 270 250">
<rect class="st0" width="270" height="250"/>
<path class="st1" d="m 45.869141,125.1543 v 1 148.41211 H 245.17188 V 125.1543 c -72.01585,0.79737 -141.27478,1.2009 -199.302739,0 z m 2,2 H 243.17188 V 272.56641 H 47.869141 Z"/>
<path class="st2" d="m 45.869141,125.1543 v 1 c 0,49.4707 -65.790511,110.90332 0,148.41211 66.434249,0 205.676629,-116.49302 199.302739,0 V 125.1543 c -72.01585,0.79737 -141.27478,1.2009 -199.302739,0 z M 74.217355,161.30609 226.16295,152.10073 67.790928,146.70034 47.869141,272.56641 Z"/>
</svg>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js" ></script>