スマホ対応アニメーション支援ライブラリ

var loader = new smart.Loader();
loader.load({
	red   :"img/ballRed.png",
	blue  :"img/ballBlue.png",
	green :"img/ballGreen.png",
	yellow:"img/ballYellow.png"
},function(imgs)
{
	var stage = new smart.Stage("demo2");

	// smart.Box を継承してテキストボタンを定義
	var TextButton = smart.extend(smart.Box,{
		init:function(txt,fn)
		{
			smart.Box.apply(this,[120,20]);
			
			this.style({
				cursor:"pointer",
				background:"#3366ff",
				color:"#fff",
				lineHeight:"20px",
				textAlign:"center",
				userSelect:"none"
			});
			this.html = txt;
			this.on("click",function(e)
			{ 
				fn(txt);
			});
			this.on("mouseover",function(e)
			{ 
				this.style({background:"#5599ff"});
			});
			this.on("mouseout",function(e)
			{ 
				this.style({background:"#3366ff"});
			});
		}
	});

	// ボールを配置
	var ball1 = stage.addChild(new smart.Canvas(40,40,imgs.red));
	var ball2 = stage.addChild(new smart.Canvas(40,40,imgs.blue));
	var ball3 = stage.addChild(new smart.Canvas(40,40,imgs.yellow));
	var ball4 = stage.addChild(new smart.Canvas(40,40,imgs.green));

	// Tweenアニメーションを実行
	var move = function(easeName)
	{
		var delay = 0.2;
		ball1.x = 300;
		ball1.y = 40;
		smart.tween.start(ball1,{y:stage.height-80},easeName,0.25,delay);
		
		ball2.x = 400;
		ball2.y = 40;
		smart.tween.start(ball2,{y:stage.height-80},easeName,0.5,delay);
		
		ball3.x = 500;
		ball3.y = 40;
		smart.tween.start(ball3,{y:stage.height-80},easeName,0.75,delay);
		
		ball4.x = 600;
		ball4.y = 40;
		smart.tween.start(ball4,{y:stage.height-80},easeName,1,delay);
	}
	// テキストボタンを配置
	smart.each([
		"linear",
		"easeInSine",		"easeOutSine",		"easeInOutSine",
		"easeInQuad",		"easeOutQuad",		"easeInOutQuad",
		"easeInCubic",		"easeOutCubic",		"easeInOutCubic",
		"easeInQuart",		"easeOutQuart",		"easeInOutQuart",
		"easeInExpo",		"easeOutExpo",		"easeInOutExpo",
		"easeInBack",		"easeOutBack",		"easeInOutBack",
		"easeOutBounce",	"easeOutElastic"
	],function(i)
	{
		var btn = stage.addChild( new TextButton(this,move));
		btn.x = 10;
		btn.y = 22*i + 10
	});

	move("easeOutBounce");
});