TweenJSでアニメーションしてみる2（EaselJSも使ってみる）
masakiこんにちは。受託開発担当のMasaです。
前回 TweenJSの記事の続きで、今回はテキストのアニメーションを紹介します。
前回の予告では TweenJS を拡張した JSTween プロジェクトの TextTween を紹介すると書きましたが、コンストラクタを呼び出すだけで終わってしまうため、EaselJS + TweenJS でのテキストアニメーションを紹介することにしました。
有名なフレームワークなので説明は省略します。尚、現在の最新バージョンは v7.0 なのでこれを使用します。
とりあえず何かテキストを表示します。
canvas は必ず必要です。Stage は最上位のコンテナで、update することで子オブジェクトを描画します。
<!DOCTYPE html>
<head>
<script src='easeljs-0.7.0.min.js'></script>
<script>
window.onload = function() {
// canvas を指定してステージを作成
var stage = new createjs.Stage("c");
// 第1引数：描画する文字
// 第2引数：フォントスタイル
// 第3引数：フォントカラー
var text = new createjs.Text("CoReports","Bold 50px Tahoma", "#666666");
stage.addChild(text);
stage.update();
};
</script>
</head>
<body>
<canvas id="c">
未対応
</canvas>
</body>
１文字ずつアニメーションさせたいので、それぞれ別のテキストオブジェクトにします。
複数のテキストオブジェクトをまとめて扱いたいので Container を使用します。
<script>
window.onload = function() {
// canvas を指定してステージを作成
var stage = new createjs.Stage("c");
// オブジェクトをまとめて扱うために Container を使用
var container = new createjs.Container();
stage.addChild(container);
// 1文字ずつオブジェクト化
var w = 'CoReports';
for (var i = 0, width = 0; i < 9; i++) {
var s = w.substring(i, i + 1);
var text = new createjs.Text(s,"Bold 50px Tahoma", "#666666");
// 直前の文字の横に描画
text.x = width;
container.addChild(text);
width += text.getMeasuredWidth();
}
stage.update();
};
</script>
アニメーションなので、指定した間隔で再描画するために Ticker を使用します。
Ticker.addEventListener に Stage を渡すと、Tick イベントで Stage.update が実行されます。
今回は Stage.update をしたいだけなので今回はこれで十分です。
// 1秒間に50回描画する（tick イベントが起きる）
createjs.Ticker.setFPS(50);
// Stage を渡すと Stage.update が呼ばれる
createjs.Ticker.addEventListener("tick", stage);
// 不要
//stage.update();
Text には scaleX, scaleY が指定できるので、これをトゥイーンさせます。
tweenjs-0.5.0.min.js を使用します。
<script src='tweenjs-0.5.0.min.js'></script>
テキストの初期 scale を 0 に設定し、1 秒後に 1 になるように実装します。
// 1文字ずつオブジェクト化
var w = 'CoReports';
for (var i = 0, width = 0; i < 9; i++) {
var s = w.substring(i, i + 1);
var text = new createjs.Text(s,"Bold 50px Tahoma", "#666666");
// サイズ0
text.scaleX = 0;
text.scaleY = 0;
// 直前の文字の横に描画
text.x = width;
container.addChild(text);
width += text.getMeasuredWidth();
}
for (var i = 0; i < 9; i++) {
// テキストの scaleX と scaleY を 0 → 1 へ
new createjs.Tween(container.getChildAt(i))
.to({scaleX:1,scaleY:1}, 1000, createjs.Ease.circOut);
}
テキストがだんだん前面に出てくるような感じになりました。
以上で終わりです。
コード全体はコチラ。
<!DOCTYPE html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#c {
background-color: Aliceblue;
width: 600px;
height: 200px;
}
</style>
<script src='easeljs-0.7.0.min.js'></script>
<script src='tweenjs-0.5.0.min.js'></script>
<script>
window.onload = function() {
// canvas を指定してステージを作成
var stage = new createjs.Stage("c");
// 1文字1オブジェクトにしてまとめて扱うために Container を使用
var container = new createjs.Container();
stage.addChild(container);
// 1秒間に50回描画する（tick イベントが起きる）
createjs.Ticker.setFPS(50);
// Stage を渡すと Stage.update が呼ばれる
createjs.Ticker.addEventListener("tick", stage);
// 1文字ずつオブジェクト化
var w = 'CoReports';
for (var i = 0, width = 0; i < 9; i++) {
var s = w.substring(i, i + 1);
var text = new createjs.Text(s,"Bold 50px Tahoma", "#666666");
// サイズ0
text.scaleX = 0;
text.scaleY = 0;
// 直前の文字の横に描画
text.x = width;
container.addChild(text);
width += text.getMeasuredWidth();
}
for (var i = 0; i < 9; i++) {
// テキストの scaleX と scaleY を 0 → 1 へ
new createjs.Tween(container.getChildAt(i))
.to({scaleX:1,scaleY:1}, 1000, createjs.Ease.circOut);
}
};
</script>
</head>
<body>
<canvas id="c">
未対応
</canvas>
</body>
</html>
