はじめに
今回からは、コアの機能を使って作成された、いろいろなモジュールを紹介して行きたいと思います。まず、処理の動きが目に見えて、なじみやすいモジュールを紹介したいと思います。
最初に、アニメーション処理をまとめたモジュールanim、次にマウスのドラッグ＆ドロップをまとめた複数のモジュールDD、イメージ読み込み用のモジュールimageloader、最後に、Webには欠かせないクッキー処理用モジュールcookieの順で紹介します。
対象読者
Webアプリケーションに興味があり、Yahoo! User Interface Libraryに注目している人。HTMLとJavaScriptを使える人を対象にしています。
必要な環境
HTMLとJavaScriptが作成できるエディターとインターネットにつながっているパソコンがあれば、例題の作成、確認ができます。
アニメーション処理
処理に動きを出して、親しみのあるサイトにするアニメーション処理について紹介します。アニメーションを追加するための処理はモジュールanimにまとめられています。
アニメーションの指定と実行
ボタンを押すとフェードイン／フェードアウトを行うアニメーションを考えてみましょう。起動時は図1のようになっています。
書き方をリスト1に示します。
<style>
#demo {
background-image: url(./obake.jpg);
width:200px;
height:200px;
}
</style>
<script type="text/javascript">
YUI().use("anim", function(Y) {
/* 消す処理 */
Y.one('#erase').on('click', function(e) {
var anim = new Y.Anim({ //（1）
node: '#demo',
duration:5.0,
to: {
opacity: 0
}
});
anim.run(); //（2）
});
/* 表示処理 */
Y.one('#show').on("click", function(e) {
var anim = new Y.Anim({ //（3）
node: '#demo',
duration:5.0,
from:{ //（4）
opacity: 0
},
to: {
opacity: 1
}
});
anim.run();
});
});
</script>
</head>
<body>
ボタンを押してアニメーション効果を確認<br><br>
<div id='demo'></div><br> //（5）
<button id='erase'>消す</button>
<button id='show'>表れる</button>
</body>
モジュールはanimを指定します。（5）のdivタグにスタイルシートで200px×200pxの画像を表示しています。（1）でアニメーションのオブジェクトをanimとし、プロパティで動きを指定しています。node:は動かしたい画像の指定、duration:はアニメーション実行時間（秒）の指定、from:は開始時の状態、to:は終了時の状態指定です。
1つのプロパティに複数のデータをセットしたいときは、fromやtoで書いているように｛...｝で囲って中に指定します。opacity:は透明度の指定で0:が透明、1:が不透明指定になります。たとえば、0.5は透明度50％ということになります。他にwidth／height／backgroundColorなど、CSSのプロパティを設定できるようです。
アニメーションを実行させたい時は、オブジェクト.run()と書きます。実際に例題を動かして、動作を確認してみてください。
