【SVG】アニメーション1(属性値の変化)

SVGでは、アニメーションのための要素があります。今回は、そのひつとである「animate要素」について見ていきます。animate要素は、要素の属性値を変化させてアニメーションさせるものです。例えば、色や不透明度を変更してアニメーションさせます。

animate要素

要素の属性値を変化させるアニメーション。アニメーション要素の属性は、以下などです。

• attributeName:変化の対象となる属性の名前を指定する
• from:開始時の値。
• to:終了時の値。
• dur:アニメーションが開始してから終了するまでの時間。
• repeatCount:繰り返しの回数。無限に繰り返す場合は、indefiniteを指定する。
• fill:アニメーションが終了した後に、属性値を開始の状態に戻すのか、終了したときの状態のままにするのかを決める。
  • remove:属性値を開始の状態に戻す。デフォルト値。
  • freeze:属性値を終了したときの状態のままにする。

属性値を変化させるアニメーション

<circle cx="20" cy="35" r="20" fill="green">
  <animate attributeName="cx" from="15" to="85" dur="4s" repeatCount="3" fill="freeze"/>
</circle>

不透明度を変化させるアニメーション

<ellipse cx="50" cy="35" rx="40" ry="25" fill="dodgerblue"/>
<rect x="5" y="5" width="90" height="60" fill="mediumblue">
  <animate attributeName="opacity" from="1" to="0" dur="4s" repeatCount="indefinite"/>
</rect>

複数の属性のアニメーション

<rect x="10" y="10" fill="darkcyan">
  <animate attributeName="width" from="10" to="80" dur="4s" repeatCount="indefinite"/>
  <animate attributeName="height" from="50" to="10" dur="4s" repeatCount="indefinite"/>
</rect>

まとめ

animate要素の記述方法について書きました。animate要素は、要素の属性値を変更してアニメーションさせます。