CATEGORY
SVG
【SVG】SVG POLYGON に anime.js で動きを付けてみよう

2,756 PV
軽量・簡単というキャッチと共に最近名前を見るようになった anime.js 。
前回 SVG 要素の回転を色々と調べているときに見かけたこのライブラリを、
今回は試してみようと思います。
まずはダウンロード
このサイト内にある Github のリンク先から、
必要なファイルをダウンロードしてきます。
簡単な使い方
この子、オフィシャルなドキュメントが Github にあるのですが、
フル英語だったので下記サイトを参考に大体の動きをつかみます。
僕が読んで理解した内容は、ざっとこんな感じでした。
anime({
targets: ****,//ターゲットエレメント
PARAM: ****,//可変させたいパラメーター
OPT: ****//その他オプション
});
/* OPT パラメーター */
delay : アニメーションが始まるタイミング(default:0 [ミリ秒])
duration : アニメーションが完了するまでの時間(default:0 [ミリ秒])
autoplay : 自動再生(default:true)
loop : 繰り返し(default:false)
direction : アニメーションの再生方向。normal/reverse/alternate のどれか(default:'normal')
easing : イージングの指定。使用できる種類は、console.log(anime.easings) で確認(default:'easeOutElastic')
elasticity : アニメーションに弾み具合を加える。(default:400)
begin : アニメーションの開始時に実行するコールバック関数(default:undefined)
update : アニメーションの実行中に実行するコールバック関数(default:undefined)
complete : アニメーションの終了時に実行するコールバック関数(default:undefined)
とりあえずやってみよー
まずは簡単に SVG ポリクジラ号に当て込んでみます。
<!-- SVG Whale v06 -->
<div id="svgWhaleV06">
<svg viewBox="0 0 455.545 375.82">
<defs>
<style type="text/css">
#svgWhaleV06 {position:relative; width:80%; margin:30px auto;}
#svgWhaleV06::before {content:''; display:block; padding-top:83%;}
#svgWhaleV06 svg {position:absolute; top:0px; left:0px; width:100%; height:100%;}
#svgWhaleV06 svg polygon {}
</style>
</defs>
<g>
<polygon points="**~**"/>
</g>
</svg>
</div>
<script>
'use strict';
var svgWhale06 = document.getElementById('svgWhaleV06');
var svgPoly = svgWhale06.getElementsByTagName('polygon');
var polyRote = anime({
targets: svgPoly[0],
rotate: [360],
duration: 5000,
direction: 'normal',
easing: 'linear',
elasticity: 0,
loop: true
});
</script>
<!-- /SVG Whale v06 -->
おぉぉ!なんだかくるくると回っておる!これは期待できるかも?!
transform-origin を設定してみる
<!-- SVG Whale v07 -->
<div id="svgWhaleV07">
<svg viewBox="0 0 455.545 375.82">
<defs>
<style type="text/css">
#svgWhaleV07 {position:relative; width:80%; margin:30px auto;}
#svgWhaleV07::before {content:''; display:block; padding-top:83%;}
#svgWhaleV07 svg {position:absolute; top:0px; left:0px; width:100%; height:100%;}
#svgWhaleV07 svg polygon {}
</style>
</defs>
<g>
<polygon points="**~**"/>
</g>
</svg>
</div>
<script>
'use strict';
var svgWhale07 = document.getElementById('svgWhaleV07');
var svgPoly = svgWhale07.getElementsByTagName('polygon');
var polyOrg = function(obj){
var p = obj.getAttribute('points').split(' ').join(',').split(',');
var x,y;
if(p.lengh = 6){
x = (parseFloat(p[0]) + parseFloat(p[2]) + parseFloat(p[4])) / 3;
y = (parseFloat(p[1]) + parseFloat(p[3]) + parseFloat(p[5])) / 3;
}else if(p.lengh = 8){
x = (parseFloat(p[0]) + parseFloat(p[2]) + parseFloat(p[4]) + parseFloat(p[6])) / 4;
y = (parseFloat(p[1]) + parseFloat(p[3]) + parseFloat(p[5]) + parseFloat(p[7])) / 4;
}
obj.setAttribute('style', 'transform-origin:' + x + 'px ' + y + 'px;');
}
for(var i=0; i<svgPoly.length; i++){
polyOrg(svgPoly[i]);
}
var polyRote = anime({
targets: svgPoly[0],
rotate: [360],
duration: 5000,
direction: 'normal',
easing: 'linear',
elasticity: 0,
loop: true
});
</script>
<!-- /SVG Whale v07 -->
ついに思い通りのくるくるキター!
素晴らしいです、anime.js 。
後はマウスに反応して回るように設定
<!-- SVG Whale v08 -->
<div id="svgWhaleV08">
<svg viewBox="0 0 455.545 375.82">
<defs>
<style type="text/css">
#svgWhaleV08 {position:relative; width:80%; margin:30px auto;}
#svgWhaleV08::before {content:''; display:block; padding-top:83%;}
#svgWhaleV08 svg {position:absolute; top:0px; left:0px; width:100%; height:100%;}
#svgWhaleV08 svg polygon {}
</style>
</defs>
<g>
<polygon points="**~**"/>
</g>
</svg>
</div>
<script>
'use strict';
var animations = [];
var svgWhale08 = document.getElementById('svgWhaleV08');
var svgPoly = svgWhale08.getElementsByTagName('polygon');
function setOrg (obj){
var p = obj.getAttribute('points').split(' ').join(',').split(',');
var x,y;
if(p.lengh = 6){
x = (parseFloat(p[0]) + parseFloat(p[2]) + parseFloat(p[4])) / 3;
y = (parseFloat(p[1]) + parseFloat(p[3]) + parseFloat(p[5])) / 3;
}else if(p.lengh = 8){
x = (parseFloat(p[0]) + parseFloat(p[2]) + parseFloat(p[4]) + parseFloat(p[6])) / 4;
y = (parseFloat(p[1]) + parseFloat(p[3]) + parseFloat(p[5]) + parseFloat(p[7])) / 4;
}
obj.setAttribute('style', 'transform-origin:' + x + 'px ' + y + 'px;');
}
var polyAnimation = function(){
var polyRote = anime({
targets: this,
rotate: [0,360],
duration: 5000,
direction: 'normal',
easing: 'linear',
elasticity: 0,
loop: true
});
animations.push(polyRote);
}
var stopAnimation = function(){
var polyStop = anime.remove(this);
var index = animations.indexOf(this);
if (index > -1) animations.splice(index, 1);
}
for(var i=0; i<svgPoly.length; i++){
setOrg(svgPoly[i]);
svgPoly[i].addEventListener('mouseover', polyAnimation, false);
svgPoly[i].addEventListener('mouseout', stopAnimation, false);
}
</script>
<!-- /SVG Whale v08 -->
うん、大分頑張っていじくってみたんですが、どうしてもマウスアウト時にアニメーションを取り除いて、rotate
を初期値に戻すってことが出来なかったです。悔しい。。。。
単にスクリプトの書き方が下手なだけだと思うので、もしわかる親切な方がいたら教えてください。
次は TweenMax あたりを試してみようかなー。
CATEGORY : SVG