SVG画像のアニメーション

2022-07-08

前回は、ツールやエディタを使ってSVG画像を作成しました。
今回はSVG画像をアニメーションさせて動かしてみましょう。
ここでは、SVGタグ内にアニメーションタグ（要素オブジェクトのanimate機能等）を記述する方法を説明していきます。

アニメーションの種類

SVG画像に下記のような変化を加え、その過程が表示される事でアニメーションが出来上がります。

パスの変形
縮小・拡大、回転
色の変化
線に沿っての移動

また、開始タイミングや繰り返しの設定等で、より細かくアニメーションを制御することができます。

アニメーションの書き方

以下の説明とは別の書き方が出来るものもありますが、ここでは覚える事を最小限にするため、なるべく1種類の書き方に揃えています。

共通設定項目

<animate dur="10s" ....

dur	アニメーションの所要時間を指定

形状の変化

複雑な形状の変化を行うには、animateタグを使って下記のパラメーターを設定します。　

<svg viewBox="-15 -15 30 30">
  <path style="stroke:#ff9900; fill:none">
    <animate dur="10s" attributeName="d" values="
      M 0.00,-10.00 L 5.88,-8.09  9.51,-3.09  9.51,3.09  5.88,8.09  0.00,10.00 -5.88,8.09 -9.51,3.09 -9.51,-3.09 -5.88,-8.09 Z;
      M 0.00,-10.00 L 2.35,-3.24  9.51,-3.09  3.80,1.24  5.88,8.09  0.00, 4.00 -5.88,8.09 -3.80,1.24 -9.51,-3.09 -2.35,-3.24 Z;
      M 0.00,-10.00 L 5.88,-8.09  9.51,-3.09  9.51,3.09  5.88,8.09  0.00,10.00 -5.88,8.09 -9.51,3.09 -9.51,-3.09 -5.88,-8.09 Z;
    " repeatCount="indefinite" />
  </path>
</svg>

attributeName	変化させる属性を指定 pathタグの場合はｄとなる
values	パスの変化点をセミコロンで区切って記述

下記の点に注意が必要です。

パスの頂点の数は必ず一致させる
各頂点は直線的に移動する

拡大・縮小

拡大・縮小のアニメーションには、animateTransformタグを使い、下記のように設定します。

<svg viewBox="-15 -15 30 30">
  <path d="M 0.00,-10.00 L 2.35,-3.24  9.51,-3.09  3.80,1.24  5.88,8.09  0.00, 4.00 -5.88,8.09 -3.80,1.24 -9.51,-3.09 -2.35,-3.24 Z" style="stroke:#ff9900; fill:none">
    <animateTransform dur="5s" attributeName="transform" type="scale" values="1,1; 0.4,0.4; 1.5,1.0; 1,1;" repeatCount="indefinite" />
  </path>
</svg>

attributeName	transform
type	scale
values	横・縦の大きさの比率をセミコロンで区切って指定

回転

回転のアニメーションには、animateTransformタグを使い、下記のように設定します。

<svg viewBox="-15 -15 30 30">
	<path d="M 0.00,-10.00 L 2.35,-3.24  9.51,-3.09  3.80,1.24  5.88,8.09  0.00, 4.00 -5.88,8.09 -3.80,1.24 -9.51,-3.09 -2.35,-3.24 Z" style="stroke:#ff9900; fill:none">
		<animateTransform attributeName="transform" dur="20s" type="rotate" values="0,0,0;360,0,0;" repeatCount="indefinite" />
	</path>
</svg>

attributeName	transform
type	rotate
values	回転角度（度）、中心座標をセミコロンで区切って指定

色の変更

色の変化

animateタグを使って、色が変わるアニメーションが作れます。

<svg viewBox="-15 -15 30 30">
	<path d="M 0.00,-10.00 L 2.35,-3.24  9.51,-3.09  3.80,1.24  5.88,8.09  0.00, 4.00 -5.88,8.09 -3.80,1.24 -9.51,-3.09 -2.35,-3.24 Z" style="stroke:none; fill:none">
		<animate attributeName="fill" dur="10s" values="#ffff00;#00dddd;#ffff00;" repeatCount="indefinite" />
	</path>
</svg>

attributeName	fill
values	色をセミコロンで区切って指定

色の透過

animateタグで、透明度が変わるアニメーションが作れます。

<svg viewBox="-15 -15 30 30">
  <path d="M 0.00,-10.00 L 2.35,-3.24  9.51,-3.09  3.80,1.24  5.88,8.09  0.00, 4.00 -5.88,8.09 -3.80,1.24 -9.51,-3.09 -2.35,-3.24 Z" style="stroke:#ff9900; fill:#ffff00">
    <animate dur="5s" attributeType="CSS" attributeName="opacity" values="0.1;1;0.1" repeatCount="indefinite" />
  </path>
</svg>

attributeType	CSS
attributeName	opacity
values	透明度をセミコロンで区切って指定

グラデーション

animateタグで、グラデーションの方向が変わるアニメーションが作れます。
グラデーションの基本については前回をご参照ください。

