SVGアニメーション作成

SVGアニメーションがずっと上手く設定できなくて悩んでいたけど、
急に理解できたのでメモ書き。

HTML側記述例

<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="768" viewBox="0 0 1024 768">
  <path d="M690,0c172.1,66.9,151,140.4,334,207V0H690z">
    <animate
      id="open"
      attributeName="d"
      begin="indefinite"
      dur="800ms"
      fill="freeze"
      keyTimes="0; 0.5; 1"
      calcMode="spline"
      keySplines=".43,.07,.71,.41; .3,.56,.64,1.02"
      values="M690,0c172.1,66.9,151,140.4,334,207V0H690z;
              M0,0c723.3,241.9,416.7,592.6,1024,768V0H0z;
              M0,0c-54.8,945.6-263.8,938.6,1024,768V0H0z" />
    <animate
      id="close"
      attributeName="d"
      begin="indefinite"
      dur="800ms"
      fill="freeze"
      keyTimes="0; 0.5; 1"
      calcMode="spline"
      keySplines=".43,.07,.71,.41; .3,.56,.64,1.02"
      values="M0,0c-54.8,945.6-263.8,938.6,1024,768V0H0z;
              M0,0c723.3,241.9,416.7,592.6,1024,768V0H0z;
              M690,0c172.1,66.9,151,140.4,334,207V0H690z" />
  </path>
</svg>

• idはjsから操作する際に使用。
• attributeNameはアニメーション対象の属性を指定。
• beginで開始タイミングを設定。(jsから指定する際などはindefiniteを設定)
• keyTimesは時間配分の設定。
• calcMode="spline"を設定することでアニメーション間のイージングを設定可能になる。
• keySplinesでアニメーション間のイージングを設定。
• valuesでアニメーションの動きを指定する。今回はパスを指定している。色なども設定可能。

javaScript側の設定

$(btnOpen).on('click', (e) => {
  //svg openのアニメーションスタート
  $('#open')[0].beginElement();
});

$(btnClose).on('click', (e) => {
  //svg closeのアニメーションスタート
  $('#close')[0].beginElement();
});

HTML側で設定したanimateのどれを起動させるかによってアニメーションを使い分ける。
参考
https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimationElement

注意点

頂点の数があっていないとアニメーションが上手く動かない。
イラストレーターで同じ数のアンカーから作成したもの同士であれば比較的きちんとアニメーションしてくれるので作成時に注意が必要。