元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

【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要素は、要素の属性値を変更してアニメーションさせます。