« Yahoo User Interface Libraryのエフェクトサンプル | トップページ | Yahoo User Interface Library - Yahoo.util.ColorAnimクラス - »

2006年8月20日 (日)

Yahoo User Interface Library - Yahoo.util.Animクラス -

先日、Yahoo User Interface Libraryの単純なエフェクトサンプルを作成してみましたが、今日はクラスの使い方を簡単に書いておきます。

最低限必要なファイルは、yahoo.js、event.js、dom.js、animation.js ですので、まずこれらをインクルードして下さい。

アニメーションに関するクラスは animation.js 定義されていて用途によって幾つかのクラスがあるのですが、基本となるのはYahoo.util.Animクラスです。
Yahoo.util.Anim クラスを使うと、要素の大きさ・位置などCSSで数値として指定できる属性を、指定した時間で徐々に変化させアニメーション することが出来ます。
まず、コンストラクタで、
var attributes = {
    width:{from:10, to:100},
    height:{from:10, to:100},
};

var anim = new Yahoo.util.Anim('id', attributes, 0.5, YAHOO.util.Easing.backOut);
のように指定します。
最初の引数は、変化させる要素のインスタンスまたはIDです。

変化させる属性と値は、attributes のようにオブジェクトで第2引数に指定します。
上の例では、幅と高さが10pxから100pxへ変化します。
fromは必須ではなく、指定しなければ現在の値が適用されます。
toの代わりにby:100とすると、大きさが100pxずつアニメーションのたびに大きくなります。
他に指定できる属性としては、私が試してみたものでは、top、left、borderWidth、fontSizeが可能でした。
DHTMLでスタイルを数値で指定できるものならOKではないでしょうか。
また、ブラウザによって指定方法が異なる透過度は、
opacity : { from : 1.0, to : 0 }
と指定することで、透過をサポートしているブラウザなら動作します。(数値は0から1.0の範囲)

第3引数はアニメーションの開始から終了までの時間で、秒単位で指定します。
この引数はオプションで、指定しなければデフォルトの1秒が適用されます。

第4引数はEasingというもので、例えば物にぶつかってバウンドするように、動きに少し変化をつけることが出来ます。
これもオプションで、指定しなければ変化はつきません。


アニメーションの定義はこれでOKですので、次はアニメーションの実行です。
実行は以下のように
anim.animate();
と、animateメソッドを呼び出すだけです。

ただ、例えば、要素の幅と高さをゼロにした後に要素を非表示にするなど、アニメーションの終了時に何か処理をしたい場合もあると思います。
そのような場合に、
anim.animate();
document.getElementById('id').style.visibility = 'hidden';
としても、思い通りの動きにはなりません。
animateメソッドは、内部ではタイマーを使ってアニメーションを実行しており、アニメーションの終了を 待たずに次の行が実行されてしまうためです。

したがって、終了時に何か処理をしたい場合は、以下のようにonCompleteのsubscribeメソッドを使って終了時の関数を指定する必要があります。
var animCompleted = function(){
    document.getElementById('id').style.visibility = 'hidden';
};
anim.onComplete.subscribe(animCompleted);

anim.animate();

また、サイズを小さくする場合はスタイルで overflow : hidden を指定しておかないと中身より小さくならないため 思い通りの動きになりませんので、注意してください。

|

« Yahoo User Interface Libraryのエフェクトサンプル | トップページ | Yahoo User Interface Library - Yahoo.util.ColorAnimクラス - »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/11518472

この記事へのトラックバック一覧です: Yahoo User Interface Library - Yahoo.util.Animクラス -:

« Yahoo User Interface Libraryのエフェクトサンプル | トップページ | Yahoo User Interface Library - Yahoo.util.ColorAnimクラス - »