Snap.svgを使ったSVGモーフィングアニメーション(clippathバージョン有り)

2016/4/6 2016/6/2 Animation, JS/jQuery

svgモーフィングアニメーションとは

以前SVGのアウトラインをアニメーションさせる記事を書きましたが、今回はSVGの塗りの部分が変形するアニメーションをやってみたいと思います。
前回のラインアニメーションはsvgのstroke-dashoffsetというプロパティーを操作してアニメーションさせる方法でしたが、今回は直接pathの値をいじってアニメーションさせる手法です。例えば印象的なサンプルサイトでいうと下記のようなサイトがあります。

Metamorphosis

https://bonnemarque.se/

また下記のようなアイコンアニメーションのプラグインもあります

http://alexk111.github.io/SVG-Morpheus/

作り方

まずは簡単にアイコンのpathをclickイベントで変化させてみます。

まずは下ごしらえにSVGデータからpathの値を入手します。

イラレで作ったパスをアウトライン化→SVGで保存。SVGファイルをエディタで開いてpathの値を使います。

プラグインはSnap.svgを使います。jQueryとプラグインを読み込んだらあとは先ほどコピーしたpathを変数にセットして下記の様にイベントに紐づけてanimateさせます。ほとんどjQueryと書き方同じですがeasingやプロパティなどは本家docsページで確認してください。

var snap   = Snap('#snapsvg-hoge'), //任意のDomをsnap.svgで使える様にします。
    toggle = false,
    path   = snap.path(apple).attr({　//パス・プロパティーをセット。
　　　　fill: '#e4007f'
　　});
snap.on('click',function () {　//アニメーションスタート
    if (!frag) {
        path.animate({path: fb, fill:'#00cce4'}, 330, mina.easeinout);
        frag = true;
    } else {
        path.animate({path: apple, fill:'#e4007f'}, 330, mina.easeinout);
        frag = false;
    }
});

DEMO1

いかがでしょう？結構あっさり出来てしまいます。

ここでおしまいだと小ネタ感が否めないので。。。
下記の様にスクロールイベントを紐づけてアニメーションさせればそれっぽくなりますね！
似たような形、大きさのパスで作成すればさらに美しい動きになると思います。

DEMO2

そしてclippathで画像をマスクしたバージョンも用意しました。(IEは対応してません…)

DEMO3

svgのアニメーション自体はIE9以上から対応しています。
以上「Snap.svgを使ったSVGモーフィングアニメーション」でした。

enumblog