WebAmp.jp

JavaScript

two.js 使い方 – SVGでグリッド線を引いてみる

two.jsを使用してSVGでグリッド線を引いてみました。
ここではmakeLineを用いたアニメーションを紹介します。

cover_two_js

0. two.jsとは?

概要

Chrome ExperimentsというChromeブラウザの訴求の為に作られたデモンストレーションサイトの中でWorkShopとして配布しているライブラリの1つです。

使用用途

HTML5のSVG, Canvas, WebGLに対応したJavaScriptの2次元描画ライブラリです。
ベクターグラフィックをWebで使用する際に描画方法をSVG, Canvas, WebGLそれぞれブラウザによってかき分ける必要がなくなるのでクロスブラウザ対策としても有効です。

配布サイト

Two.js – jonobr1 (https://jonobr1.github.io/two.js/)

1. two.jsでラインを引いてみる

DEMO

See the Pen two.js – makeLine – STEP1 by webAmp.jp (@webamp-jp) on CodePen.

ポイント解説

js

	two.makeLine(
		x1, // X軸開始位置
		y1, // Y軸開始位置
		x2, // X軸終了位置
		y2  // Y軸終了位置
	);

makeLineでラインを生成します。
makeLineのパラメータは以下のとおりです。

2. アニメーションをつける

DEMO

See the Pen two.js – makeLine – STEP2 by webAmp.jp (@webamp-jp) on CodePen.

※アニメーションしない場合は「RERUN」を再度押してください。

ポイント解説

js

	// アニメーション処理
	two.bind('update',function() {
			two.clear();  // 描画処理クリア
			line.drow();  // 再描画 (内容はDEMO参照)
			anime_ctrl(); // アニメーション終了判定(内容はDEMO参照)
	}).play();

two.bindでupdateに関数を登録しておけばtwo.play()がコールされた時にその関数がアニメーションとして処理されます。

3. グリッド線を引いてみる

DEMO

See the Pen two.js – makeLine – STEP3 by webAmp.jp (@webamp-jp) on CodePen.

  1. と 2. を合わせてグリッド線をアニメーション付きで引いています。

まとめ

いかがだったでしょうか?
今回のDEMOは正直jQueryとHTMLでも実現可能ですが、今回two.jsとSVGの勉強のため記事とさせていただきました。
参考になれば幸いです。
次回はベクターグラフィック特有の曲線的なアニメーションも勉強して公開していく予定です。

そして、およそ2年ぶりの更新となりました。。。 
文章力を養うためにも最低月1更新を心がけたいと思う今日このごろです。