簡単なSVGアニメーション

簡単なSVGアニメーション

皆さん、こんにちは。

前回は、「SVG画像をつくる」と題して、簡単な図形の描画と麻の葉模様のSVG画像を紹介しました。

今回は、三角形が回転するアニメーションに挑戦してみます。
図形が回転するアニメーションの実現方法はいくつかありますが、CSSやスクリプトを使わずに、SVGコードのみで書いてみます。専用のアプリは必要ありませんので、ぜひ挑戦してみてください。

三角形を描く

まずは、対象となる三角形を描きます。
以下、「Run Pen」で描画の結果、「HTML」ボタンでSVGコードをご確認ください。

三角形を描いて、中心に円を配置しました。この円を回転の中心として三角形を回転させます。
回転のアニメーションは、回転の中心をきちんと指定しないと思わぬ結果になりますので注意が必要です。今回は回転の中心をわかりやすくするために、三角形の中心に円を描いています。
まだSVGに不慣れな方は、作業中は回転の中心に円を描くことをお勧めします。どこを軸に回転しているか一目でわかりますので。

ここで少し、コードの解説をしておきます。

<polygon points="62 13.5, 112 100, 12 100" fill="blue"/>

円は、<circle>で描くことができますが、三角形を直接描く要素はありません。三角形は、<path>や<polygon>を使えば描けますので、今回は<polygon>を使って描いてみます。

<polygon>は、接続された一連の直線の区間で構成される閉じた図形を描画します。最後の点は最初の点と結ばれます。つまり、<polygon>で３つの点を指定すれば、各点が直線で結ばれて、最後の点と最初の点が閉じられるので、三角形が描画されることになります。これわかります？

points="62 13.5, 112 100, 12, 100" fill="blue"

「points」属性で三角形の頂点座標を指定しています。
上記では、「x="62" y="13.5"」と「x="112 y="100"」と「x="12" y="100"」の各座標を直線で結んだ三角形になります。ちなみに、「fill="blue"」は、三角形を青色で塗るコードになります。

<circle cx="62" cy="71.166" r="2" fill="orange" />

円は、三角形の中心に配置しますので、三角形の中心（円の中心）の座標を求めなければなりません。
三角形の中心は、各座標値の合計を３で割ったものになるので、
円の中心のX座標は、「x = (62+112+12)/3」 => 「186/3」 =>「 62」、Y座標は、「y = (13.5+100+100)/3」 => 「213.5/3」 =>「 71.166666….」、となります。Y座標は、3で割り切れませんので、「71.166」としました。
中心の座標が決まれば、円を指定位置に描くことができます。

円は、<circle>要素で描きます。<circle>要素では、円の中心座標と半径を指定します。算出した中心座標（今回は、cx="62" cy="71.166"）と半径（今回はr="2"）を指定すれば、三角形の中心に円が描画されます。「fill="orange"」としていますので、円はオレンジ色に塗られます。

これで、回転させる対象となる三角形ができました。
次は、この三角形を回転させていきます。

三角形を回転させる

いよいよ、この記事の本命です。描いた三角形の中心を軸にして、回転させます。

まずは、結果をご確認ください。
「Run Pen」を押すと、三角形の中心を軸に回転すると思います。
「HTML」ボタンでSVGコードを表示して、どのようになっているか確認してみてください。

それでは、SVGコードを確認しましょう。

三角形と中心の円のコードは先程、確認しましたので追加のアニメーションのコードを見てみます。

コードは、以下となっています。

<g id="st0">
 　　<polygon points="62 13.5, 112 100, 12 100" fill="blue"/>
 　　<circle cx="62" cy="71.166" r="2" fill="orange"/>
</g>

<animateTransform xlink:href="#st0" attributeName = "transform" type="rotate" from="0 62 71.166" to="360 62 71.166" dur="6s" repeatCount = "indefinite" begin="1s"/>

追加したのは、<g>要素と、<animateTransform>要素です。

<g id="st0">
  ・・・三角形と円を描くコード
</g>

<animateTransform xlink:href="#st0" attributeName = "transform" type="rotate" from="0 62 71.166" to="360 62 71.166" dur="6s" repeatCount = "indefinite" begin="1s"/>

まずは、<g>要素から。
<g>要素は、他の SVG 要素をグループ化するために用いられるコンテナで、<g>と</g>の間のコードをグループ化します。
「id="st0"」で、グループ化した要素を「"st0"」という名称で処理できるようになります。

次が本命の<animateTransform>要素です。
<animateTransform>要素は、ターゲット要素に対して変換属性をアニメーション化し、これにより変形、スケーリング、回転およびまたは歪みのアニメーションを制御することができるすぐれものです。
回転だけでなく、変形、スケーリング（拡大・縮小）、歪みも表現できます。すごいですね。

では、順に属性の説明をしていきます。

xlink:href="#st0"

「xlink:href="st0"」は、<g>要素でグループ化した三角形と円を対象にアニメーション化します。

attributeName = "transform"

「attributeName = "transform"」は、属性の名前を指定します。

type="rotate"

「type="rotate"」は、回転を指示します。

from="0 62 71.166" to="360 62 71.166"

「from="0 62 71.166"」と「to="360 62 71.166""」は、アニメーションの開始の状態と終了の状態を指定します。「type」属性で回転を指示しているので、fromとtoは、回転に関する状態の指定となり、値は、「回転角」、「X座標」、「Y座標」になります。

今回の場合、初期値が「回転角0（ゼロ）度」、終了値が「回転角360度」、
X座標とY座標は、三角形の中心を指定していますので、三角形の位置は移動せず１回転することになります。ちなみに回転は、時計廻りとなります。逆方向に回転する場合は、回転角を「-360」と指定します。

dur="6s"

「dur="6s"」は、開始から終了までに要する時間を指定しています。「"6s"」は6秒間の指定となります。

repeatCount = "indefinite"

「repeatCount = "indefinite"」は、form〜toのアニメーションを何回繰り返すかの指定です。値に「indefinite」を指定すると無限の繰り返しになります。

begin="1s"

「begin="1s"」は、アニメーションの開始タイミングの指定です。「"1s"」は、1秒後に開始するという指定です。

いかがでしょうか？
多少はご理解いただけたかと思います。

では、またよろしくお願いいたします。