2Dアニメーションライブラリtwo.jsの基本的な使い方
2Dアニメーションライブラリtwo.jsの基本的な使い方:
Webブラウザ上の2Dアニメーションライブラリ.
two.js.org
公式のdownloadからtwo.jsファイルをダウンロード。
とりあえずDevelopment Versionから落とす。
公式のサンプルコードをbody内の一番下に記述
実行結果
描画するHTML要素を取得する
Twoインスタンスを生成する
描画したい要素を作成する
作成した要素に設定をする
描画する
公式のサンプルコードを動かしてみる
実行結果
ここで、circleは(-70,0)とブラウザの表示外の位置をしているしrectは(70,0)と四角の下半分が隠れる位置を指定しているが、この意味は次のコードで分かる。
2つの要素をgroupという変数で１つのグループに束ねている。
circleとrectの位置は、groupの中心座標からの相対値を表すことになる。
実際の値で言うと
twoオブジェクトのupdateメソッドに任意の関数をbindし（割り当て）
することでupdate()を60fpsで無限ループとして呼び出す。必要ならば当然何らかの方法で終了処理を行わなければならない。このサンプルコードの場合は割り当てと同時にアニメーションを実行し、止まることなくアニメーションを繰り返すコードになる。
で止まる。
今回はここまで。使ってみて実際に詰まった所は次以降に書く。
Two.jsとは
Webブラウザ上の2Dアニメーションライブラリ.two.js.org
特徴
- モダンブラウザ向け（対応バージョン不明）
- jQueryと共存可能
- 同じAPIでSVG,Canvas,WebGLを使い分けられる
- SVG
- デフォルト
- パフォーマンスはあまり良くない
- 描画する内容がHTML要素として生成されるので描画結果をJavaScriptで扱うには向いている
- Canvas
- パフォーマンスはまあまあ良い
- 描画する内容はHTML要素として生成されず一枚の絵として描画される
- WebGL
- パフォーマンスは良い
- 描画する内容はHTML要素として生成されず一枚の絵として描画される
- ただし拡大縮小が苦手
- ドキュメントが少なく公式ドキュメントとexampleコードの読解がメイン
- 日本語ドキュメントはほぼ無い
- とはいえTwo.js自体で複雑な事はあまりやらない
- 少し複雑になことをやろうとするとSVG,Canvas,WebGLを知ることになる
- SVG
とりあえず使ってみる
始め方
- two.jsをダウンロード
- HTMLファイルを用意
- サンプルコードを記述
- HTMLファイルを開く
two.jsをダウンロード
公式のdownloadからtwo.jsファイルをダウンロード。とりあえずDevelopment Versionから落とす。
HTMLファイルを用意
- two.jsを読み込む
- bodyに描画エリアのdivを用意する（idは任意）
<html>
<head>
<script type="JavaScrpt" src="./two.js"></script>
</head>
<body>
<div id="draw-shapes">
</div>
</body>
</html>
サンプルコードを記述
公式のサンプルコードをbody内の一番下に記述<html>
<head>
<script src="./two.js"></script>
</head>
<body>
<div id="draw-shapes">
</div>
<script>
// Make an instance of two and place it on the page.
var elem = document.getElementById('draw-shapes');
var params = { width: 285, height: 200 };
var two = new Two(params).appendTo(elem);
// two has convenience methods to create shapes.
var circle = two.makeCircle(72, 100, 50);
var rect = two.makeRectangle(213, 100, 100, 100);
// The object returned has many stylable properties:
circle.fill = '#FF8000';
circle.stroke = 'orangered'; // Accepts all valid css color
circle.linewidth = 5;
rect.fill = 'rgb(0, 200, 255)';
rect.opacity = 0.75;
rect.noStroke();
// Don't forget to tell two to render everything
// to the screen
two.update();
</script>
</body>
</html>
HTMLファイルを開く
実行結果
基本的な使い方
描画するHTML要素を取得するvar elem = document.getElementById('draw-shapes');
// 描画エリアのサイズを指定
var params = { width: 285, height: 200 };
//Twoクラスのインスタンスを生成
var two = new Two(params).appendTo(elem);
// 円を作成する // 第一引数：X座標。画面の左上を0として右に行くほど大きくなる // 第二引数：y座標。画面の左上を0として下に行くほど大きくなる // 第三引数：円の直径 // この場合、座標(x,y)が(72,100）の位置に直径50の円を描いている var circle = two.makeCircle(72, 100, 50);
circle.fill = '#FF8000'; // 塗りつぶす色（CSSと同じ色指定方法） circle.stroke = 'orangered'; // フチの色CSSと同じ色指定方法） circle.linewidth = 5; // フチの幅
// 画面を更新するには必ず実行する。実行しないと実際に表示がされない。 two.update();
アニメーションさせてみる
公式のサンプルコードを動かしてみる<html>
<head>
<script src="./two.js"></script>
</head>
<body>
<div id="draw-shapes">
</div>
<script>
var elem = document.getElementById('draw-animation');
var two = new Two({ width: 285, height: 200 }).appendTo(elem);
var circle = two.makeCircle(-70, 0, 50);
var rect = two.makeRectangle(70, 0, 100, 100);
circle.fill = '#FF8000';
rect.fill = 'rgba(0, 200, 255, 0.75)';
var group = two.makeGroup(circle, rect);
group.translation.set(two.width / 2, two.height / 2);
group.scale = 0;
group.noStroke();
// Bind a function to scale and rotate the group
// to the animation loop.
two.bind('update', function (frameCount) {
// This code is called everytime two.update() is called.
// Effectively 60 times per second.
if (group.scale > 0.9999) {
group.scale = group.rotation = 0;
}
var t = (1 - group.scale) * 0.125;
group.scale += t;
group.rotation += t * 4 * Math.PI;
}).play(); // Finally, start the animation loop </script>
</body>
</html>
解説
group
// 座標(-70,0)を中心とした円を作成 var circle = two.makeCircle(-70, 0, 50); // 座標(70,0)を中心とした縦100横100の四角を作成 var rect = two.makeRectangle(70, 0, 100, 100);
// 複数の要素を束ねるグループを作成 var group = two.makeGroup(circle, rect); // translation.set(x,y)で位置を指定 // この場合twoオブジェクトの描画エリアの中央を指定 group.translation.set(two.width / 2, two.height / 2); // scaleは1が元の大きさを表す。0〜1の値を取る // 0ならば大きさは0になる group.scale = 0; group.noStroke();
circleとrectの位置は、groupの中心座標からの相対値を表すことになる。
実際の値で言うと
- groupの座標
- (142.5, 100)
-
circleの座標
- (142.5, 100)から(-70,0）だけ移動 ＝ (72.5,100)
-
rectの座標
- (142.5, 100)から(-70,0）だけ移動 ＝ (242.5,100)
アニメーション部分
twoオブジェクトのupdateメソッドに任意の関数をbindし（割り当て）two.play();
two.bind('update', function (frameCount) {
// group.scaleが１より大きかったらアニメーションを初期状態に戻す
if (group.scale > 0.9999) {
group.scale = group.rotation = 0;
}
// 1コマごとにちょっとずつgroup.scaleの値を増やして大きさを大きくする
var t = (1 - group.scale) * 0.125;
group.scale += t;
// 1コマごとにちょっとずつgroup.rotationの値を増やして回転させる
// rotationに指定する数値の単位はラジアン。
group.rotation += t * 4 * Math.PI;
}).play();
アニメーションの止め方
two.pause();
今回はここまで。使ってみて実際に詰まった所は次以降に書く。
コメント
コメントを投稿