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

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

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




Metamorphosis

160112_02

https://bonnemarque.se/

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

160405_icon_

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

作り方

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

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

イラレで作ったパスをアウトライン化→SVGで保存。SVGファイルをエディタで開いてpathの値を使います。
160331
プラグインは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モーフィングアニメーション」でした。

Share

  • このエントリーをはてなブックマークに追加
  • 31

Follow(SNSで定期購読)

コメントをどうぞ

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>