SVG学習 5日目「SVGアニメーション」

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

WEBマーケティングで言われている視覚効果で、WEBページにおいて閲覧ユーザーは、動くものに目が行く事から、静止画が並んでいるサイトで部分的にみて欲しいポイントのみをアニメーションさせるというのは、クリック率が上がるマーケティング効果があります。
 

これまでは、gif画像を使ったり、png画像をjavascriptでパラパラアニメさせていたりしたのですが、svgでアニメが使えるという状態になると、これまでのビットマップアニメのような画像容量を気にする事はなく、比較的軽い容量で安定したアニメーションが実現できます。
 

今回はそんなSVGアニメーションを学習してみます。

SVGアニメーション設定

SVGアニメーションは動かしたいタグに内包するように、animation(またはanimateTransform)タグを記載する事で、キーフレームとアニメーション値を設定する事ができます。
 

簡単なアニメーションを作ってみて、その内容を見ていきましょう。
 

尚、javascriptでの記述は前回構築したjsライブラリを実行しているので、SVG学習 3日目「Javascriptで描画」のsvg.jsをコピペして使ってください。

rectのサイズを変更するアニメ


 

0秒から5秒の感覚でwidthの値を10から160に変動していくアニメーションです。
 

animationタグ内のfillは塗りつぶしではなく、アニメーション終了後の状態を保持するか、初期状態に戻すかの設定ができます。
 

freeze : アニメ終了状態で保持
remove : 初期値に戻す
 

 

色を変更するアニメーション


 

fillやstrokeなどの色もアニメーションできてしまいます。
これは便利ですね。
 

 

移動


 

移動はrectのx値に対して行なってもいいのですが、gでグループ化した要素に対してもアニメーションをつける事ができます。
そうすることで、グループ全体を一括でアニメーションさせる事ができるようになります。
 

ただし、gタグにはx属性はないので、transformのtranslateの値を動かす必要があります。
 

通常のアニメーションは”animation”タグでいいのですが、transformは”animationTransform”タグを使用します。
attributeName=”transform” type=”translate”という風に設定して、from – toに、開始、終了の座標を記載するだけで、動作してくれます。
 

 

回転


 

rotateもtranslateと同じくanimationTransformを使います。
そんなに難しくないので、scaleも同じ要領で行えますね。
 

参考

https://triple-underscore.github.io/SVG11/animate.html

次回予告

今回先走って使っている、オブジェクトのグループ化ができる、”g”タグについて学習します。

過去のSVG記事

SVG学習 1日目「SVGの利点を再確認」
 

SVG学習 2日目「基本描画」
 

SVG学習 3日目「Javascriptで描画」
 

SVG学習 4日目「テキストと画像ファイルの挿入」
 

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です