2006年8月22日 (火)

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

先日は、Yahoo.util.Animクラスについて書きましたが、今日はYahoo.util.ColorAnimクラスについて書いてみます。
と言っても、ほとんど同じなんですが・・・。
サンプルは、引き続きこちらです。

Yahoo.util.ColorAnimクラスは、背景色・文字色・枠線の色などを滑らかに変化させる際に使用します。
Yahoo.util.Animクラスから派生していて、使い方も同じです。
var attributes = {
    backgroundColor : {from:'#ffffff', to:'#ff0000'},
    color : {from:'#000000', to:'#0000ff'}
};

var anim = new YAHOO.util.ColorAnim('id', attributes, 0.5);

anim.animate();


違う点は、指定する属性が色に関するものになり、値も16進数での指定となります。

| | コメント (0) | トラックバック (0)

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 を指定しておかないと中身より小さくならないため 思い通りの動きになりませんので、注意してください。

| | コメント (0) | トラックバック (0)

2006年8月18日 (金)

Yahoo User Interface Libraryのエフェクトサンプル

先日はFlex2のエフェクトについて書きましたが、DHTMLでも動きのあるページを作ることは出来ます。
そのようなページの作成を補助してくれるJavaScriptライブラリは幾つかありますが、Yahoo User Interface Libraryを使った サンプルを少しご紹介したいと思います。

まずは、こちらからYahoo UI Libraryをダウンロードします。
ダウンロードしたファイルを解凍すると、examples、docs、buildというフォルダがあり、buildフォルダ以下にjsファイルがありますので、 これらを目的に応じてインクルードして使用します。
なお、yahoo フォルダの yahoo.js は常にインクルードしておきます。

エフェクトは、animation フォルダの中の animation.js 内のクラスを主に使用します。
どのようなことが出来るかはサンプルページを実際に見ていただいた方が早いと思いますので、興味のある方はサンプルページを見てみてください。
Yahoo User Interface Libraryのエフェクトサンプル

明日以降、クラスの使い方などを簡単に書いてみたいと思います。

| | コメント (0) | トラックバック (0)