<svg viewBox="-15 -15 30 30">
  <defs>
    <linearGradient id="gra_star" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%"   stop-color="#ee66bb"></stop>
      <stop offset="50%"  stop-color="#ddff66"></stop>
      <stop offset="100%" stop-color="#00aa00"></stop>
      <animate attributeName="x1" dur="5s" values="-90%; 90%; -90%;" repeatCount="indefinite" />
      <animate attributeName="y1" dur="7s" values="-90%; 90%; -90%;" repeatCount="indefinite" />
    </linearGradient>
  </defs>
  <path d="M 0.00,-10.00 L 2.35,-3.24  9.51,-3.09  3.80,1.24  5.88,8.09  0.00, 4.00 -5.88,8.09 -3.80,1.24 -9.51,-3.09 -2.35,-3.24 Z" style="stroke:#none; fill:url(#gra_star)">
  </path>
</svg>

attributeName	x1 や y1
values	グラデーションの向きをセミコロンで区切って指定

移動

直線的な移動

animateタグで、パスの変化点を記述すると、直線的な動きのアニメーションになります。

<svg viewBox="-15 -15 30 30">
  <path style="stroke:#ff9900; fill:none">
    <animate dur="6s"attributeName="d" values="
      M  -4,-12 l 2.35,6.76 7.16,0.15 -5.71,4.33 2.08,6.85 -5.88,-4.09 -5.88,4.09 2.08,-6.85 -5.71,-4.33 7.16,-0.15 z;
      M   0, -4 l 2.35,6.76 7.16,0.15 -5.71,4.33 2.08,6.85 -5.88,-4.09 -5.88,4.09 2.08,-6.85 -5.71,-4.33 7.16,-0.15 z;
      M   4,-12 l 2.35,6.76 7.16,0.15 -5.71,4.33 2.08,6.85 -5.88,-4.09 -5.88,4.09 2.08,-6.85 -5.71,-4.33 7.16,-0.15 z;
      M  -4,-12 l 2.35,6.76 7.16,0.15 -5.71,4.33 2.08,6.85 -5.88,-4.09 -5.88,4.09 2.08,-6.85 -5.71,-4.33 7.16,-0.15 z;
      " repeatCount="indefinite" />
  </path>
</svg>

attributeName	d（pathタグの場合）
values	パスの変化点をセミコロンで区切って記述

パスは相対座標（小文字のパスコマンド）で記述しておくと、原点の座標を書き換えるだけですみます。

線に沿った移動

animateMotionタグを使って、設定したモーションパスに沿って動くアニメーションが作れます。

<svg viewBox="-15 -15 50 50">
  <path d="M 0.00,-10.00 L 2.35,-3.24  9.51,-3.09  3.80,1.24  5.88,8.09  0.00, 4.00 -5.88,8.09 -3.80,1.24 -9.51,-3.09 -2.35,-3.24 Z" style="stroke:#ff9900; fill:#ffff00;">
    <animateMotion dur="5s" path="M -5,15 Q 3,-20 25,10 Q 18,30 -5,15" repeatCount="indefinite" />
  </path>
  <path d="M -5,15 Q 3,-20 25,10 Q 18,30 -5,15" style="stroke:#dddddd; stroke-width:0.2; stroke-dasharray:1; fill:none;"/>
</svg>

path	モーションパスを設定書き方はpathタグと同じ

タイミング制御

開始タイミング制御

animateタグ等にbegin属性を設定する事で、アニメーションの開始タイミングを制御できます。
この例ではクリックで回転が始まり、それが終わると1秒後に透明度の変化が始まります。

<svg viewBox="-15 -15 30 30">
  <path d="M 0.00,-10.00 L 2.35,-3.24  9.51,-3.09  3.80,1.24  5.88,8.09  0.00, 4.00 -5.88,8.09 -3.80,1.24 -9.51,-3.09 -2.35,-3.24 Z" style="stroke:#ff9900; fill:#ffff00;">
    <animateTransform id="rotate_star" dur="1s" attributeName="transform" type="rotate" values="0,0,0;360,0,0;" begin="click;" />
    <animate dur="2s" attributeType="CSS" attributeName="opacity" values="1;0.3;1;0"  begin="rotate_star.end+1s;" />
  </path>
</svg>

begin	click	クリックされた時に開始
	id.end	idで指定されたアニメーションが終わった時に開始
	id.begin	idで指定されたアニメーションが始まった時に開始
	5s	ロードしてから5秒後に開始（負の値も設定可能）
	click+2s	クリックされてから2秒後に開始

開始タイミングはセミコロンで区切って複数書くことができます。

動作タイミング制御

animateタグ等にkeyTimes属性を設定する事で、アニメーションのタイミングを制御できます。
この例ではクリック後、アニメーション開始から4秒後に90度まで回転し、そこから2秒で180度反転して、4秒かけて0度に戻ります。

