移動

図形の移動は、animateMotion 要素を使う。
図形が移動する軌跡は、path 属性で指定する。データは path 要素の d 属性と同じように、 直線やベジェ曲線などが使える。アニメーションが始まるイベントや、繰り返し回数などは、 animateTransform 要素と同じように指定する。

<g id="go">
    <rect x="0" y="0" width="20" height="20" fill="orange" />
    <animateMotion begin="go.click" 
        path="M50,50 C50,0 150,0 150,50 C150,100 250,100 250,50"
        repeatCount="1" dur="4s" />
</g>

path 属性を使って軌跡を直接記述する代わりに、mpath 属性を使ってあらかじめ設定してある 軌跡（path）を参照させることができる。
次の例では、あらかじめ設定してある path を参照させて、図形の移動を行っている。
path 自体を表示したくないときは、defs タグに入れればよい。

<path id="path1" d="M50,50 C50,0 150,0 150,50 C150,100 250,100 250,50" 
    fill="none" stroke="red" />

<g id="go">
    <rect x="0" y="0" width="20" height="20" fill="orange" />
    <animateMotion begin="go.click" repeatCount="1" dur="4s">
        <mpath xlink:href="#path1" />
    </animateMotion>
</g>

ここで、移動している矩形（rect）は、path で指定して軌跡に従って移動することになるが、 自動で向きは変わらない。これを軌跡（曲線）の向きに沿って矩形を傾けることができる。
animateMotion 要素の rotate 属性に "auto" を指定することによって、自動で向きが変わる。 デフォルトでは、"0" になり傾きはない。角度を指定することによって、傾きを固定することもできる。
また、普通はアニメーションが終了すると、元の位置に戻ってしまうが、終了時点の位置に図形を 残したいときは、fill 属性に "freeze" を指定するとよい。

<g id="go">
    <rect x="0" y="0" width="20" height="20" fill="orange" />
    <animateMotion begin="go.click" repeatCount="1" dur="4s" 
        rotate="auto" fill="freeze">
        <mpath xlink:href="#path1" />
    </animateMotion>
</g>
<g id="go2" transform="translate(0,30)">
    <rect x="0" y="0" width="20" height="20" fill="orange" />
    <animateMotion begin="go.click" repeatCount="1" dur="4s"
        fill="freeze">
        <mpath xlink:href="#path1" />
    </animateMotion>
</g>

previous / next