WIZ-CODE.blog

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

*

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

      2009/11/23

Uizeは画像のワイプ効果のほか、多様なアニメーションを容易に実装できるフレームワークです。まず、Uizeの導入方法を見ていきます。まずはUizeフレームワークをこのサイトからダウンロードしてきます。 JSファイルだけをとっても数が膨大ですが、HTMLのscriptタグに記述する必要があるのは、Uize.js（11KB）だけです。他のファイルについては、必要であれば後から呼び出すことができます。もちろんUize.js以外でも使う分のファイルは事前にアップロードしておかなければなりません。（ただしUizeDotComで始まるJSファイルはサンプル用なので不要です）。 
	 
	<html>
		<head>
			<script type="text/javascript" src="js/uize/Uize.js"></script>
		</head>
		<body>
		..........
		..........
		</body>
	</html>
	 
Uize.jsを読み込むことで、Uizeクラスが利用できるようになります。Uizeクラスには、クラスを作成するsubclass()メソッドや、UizeのJSファイルを動的に読み込むmodule()などメソッドがあります。 
	 
Uize.module ({ /* JSファイルを動的に読み込むmoduleメソッド */

	required:[ /* requiredプロパティに読み込むファイルを配列で指定する */
		'Uize.Fade',
		'Uize.Node'
	],

	builder: function(){
		/* この関数内にコードを書く */
	}
});
	 
Uizeのモジュールを動的に読み込んで利用する場合、上記の方法が基本形になり、主要なコードはbuilderプロパティのなかに書いていきます。 Uizeの利用目的はやはりアニメーションでしょう。そして、Uizeでアニメーションの中心的な働きをするのはUize.Fadeクラスです。ただし、このクラスは数値を連続的に変化させる機能しかなく、DOM関連のクラスであるUize.Nodeと組み合わせることで、従来の視覚的効果を出す仕組みになっています。Uize.FadeのfadeメソッドやUize.Fxクラスを使えば数値変化とDOMの書き換えを同時に行うことができますが、あくまでUize.Fadeクラスが基本になります。Uize.Fadeでは、具体的には5秒間の間に数値を0から100まで連続的に変化させるといった設定を行うことになります。詳細な説明についてはこのページ（英文サイト）が参考になります。 
	 
Uize.module ({

	required:[
		'Uize.Fade',
		'Uize.Node' //Uize.FadeとUize.Nodeモジュールを呼び出す
	],

	builder: function(){
		var myFade = new Uize.Fade({ //ここでUize.Fadeクラスのインスタンスを作成
			startValue: 0, //初期値を設定
			endValue: 100, //最後に目指す数値を設定
			duration: 5000, //フェード時間を設定（ミリ秒単位なのでここでは5秒）
			quantization: 1 //このプロパティを設定することで、数値の変化量をコントロールできる。
			//1と設定すると数値は1ずつしか増えない。値が浮動小数点数になると厄介な場合などで有効。
		});

		myFade.wire('Changed.value', function(){ //"Changed.*"はカスタムイベント。ここではmyFadeインスタンスの値が変化したとき、第二引数のコールバックが呼び出される。
			Uize.Node.setValue('my_fade', myFade); //setValueはDOMを扱うUize.Nodeクラスのメソッド。第一引数に要素、第二引数にインスタンスを渡す。setValueが実行されると指定された要素の値に、第二引数で指定したインスタンスの変化値が代入される。
		});
		myFade.start(); //start()メソッドを呼び出すとフェードが開始される。
	}
});
	 
このフェードが開始されると’my_fade’というID名の要素の値が0から100へ5秒かけて連続的に変化することになります。ただ、これだけでは視覚的効果とは言い難いですね。HTML要素を動的に書き換えるエフェクトを行うには、CSSプロパティの値を直接書き換える必要があります。 
	 
Uize.module ({

	required:[
		'Uize.Fade',
		'Uize.Node'
	],

	builder: function(){
		var myFade = new Uize.Fade({
			startValue: {
				left: 0,
				top: 0,
				width: 10,
				height: 10
			}, //前例と違うところは、値が数値ではなくオブジェクト形式(ハッシュ形式)になっていること。そして、変化させたいCSSプロパティが列挙されている。
			endValue:  {
				left: 100,
				top: 100,
				width: 200,
				height: 200 //同様にstartValueに対応するCSSプロパティが設定されている。
			},
			duration: 5000,
			quantization: 1
		});

		myFade.wire('Changed.value', function(){
			Uize.Node.setStyle('my_fade', myFade.get('value')); //要素のCSSプロパティを書き換えるにはsetStyleメソッドを使用する。第二引数には、getメソッドで取得したmyFadeのvalueプロパティを渡す。
		});
		myFade.start();
	}
});
	 
