2011年5月25日水曜日

svgで順番にアニメーション

ラベル: 時刻:

svgで「まずこれをやって、その次これをやって...」と順番にアニメーションするコードの書き方です。

svg画像はこちら。

コードはこんな感じです。 

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="200">
    <rect x="10" y="160" width="30" height="30" stroke="#000000" fill="#ff0000">
        <animateTransform
            id="ani1"
            attributeName="transform"
            type="translate"
            values="0,0; 0,-150; 0,0"
            begin="0s;ani2.end"
            dur="4s"
        />
    </rect>
    <circle cx="75" cy="175" r="15" stroke="#000000" fill="#0000ff">
        <animateTransform
            id="ani2"
            attributeName="transform"
            type="translate"
            values="0,0; 0,-150; 0,0"
            begin="ani1.end"
            dur="4s"
        />
    </circle>
</svg>

まず、animateTransformなどのアニメーション用タグにidを振っておきます。 このidをアニメーション用タグのbegin属性に書けば、複数のアニメーションを連携させることができます。 rectやcircleなどのオブジェクトのidを指定するのではないので注意。

このサンプルはrectとcircleを移動させているだけなので使っているタグはanimateTransformです。 rectのアニメーションは「id="ani1"」、circleのアニメーションは「id="ani2"」にしました。 ani1が終わったタイミングでani2を動かしたいとき、ani2のbegin属性に「ani1.end」を書いておけば順番にアニメーションさせることができます。

begin属性にはセミコロン;で区切って複数の開始時間を登録することができます。 ani1のbegin属性には、

  1. 開始直後に動かしたいので、0s
  2. 交互に動かしたいので、ani2.end

の2つの開始時間が登録されています。

このサンプルでは順番に動かすための「id.end」しか使っていません。 この他にも「id.begin」と書いて他のアニメーションが始まるときに一緒に動かすこともできます。

投稿タイトルから離れますが、begin属性には click、mouseoverなどのイベントも指定することができます。

svgイベントでのアニメーションの開始はjavascriptとは無関係です。 複雑なことはできませんが、ユーザーがブラウザのjavascriptを切っていても動作させることができます。

投稿者