LimeJS Helloworldその3
2012.01.16
Category：Javascript
LimeJSで画像を読み込んむサンプルを作ってみます。
先日投稿した記事LimeJS Helloworldその2に引き続きLimeJSのHelloworld3です。次のような画像を読み込ませてアニメーションさせるDEMOを作ります。
※スマートフォンでも動きます。
実装方法はActionScript3で言えば、GraphicsクラスのbeginBitmapFillメソッドと似ています。
※以下、コメント部分に説明を記述しています。
//Imageクラスをインポートします goog.require('lime.fill.Image'); var imgURL = "hoge.jpg"; //画像のURLをImageクラスのコンストラクタに渡すだけ var imgfill = new lime.fill.Image(imgURL); //今回はSpriteインスタンスに画像を表示させます。 var sp = new lime.Sprite(); //ActionScript3のbeginBitmapFillメソッド的な所 sp.setFill(imgfill);
全体のソースはこちら
goog.provide('helloworld3');
goog.require('lime.Director');
goog.require('lime.Scene');
goog.require('lime.Layer');
goog.require('lime.fill.Image');
goog.require('lime.Sprite');
goog.require('lime.animation.Sequence');
goog.require('lime.animation.Spawn');
goog.require('lime.animation.FadeTo');
goog.require('lime.animation.MoveTo');
goog.require('lime.animation.ScaleTo');
goog.require('lime.animation.Easing');
helloworld3.start = function() {
var director = new lime.Director(document.body, 1024, 768);
var scene = new lime.Scene();
//画像読み込み
var imgfill = new lime.fill.Image('http://www.google.co.jp/logos/2012/steno12-hp.jpg');
var animation = function()
{
//レイヤーを作成
var layer = new lime.Layer().setPosition(512, 384);
//Spriteを作成
var sp = new lime.Sprite().setSize(280, 53).setFill(imgfill);
//AS3で言うaddChild
scene.appendChild(layer);
layer.appendChild(sp);
//各アニメーションを作成
var setScale = new lime.animation.ScaleTo(Math.random()+0.3).addTarget(sp).setDuration(0);
var alpha0 = new lime.animation.FadeTo(0).addTarget(sp).setDuration(0);
var setAlpha = new lime.animation.FadeTo(Math.random()+0.3).addTarget(sp).setDuration(0.3);
var alpha1 = new lime.animation.FadeTo(1).addTarget(sp).setDuration(0.6);
var afterAnim = new lime.animation.FadeTo(0).addTarget(sp).setDuration(0.6);
var xx = Math.random()*1024;
var yy = Math.random()*384 + 384;
//レイヤーの座標を設定する
layer.setPosition(xx,yy);
//座標計算
var dX = 100;
var tarX = xx + Math.random()*dX - dX*0.5;
var tarY = -100;
//移動するアニメーションを作成
var moveAnim = new lime.animation.MoveTo(tarX,tarY).addTarget(sp).setDuration(1.2).setEasing(lime.animation.Easing.EASEIN);
//シーケンス実行するアニメーションのインスタンスを作成
var alphaAnimAnim = new lime.animation.Sequence(
alpha0,
setAlpha
);
//アニメーションをパラレル実行させる
layer.runAction(new lime.animation.Spawn(
alphaAnimAnim,
setScale,
moveAnim
));
//アニメーションが終了したら生成したインスタンスを削除（コレしないとめちゃ動作が重くなる)
setTimeout(function(){
layer.removeAllChildren();
scene.removeChild(layer);
},1200);
}
//アニメーション開始
var id = setInterval(animation,100);
//シーンの更新
director.replaceScene(scene);
}
goog.exportSymbol('helloworld3.start', helloworld3.start);
実際に動かす場合は、ビルド作業が必要です。以下の記事内の「5.ビルドする」が参考になると思います。
[訂正]LimeJS Hello World
イマイチ分からない部分
- 画像が読み込み完了の通知
- AS3で言う、StageAlign的なこと・・TOP_LEFTにしたい
- AS3で言う、StageScaleMode的なこと・・NO_SCALEに設定したい
ある程度わかってきたら、
![はてなブックマーク - [訂正]LimeJS Hello World](http://b.hatena.ne.jp/entry/image/http://reinit.info/blog/archive/2012/01/04/relimejs-hello-world/ "はてなブックマーク - [訂正]LimeJS Hello World")
