ほんっとにはじめてのHTML5とCSS3：[70-4] JavaScriptライブラリで作るSVGモーフィングアニメーション

[70-4] JavaScriptライブラリで作るSVGモーフィングアニメーション

最終更新日：2017年11月16日　（初回投稿日：2017年04月22日）

SVGアニメーションの続きです。
前回は CSSだけで作るドローイングアニメーションをやりましたが、今回は JavaScriptのライブラリを使って初歩的な SVGのモーフィングアニメーションを作ってみました。

本日のINDEX

Snap.svg でモーフィングアニメーション
その他 SVGアニメーションのための JavaScriptライブラリ

Snap.svg でモーフィングアニメーション

Snap.svg は Adobe社が提供しているライブラリです。

これを利用すれば、モーフィングだけでなく、かなり複雑なアニメーションを作ることも可能だそうですが、それにはJavaScriptが書けるスキルが必要...。
とにかく、いちばん簡単そうなモーフィングをやってみました。これならスグ使えます。

クリックでモーフィングするサンプル

サンプルはこちら（クリックで別ウィンドウで開きます）

まずは Illustratorなどのベクターグラフィックソフトで図形を作ります。
2つの図形はアンカーポイントを同じ数にすると、なめらかな動きになります。

サンプルの正円の場合は、メニューバーから「オブジェクト＞パス＞アンカーポイントの追加」で増やしました。ペンツールで増やしてもOK。
この段階で色はなんでも良し。あとで変えられるので。

次に、図形を SVGコードで書き出します。
SVGコードのゲットの仕方は「 [70-1] svg要素でベクターグラフィクスを埋め込もう | 別名保存でsvgを書き出す」で。

SVGのコードのうち、2つの図形のパス（d=' ' の内容）を JavaScript内にコピペで仕込みます。

クリックで開始するモーフィングのHTMLとjs

<svg id="star" version="1.1" xmlns="http://www.w3.org/2000/svg" width="240px" height="240px"></svg>
<script src="js/snap.svg-min.js"></script>
<script>
var pathFrom = '最初のパス（d=' 'の中身です）';
var pathTo = '変形後のパス（d=' 'の中身です）';

var s = Snap('#star');
var path = s.path(pathFrom).attr({fill:'#fdd35c'});
var isdir = false;
s.click(function () {  //クリックでアニメーション開始
	if (!isdir) {path.animate({path:pathTo, fill:'#ec6d74'}, 1000, mina.bounce);
    isdir = true;
    } else {  //再クリックで元に戻すアニメーション開始
        path.animate({path:pathFrom, fill:'#fdd35c'}, 1000, mina.bounce);
        isdir = false;
        }
});
</script>

1行目は <svg>要素ですが、中身はJavaScriptで書くので無しに。そのJavaScript内で紐付けるために idを付けておきます。
サンプルでは一応サイズ（width と height）を書きましたが、CSSで指定するならこれも不要。
この <svg>要素の位置にSVGが表示されます。

2行目にダウンロードした「snap.svg-min.js」を読み込ませていますが、これはここじゃなくても、<svg>要素の前でも <head>部に読み込ませてもOK。

その後、JavaScriptで変形前・変形後のパスや色の指定イージングの種類を指定していきます。

4、5行目はパスの指定です。
「var pathFrom」に変形前の図形のパスをコピペ。先ほど書き出した SVGコードの <path>要素の中の d属性の内容をコピペします。
「var pathTo」には変形後の図形のパスをコピペします。

変数「s」に idを付けておいた<svg>要素を紐付けます（7行目）

path.animate() でアニメーションさせたい内容を指定します。（11、14行目）
先ほど変数で指定しておいたパス「pathFrom」から「pathTo」に変化（その逆の変化も）させています。
ついでに色も「fill:'#fdd35c'」から「fill:'#ec6d74'」に変化させました。

数字の「1000」は「duration」。アニメーションの持続時間をミリ秒で指定します。ここでは1秒にしたので1000。
そのあとの「mina.bounce」はイージングの種類で、ここではバウンズするようにしました。
Snap.svgのこのほかのイージングには「mina.linear」「mina.easeout」「mina.easein」「mina.easeinout」「mina.backin」「mina.backout」「mina.elastic」があります。

連続ループでモーフィングするサンプル

クリックなどで発火するのではなく、連続でループするサンプルも作ってみました。
サンプルはこちら（クリックで別ウィンドウで開きます）

先ほどの「クリックによるモーフィング」とほとんど同じコード。11行目以降が少し違う程度です。
最後（19行目）の「AnimationSvg()」は忘れずに。アニメーションが開始しません。
イージングはここでは「mina.easeout」を使ってみました。

連続ループモーフィングのHTMLとjs

<svg id="star-ani" version="1.1" xmlns="http://www.w3.org/2000/svg" width="240px" height="240px"></svg>
<script src="js/snap.svg-min.js"></script>
<script>
var pathOne = '最初のパス（d=' 'の中身です）';
var pathTwo = '変形後のパス（d=' 'の中身です）';

var $svg = Snap('#star-ani');
var $pth = $svg.path(pathOne).attr({fill:'#fdd35c'});
var isdir = false;

function AnimationSvg() {  //アニメーションの指定
	if (!isdir) {$pth.animate({path:pathTwo, fill:'#ec6d74'}, 1000, mina.easeout, AnimationSvg);
	isdir = true;
	} else {
		$pth.animate({path:pathOne, fill:'#fdd35c'}, 1000, mina.easeout, AnimationSvg);
		isdir = false;
		}
}
AnimationSvg();  //アニメーション開始
</script>

モーフィングの応用（他サイト様をメモ）

この「Snap.svg」のモーフィングアニメーションを使った、より実用的なサンプルを紹介してくださっているサイトがありましたのでメモ。
Snap.svgを使ったSVGのパスのモーフィングアニメーションデモ | WordPressテーマ／DigiPress

マウスオーバー時にSVGがモーフィングしながらカーテンのように上がるエフェクトです。

その他 SVGアニメーションのための jsライブラリ

その他の SVGアニメーション用の JavaScriptライブラリをピックアップ。

Distorted Button Effects

Adrien Denat氏作の SVGフィルターの歪み効果などを使ったボタンエフェクト。デモはこちら

ダウンロードしたファイルのうち「main.css」「TweenMax.min.js」「main.js」を使います。
2つのJS「TweenMax.min.js」「main.js」はボタンより後に置かないと動きませんでした。

コレ、面白いエフェクトなんだけど、実験的なモノだったらしく、Chrome, Opera, Safari でちゃんと動作しないようです。Firefoxだけはちゃんと見れました...。

Animated SVG Icons with Snap.svg

本記事冒頭で使った Snap.svg を使用したアイコンエフェクト。動きが単純でカワイイ。
デモはこちら

xCharts.js

棒グラフや折れ線クラフ用の JSライブラリ。

Animated Interactive Donut Chart with jQuery and Snap.svg

jQuery と Snap.svg を使用した円グラフ用の JSライブラリです。デモはこちら

次回予告

次回は SVGスプライトを使ってみます。
これは、複数のSVGを1つにまとめて、HTML上で個別に呼び出すというモノだそうです。
SNSアイコンなどのSVGをページ内で複数使う時に便利です。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2017-11-16（Thu）│
投稿日：2017-04-22（Sat）│
カテゴリ：はじめてのHTML

Pagetop ↑

« next ホーム prev »

コメントの投稿