<svg viewBox="-15 -15 30 30">
  <path d="M 0.00,-10.00 L 2.35,-3.24  9.51,-3.09  3.80,1.24  5.88,8.09  0.00, 4.00 -5.88,8.09 -3.80,1.24 -9.51,-3.09 -2.35,-3.24 Z" style="stroke:#ff9900; fill:#ffff00;">
    <animateTransform dur="10s" attributeName="transform" type="rotate" values="0,0,0;90,0,0;-180,0,0;0,0,0;" keyTimes="0;0.4;0.6;1" begin="click;" />
  </path>
</svg>

keyTimes

それぞれの変化にかかる時間の比率を0～1の範囲で書く
valuesに値が4組あれば、keyTimesにも4つ記述する

animateタグ等にcalcMode属性とkeySplines属性を設定する事で、アニメーション変化の速度を制御できます。
この例では、星をクリックすると、左の星は徐々に回転が速くなり、ゆっくり終わります（CSSのease-in-outと同様）。
右の星は急速に回転し、ゆっくり終わります。

<svg viewBox="-15 -15 50 50">
  <path d="M 0,-10 L 2.35,-3.24  9.51,-3.09  3.80,1.24  5.88,8.09  0.00, 4.00 -5.88,8.09 -3.80,1.24 -9.51,-3.09 -2.35,-3.24 Z" style="stroke:#ff9900; fill:#ffff00;">
    <animateTransform id="star1" dur="4s" attributeName="transform" type="rotate" values="0,0,0;360,0,0;" calcMode="spline" keySplines="0.5 0 0.5 1;" begin="click;star2.begin;" />
  </path>
  <path d="M 22,-10 l 2.35,6.76 7.16,0.15 -5.71,4.33 2.08,6.85 -5.88,-4.09 -5.88,4.09 2.08,-6.85 -5.71,-4.33 7.16,-0.15 z" style="stroke:#00aaff; fill:#00ddff;">
    <animateTransform id="star2" dur="4s" attributeName="transform" type="rotate" values="0,22,0;360,22,0;" calcMode="spline" keySplines="0 0.75 0.25 1;" begin="click;star1.begin;" />
  </path>
</svg>

calcMode	keySplinesを使う場合は spline を指定するデフォルトでは linear になっている
keySplines	経過時間と変化量を表す3次ベジエ曲線の制御点x1,y1、x2,y2を指定する valuesに値が2組あれば、keySplinesには1組記述する（

繰り返し方法

animateタグ等にrepeatCount属性を設定すると、アニメーションの繰り返し回数を指定できます。
この例では、星をクリックすると、左の星は回転し続けますが、右の星は2回転で終わります。

<svg viewBox="-15 -15 50 50">
  <path d="M 0,-10 L 2.35,-3.24  9.51,-3.09  3.80,1.24  5.88,8.09  0.00, 4.00 -5.88,8.09 -3.80,1.24 -9.51,-3.09 -2.35,-3.24 Z" style="stroke:#ff9900; fill:#ffff00;">
    <animateTransform id="star3" dur="3s" attributeName="transform" type="rotate" values="0,0,0;360,0,0;" repeatCount="indefinite" begin="click;star4.begin;" />
  </path>
  <path d="M 22,-10 l 2.35,6.76 7.16,0.15 -5.71,4.33 2.08,6.85 -5.88,-4.09 -5.88,4.09 2.08,-6.85 -5.71,-4.33 7.16,-0.15 z" style="stroke:#dd0099; fill:#ff88aa;">
    <animateTransform id="star4" dur="3s" attributeName="transform" type="rotate" values="0,22,0;360,22,0;" repeatCount="2" begin="click;star3.begin;" />
  </path>
</svg>

repeatCount

アニメーションの繰り返し回数を指定する
indefinite と書くと無限に繰り返す
デフォルトは1

終了状態の維持

animateタグ等にfill属性に freeze を設定すると、アニメーション終了時の状態を維持することができます。
初期設定ではアニメーション開始時の状態に戻ります。

<svg viewBox="-15 -15 50 50">
  <path d="M 0,-10 L 2.35,-3.24  9.51,-3.09  3.80,1.24  5.88,8.09  0.00, 4.00 -5.88,8.09 -3.80,1.24 -9.51,-3.09 -2.35,-3.24 Z" style="stroke:#ff9900; fill:#ffff00;">
    <animate id="star5" dur="2s" attributeType="CSS" attributeName="opacity" values="1;0.1;" fill="remove" begin="click;star6.begin;" />
  </path>
  <path d="M 22,-10 l 2.35,6.76 7.16,0.15 -5.71,4.33 2.08,6.85 -5.88,-4.09 -5.88,4.09 2.08,-6.85 -5.71,-4.33 7.16,-0.15 z" style="stroke:#ff9900; fill:#ffff00;">
    <animate id="star6" dur="2s" attributeType="CSS" attributeName="opacity" values="1;0.1;" fill="freeze" begin="click;star5.begin;" />
  </path>
</svg>

fill	freeze	終了時の状態を維持する
	remove	開始時の状態に戻る（デフォルト）

下記のページが参考になります。

SVG:Scalable Vector Graphics|MDN
SVG animation with SMIL – SVG:Scalable Vector Graphics|MDN

2021-09-02