SVGのpathを線形保管でアニメーションさせる 📹

DEMO

SVGをアニメーションさせる場合、animate要素を使えば割と簡単に実現できます。

developer.mozilla.org

ただし、パスを線形保管でアニメーションさせたい場合は、変形前、変形後のコマンドの数を同数にする必要があるので、線形変形可能なSVGデータを作る方にわりかし手間がかかりそうです。

SVGデータの作成

今回はデモ用に簡単なSVGをつくりました。
いつもはイラストレータで書いた図形をSVGとして書き出しているのですが、パスのコマンドを確認しながら、懇切丁寧に手書きしました。

developer.mozilla.org

変形前SVG

<svg>
  <path
    d="
      M 10 10
      C 10 60 10 60 10 110 
      C 60 110 60 110 110 110
      C 110 60 110 60 110 10
      C 60 10 60 10 10 10
    "
  >
</svg>

変形後SVG

<svg>
  <path
    d="
      M 10 10
      C 60 60 60 60 10 110 
      C 60 60 60 60 110 110
      C 60 60 60 60 110 10
      C 60 60 60 60 10 10
    "
  >
</svg>

アニメーションの設定

今回はループさせたかったので、values属性に変形前、変形後、変形前と3つの値を渡しました。
ループしなくて良いのであればto属性に変形後の値を渡すだけでOKです。

<svg>
  <path
    d="
      M 10 10
      C 10 60 10 60 10 110 
      C 60 110 60 110 110 110
      C 110 60 110 60 110 10
      C 60 10 60 10 10 10
    "
  >
    <animate
      attributeName="d"
      repeatCount="indefinite"
      dur="8s"
      values="
        M 10 10
        C 10 60 10 60 10 110 
        C 60 110 60 110 110 110
        C 110 60 110 60 110 10
        C 60 10 60 10 10 10;
        M 10 10
        C 60 60 60 60 10 110 
        C 60 60 60 60 110 110
        C 60 60 60 60 110 10
        C 60 60 60 60 10 10;
        M 10 10
        C 10 60 10 60 10 110 
        C 60 110 60 110 110 110
        C 110 60 110 60 110 10
        C 60 10 60 10 10 10
      "
    />
  </path>
</svg>

イージングの設定

calcModeをsplineにしつつ、keySplines属性を設定することでイージングを設定できます。
keySplines属性に渡す値は、こちらのサイトで作成しました。

franzheidl.github.io

<svg>
  <path
    d="
      M 10 10
      C 10 60 10 60 10 110 
      C 60 110 60 110 110 110
      C 110 60 110 60 110 10
      C 60 10 60 10 10 10
    "
  >
    <animate
      attributeName="d"
      repeatCount="indefinite"
      dur="8s"
      calcMode="spline"
      keyTimes="0; 0.5; 1"
      keySplines="
        0.75 0 0.25 1;
        0.75 0 0.25 1
      "
      values="
        M 10 10
        C 10 60 10 60 10 110 
        C 60 110 60 110 110 110
        C 110 60 110 60 110 10
        C 60 10 60 10 10 10;
        M 10 10
        C 60 60 60 60 10 110 
        C 60 60 60 60 110 110
        C 60 60 60 60 110 10
        C 60 60 60 60 10 10;
        M 10 10
        C 10 60 10 60 10 110 
        C 60 110 60 110 110 110
        C 110 60 110 60 110 10
        C 60 10 60 10 10 10
      "
    />
  </path>
</svg>