WEBマーケティングで言われている視覚効果で、WEBページにおいて閲覧ユーザーは、動くものに目が行く事から、静止画が並んでいるサイトで部分的にみて欲しいポイントのみをアニメーションさせるというのは、クリック率が上がるマーケティング効果があります。
これまでは、gif画像を使ったり、png画像をjavascriptでパラパラアニメさせていたりしたのですが、svgでアニメが使えるという状態になると、これまでのビットマップアニメのような画像容量を気にする事はなく、比較的軽い容量で安定したアニメーションが実現できます。
今回はそんなSVGアニメーションを学習してみます。
SVGアニメーション設定
SVGアニメーションは動かしたいタグに内包するように、animation（またはanimateTransform）タグを記載する事で、キーフレームとアニメーション値を設定する事ができます。
簡単なアニメーションを作ってみて、その内容を見ていきましょう。
尚、javascriptでの記述は前回構築したjsライブラリを実行しているので、
SVG学習 3日目「Javascriptで描画」のsvg.jsをコピペして使ってください。
rectのサイズを変更するアニメ
0秒から５秒の感覚でwidthの値を10から160に変動していくアニメーションです。
animationタグ内のfillは塗りつぶしではなく、アニメーション終了後の状態を保持するか、初期状態に戻すかの設定ができます。
freeze : アニメ終了状態で保持
remove : 初期値に戻す
<svg width="200" height="200" id="test_1" version="1.1">
<g>
<rect x="0" y="0" width="160" height="160" fill="skyblue" stroke="blue" stroke-width="4">
<animate attributeName="width" attributeType="XML" begin="0s" dur="5s" fill="freeze" from="10" to="160"></animate>
</rect>
<rect x="0" y="0" width="80" height="80" fill="tomato" rx="8" ry="8" transform="translate(80 20) rotate(45)"></rect>
</g>
</svg>
<div id="svg"></div>
<script>
new svgDraw("#svg" , {width:600 , height:200 , id : "test_1" , version : "1.1" , css:"svg.css"} , [
["g" , {} , [
["rect" , {x:0 , y:0 , width:10 , height:160 , fill:"skyblue" , stroke:"blue" , "stroke-width":"4"} , [
["animate" , {attributeName:"width" , attributeType:"XML" , begin:"0s" , dur:"5s" , fill:"freeze" , from:"10" , to:"160"}]
]],
["rect" , {x:0 , y:0 , width:80 , height:80 , fill:"tomato" , rx:8 , ry:8 , transform:{rotate:45 , translate:{x:80 , y:20}}}],
]]
]);
</script>
色を変更するアニメーション
fillやstrokeなどの色もアニメーションできてしまいます。
これは便利ですね。
<svg width="200" height="200" id="test_1" version="1.1">
<g>
<rect x="0" y="0" width="160" height="160" fill="skyblue" stroke="blue" stroke-width="4">
<animate attributeName="fill" attributeType="XML" begin="0s" dur="5s" fill="freeze" from="tomato" to="skyblue"></animate>
</rect>
<rect x="0" y="0" width="80" height="80" fill="tomato" rx="8" ry="8" transform="translate(80 20) rotate(45)"></rect>
</g>
</svg>
<div id="svg"></div>
<script>
new svgDraw("#svg" , {width:600 , height:200 , id : "test_1" , version : "1.1" , css:"svg.css"} , [
["g" , {} , [
["rect" , {x:0 , y:0 , width:160 , height:160 , fill:"skyblue" , stroke:"blue" , "stroke-width":"4"} , [
["animate" , {attributeName:"fill" , attributeType:"XML" , begin:"0s" , dur:"5s" , fill:"freeze" , from:"tomato" , to:"skyblue"}]
]],
["rect" , {x:0 , y:0 , width:80 , height:80 , fill:"tomato" , rx:8 , ry:8 , transform:{rotate:45 , translate:{x:80 , y:20}}}],
]]
]);
</script>
移動
移動はrectのx値に対して行なってもいいのですが、gでグループ化した要素に対してもアニメーションをつける事ができます。
そうすることで、グループ全体を一括でアニメーションさせる事ができるようになります。
ただし、gタグにはx属性はないので、transformのtranslateの値を動かす必要があります。
通常のアニメーションは"animation"タグでいいのですが、transformは"animationTransform"タグを使用します。
attributeName="transform" type="translate"という風に設定して、from - toに、開始、終了の座標を記載するだけで、動作してくれます。
<svg width="300" height="200" id="test_1" version="1.1">
<g>
<animateTransform attributeName="transform" type="translate" attributeType="XML" begin="0s" dur="20s" fill="freeze" from="0,0" to="100,0" />
<rect x="0" y="0" width="160" height="160" fill="skyblue" stroke="blue" stroke-width="4"></rect>
<rect x="0" y="0" width="80" height="80" fill="tomato" rx="8" ry="8" transform="translate(80 20) rotate(45)"></rect>
</g>
</svg>
<div id="svg"></div>
<script>
new svgDraw("#svg" , {width:600 , height:200 , id : "test_1" , version : "1.1" , css:"svg.css"} , [
["g" , {} , [
["animateTransform" , {attributeName:"transform" , type:"translate" , attributeType:"XML" , begin:"0s" , dur:"5s" , fill:"freeze" , from:"0,0" , to:"100,0"}],
["rect" , {x:0 , y:0 , width:160 , height:160 , fill:"skyblue" , stroke:"blue" , "stroke-width":"4"}],
["rect" , {x:0 , y:0 , width:80 , height:80 , fill:"tomato" , rx:8 , ry:8 , transform:{rotate:45 , translate:{x:80 , y:20}}}],
]]
]);
</script>
回転
rotateもtranslateと同じくanimationTransformを使います。
そんなに難しくないので、scaleも同じ要領で行えますね。
<svg width="300" height="200" id="test_1" version="1.1">
<g>
<animateTransform attributeName="transform" type="rotate" attributeType="XML" begin="0s" dur="20s" fill="freeze" from="-90" to="0" />
<rect x="0" y="0" width="160" height="160" fill="skyblue" stroke="blue" stroke-width="4"></rect>
<rect x="0" y="0" width="80" height="80" fill="tomato" rx="8" ry="8" transform="translate(80 20) rotate(45)"></rect>
</g>
</svg>
<div id="svg"></div>
<script>
new svgDraw("#svg" , {width:600 , height:200 , id : "test_1" , version : "1.1" , css:"svg.css"} , [
["g" , {} , [
["animateTransform" , {attributeName:"transform" , type:"rotate" , attributeType:"XML" , begin:"0s" , dur:"5s" , fill:"freeze" , from:"90" , to:"0"}],
["rect" , {x:0 , y:0 , width:160 , height:160 , fill:"skyblue" , stroke:"blue" , "stroke-width":"4"}],
["rect" , {x:0 , y:0 , width:80 , height:80 , fill:"tomato" , rx:8 , ry:8 , transform:{rotate:45 , translate:{x:80 , y:20}}}],
]]
]);
</script>
参考
https://triple-underscore.github.io/SVG11/animate.html
次回予告
今回先走って使っている、オブジェクトのグループ化ができる、"g"タグについて学習します。