このフェードを実行すると幅10px、高さ10pxの要素が、5秒後に幅200px、高さ200pxに変化し、また要素の位置も右へ100px、下へ100px移動します。PrototypeのMorphエフェクトと似ていますね。また、CSSプロパティをオブジェクト形式で渡すやり方は、PrototypeのsetStyle()に似ています。ただし、ここでは数値にpxなどの単位をつける必要はなく、数値だけを入力すればokです。 CSSプロパティをそのままオブジェクト形式で渡せるので、このやり方は万能のように見えますが、background-colorなどカラーを扱うプロパティには数値を渡すことができないので、別の方法が必要です。これはstartValue、endValueに渡すオブジェクトをさらにオブジェクトで分離することで解決します。 
	 
Uize.module ({

	required:[
		'Uize.Fade',
		'Uize.Node'
	],

	builder: function(){
		var myFade = new Uize.Fade({
			startValue: {
				coords: {
					left: 0,
					top: 0,
					width: 10,
					height: 10
				},
				bg: {
					red: 255,
					green: 165,
					blue: 0
				}
			}, //オブジェクトにcoordsとbgの二つのオブジェクトがさらに入れ子になっている。これはCSSプロパティを直接書き換えるタイプと、そうでないタイプを分離するため。bgオブジェクトにはRGB形式のデータを保存しておく。
			endValue:  {
				coords: {
					left: 100,
					top: 100,
					width: 200,
					height: 200
				},
				bg: {
					red: 128,
					green: 0,
					blue: 128
				}
			},
			duration: 5000,
			quantization: 1
		});

		myFade.wire('Changed.value', function(){
			var value = myFade.get('value'); //事前にmyFadeインスタンスの値を取得する。Uizeのプロパティ取得方法は特殊*で、例によってgetメソッドを通じて取得する。この場合、myFade.valueという風にはできない。

			var bg = value.bg; //先ほどの変数valueからさらにbgプロパティを抜き出す。ここでは従来のドット・シンタックスでプロパティを取得している。value.coordsとvalue.bgに何が入っているのか気になるが、同プロパティにはフェード開始後の変化値が連続的に代入されるもようで、フェード開始前はstartValueの値が入っている。

			Uize.Node.setStyle('my_fade', value.coords);
			Uize.Node.setStyle('my_fade', {
				backgroundColor: 'rbg(' + bg.red + ',' + bg.green + ',' + bg.blue + ')'
			} );
			//setStyleメソッドを使用するが、CSSプロパティのオブジェクトと背景色用のオブジェクトとで分けて呼び出している。カラーの方は第二引数をオブジェクト形式で渡している。少々面倒くさいがRGB(red, green, blue)形式の文字列に変換し直す。この形式でないと連続的な数値を扱えない（#FFFFFFとかでは無理）。
		});
		myFade.start();
	}
});
	 
*set-get propertiesの項を参照 最後にquantizationプロパティですが、使用するCSSプロパティが透明度を扱うopacityの場合、数値が0.0-1.0のあいだで制限されるので、浮動小数点数もカウントできるようquantizationを省略します。しかし前述のleft、widthなどpx単位で設定するCSSプロパティと併用するケースも出てくるため、そのときはquantizationプロパティの設定方法を変える必要があります。 
	 
Uize.module ({

	required:[
		'Uize.Fade',
		'Uize.Node'
	],

	builder: function(){
		var myFade = new Uize.Fade({
			startValue: {
				opacity: 1, //opacityとその他のCSSプロパティを分離する
				coords: {
					left: 0,
					top: 0,
					width: 10,
					height: 10
				}
			}, 
			endValue:  {
				opacity: 0, //opacityは最終的に透明にする
				coords: {
					left: 100,
					top: 100,
					width: 200,
					height: 200
				}
			},
			duration: 5000,
			quantization: { coords: 1 }
			//quantizationはこれまで数値でしたが、ここではオブジェクト形式にします。そしてquantizationプロパティを適用したいものだけ、ここで設定するようにします。これでopacityのみ数値が浮動小数点数で変化します。
		});

		myFade.wire('Changed.value', function(){
			//opacityとその他を分けて処理する。opacityプロパティは面倒くさいがオブジェクト形式に書き直して渡す。もしくは第二引数は有効なプロパティ以外を無視するようなので、myFade.get('value')を第二引数として直接渡すと、opacityプロパティのみうまく適用されるようだ。
			Uize.Node.setStyle('my_fade', { opacity: myFade.get('value').opacity });
			Uize.Node.setStyle('my_fade', myFade.get('value').coords);

		)};
		myFade.start();
	}
});
	 
⇒サンプルデモはこちら 次回はUize.Fade.fadeやUize.Fxを利用した、もっと簡単な方法を見ていきます。

 - JavaScript/Ajax , ,