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

軽量・簡単というキャッチと共に最近名前を見るようになった 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 あたりを試してみようかなー。