WIZ-CODE.blog

JavaScriptやAjaxをテーマとしたブログです。

*

Uizeの基本的な使い方（その２）

   

前回扱ったUize.Fadeクラスを簡単にまとめてみます。 new Uize.Fadeでインスタンスを作成し、startメソッドでフェードを開始する。 
	 
	var f = new Uize.Fade({ startValue: 0, endValue: 100, duration: 2000 });
	f.start();
	 
インスタンスを作成後、setメソッドで後から設定することも可能。 
	 
	var f = new Uize.Fade();
	f.set({ startValue: 0, endValue: 100, duration: 2000 });
	 
また、startメソッドの引数に渡す方法もある。 
	 
	f.start({ startValue: 0, endValue: 100, duration: 2500 });
	 
設定可能なプロパティ startValue：　スタート時の値、数値もしくはオブジェクト（ハッシュ）形式で。 endValue：　終了時の値、同じく数値もしくはオブジェクト（ハッシュ）形式。 duration：　フェード時間。ミリ秒単位で。 quantization：　フェードの変化値。オブジェクト（ハッシュ）形式でも設定可。デフォルトでは浮動小数点数に。 reverse：　trueにするとフェード効果を逆転させる。 curve：　フェードでの遷移の仕方を決める。scriptaculousのtransitionオプションに似ている。デフォルトは直線的（linear）なのでそのままではあまり自然な動きではない。 Uize.Fade.celeration(acceleration, deceleration) curveオプションにはUize.Fade.celerationメソッドの返り値を入れます。Uize.Fade.celerationはフェード開始時の加速度（0.0-1.0）と、フェード終了時の減速度（0.0-1.0）を引数に渡します。 例：　Uize.Fade.celeration(0.25, 0.50); ⇒視覚的なカーブ曲線のグラフ Uize.Fadeクラスによる記述はやや煩雑ですが、Uize.Fxクラスを使うことで、もっと簡単に記述することができます。CSSプロパティの数値を遷移させる従来のエフェクトなら、Uize.Fxクラスを利用するのがいいでしょう。 
	 
Uize.module ({

	required:[
		'Uize.Fx',
		'Uize.Curve'
	],

	builder: function(){
		Uize.Fx.fadeStyle(			//Uize.Fxクラスのメソッド
			'elementID',				//第1引数に要素のID名
			{ width: 20, height: 20 },	//第2引数にスタート時のCSSプロパティ
			{ width: 200, height:200 },	//第3引数に終了時のCSSプロパティ
			2000,					//第4引数にフェード時間
			{ curve: Uize.Curve.easeInOutPow(4) } //第5引数にその他のプロパティ
		);
	}
});
	 
⇒Uize.Fxクラスによるフェードのサンプル ちなみに、Uize.Fx.fadeStyle()は第2、3引数にnullを渡すことが可能。第2引数をnullにすると、現在設定されているCSSプロパティからフェードがスタートする。第3引数をnullにすると、フェード終了時に現在設定されているCSSプロパティの値で終わる。 
	 
	Uize.Fx.fadeStyle(
		'elementID',	
		null,
		{ width: 200, height:200 },
		2000
	);
	 
その他、Uize.Fadeクラスの拡張であるUize.Fade.xFactoryを使った、フェードもあります。 ここではスライダー・ウィジェットを例に挙げています。 
	 
Uize.module ({
	required:[
		'Uize.Widget.Page',
		'Uize.Fade.xFactory',
		'Uize.Widget.Bar.Slider'
	],
	builder:function () {

		//ページ・ウィジェットのインスタンスを作成
		var page = window.page = new Uize.Widget.Page;

		//スライダー・ウィジェットのインスタンスを作成し、ページ・ウィジェットの子要素に追加する
		var slider = page.addChild('slider', Uize.Widget.Bar.Slider,{ minValue: 0, maxValue: 200 });

		//ページ・ウィジェットをウェブ上に適用する
		page.wireUi();
		
		//先ほど作成したスライダー・ウィジェットにアニメーションをつける
		Uize.Fade.fade(slider, 0, 200, 4000);
	}
});
	 
⇒Uize.Fade.fadeのサンプル

 - JavaScript/Ajax , ,