SVGアニメーション作成:

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

注意点

頂点の数があっていないとアニメーションが上手く動かない。

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