【Javascript】YUI アニメーション1

YUI アニメーション1

---

1: 簡単なサンプル
2: YAHOO.util.Anim の書式
3: Easingでエフェクト

Easingでエフェクト

YUIアニメーションで便利なのは、第4引数へ指定するEasingによるエフェクトです。 下記のような7通りの既成エフェクトを指定するだけで、手軽に動作を変化させることが可能です。

メソッド一覧
backBoth	少し戻って開始、少し超えて戻り終了
backIn	少し戻って開始
backOut	少し超えて戻り終了
easeBoth	ゆっくり始まって、終わりに向かって減速
easeIn	ゆっくり始まって、終わりに向かって加速
easeNone	一定の速度
easeOut	急速に始まって、終わりに向かって減速

backBoth

サンプル→backBothで幅を伸ばします
(少し戻って開始、少し超えて戻り終了)

このコードは次の通りです。

function chgWidth(){
	var myAnim = new YAHOO.util.Anim(
		'test', { width : {from : 30 ,to: 200 } },1,
		YAHOO.util.Easing.backBoth
	);
	myAnim.animate();
}

backIn

サンプル→backInで幅を伸ばします
(少し戻って開始)

このコードは次の通りです。

function chgWidth(){
	var myAnim = new YAHOO.util.Anim(
		'test', { width : {from : 30 ,to: 200 } },1,
		YAHOO.util.Easing.backIn
	);
	myAnim.animate();
}

backOut

サンプル→backOutで幅を伸ばします
(少し超えて戻り終了)

このコードは次の通りです。

function chgWidth(){
	var myAnim = new YAHOO.util.Anim(
		'test', { width : {from : 30 ,to: 200 } },1,
		YAHOO.util.Easing.backOut
	);
	myAnim.animate();
}

easeBoth

サンプル→easeBothで幅を伸ばします
(ゆっくり始まって、終わりに向かって減速)

このコードは次の通りです。

function chgWidth(){
	var myAnim = new YAHOO.util.Anim(
		'test', { width : {from : 30 ,to: 200 } },1,
		YAHOO.util.Easing.easeBoth
	);
	myAnim.animate();
}

easeIn

サンプル→easeInで幅を伸ばします
(ゆっくり始まって、終わりに向かって加速)

このコードは次の通りです。

function chgWidth(){
	var myAnim = new YAHOO.util.Anim(
		'test', { width : {from : 30 ,to: 200 } },1,
		YAHOO.util.Easing.easeIn
	);
	myAnim.animate();
}

easeNone

サンプル→easeNoneで幅を伸ばします
(一定の速度)

このコードは次の通りです。

function chgWidth(){
	var myAnim = new YAHOO.util.Anim(
		'test', { width : {from : 30 ,to: 200 } },1,
		YAHOO.util.Easing.easeNone
	);
	myAnim.animate();
}

easeOut

サンプル→easeOutで幅を伸ばします
(急速に始まって、終わりに向かって減速)

このコードは次の通りです。

function chgWidth(){
	var myAnim = new YAHOO.util.Anim(
		'test', { width : {from : 30 ,to: 200 } },1,
		YAHOO.util.Easing.easeOut
	);
	myAnim.animate();
}

次回は、Animクラスのメソッドなども使ってみようと思います。

前ページ