【SVG】アニメーション3(パスに沿った移動)

SVGでは、アニメーションのための要素があります。今回は、そのひつとである「animateMotion要素」について見ていきます。animateMotion要素は、パスに沿って図形をアニメーションさせるものです。

animateMotion要素

パスの指定方法は以下の2つがある。

• animateMotion要素のpath属性
• mpath要素でパスを参照する

<defs>
  <path id="path1" d="M65,10 a25,25 0 1,1 0,50 l-30,0 a25,25 0 1,1 0,-50 z"/>
</defs>

<use href="#path1" stroke-width="0.3" stroke="blue" fill="none"/>
<rect x="-20" y="0" width="20" height="5" fill="red">
  <animateMotion dur="20s" repeatCount="indefinite">
    <mpath href="#path1"/>
  </animateMotion>
</rect>

パスの向きに応じた角度の変化

• rotate属性
  • 図形を回転させる角度を指定する属性

<defs>
  <path id="path1" d="M65,10 a25,25 0 1,1 0,50 l-30,0 a25,25 0 1,1 0,-50 z"/>
</defs>

<use href="#path1" stroke-width="0.3" stroke="blue" fill="none"/>
<rect x="-20" y="0" width="20" height="5" fill="red">
  <animateMotion dur="20s" repeatCount="indefinite" rotate="auto">
    <mpath href="#path1"/>
  </animateMotion>
</rect>

まとめ

animateMotion要素の記述方法について書きました。animateMotion要素は、パスに沿って図形をアニメーションさせます。パスの向きに応じて図形の角度を変更できます。