アニメーションの基本

インデックスに戻る

基本

yeffectsは以下の3ステップで使用できます。

  1. jQueryとyeffects-(version).jsをインポートします。
    scriptタグを使用すればOKです。(ダウンロードはインデックスからお願いします。)

    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/yeffects-0.1.js"></script>

  2. アニメーション定義を生成します。
    アニメーションモジュール(YPar,YSeq,YAnimate,YWait,YCallback,カスタムアニメーション)を組み合わせてアニメーション定義を生成します。
    詳しくは各モジュールのセクションを参考にしてください。

    var anim = new YPar([new YAnimate("#ch_1", "alpha", [0, 100], 1000),
                 new YSeq([new YWait(200), new YAnimate("#ch_2", "alpha", [0, 100], 1000)]),
                 new YSeq([new YWait(400), new YAnimate("#ch_3", "alpha", [0, 100], 1000)]),
                 new YSeq([new YWait(600), new YAnimate("#ch_4", "alpha", [0, 100], 1000)]),
                 new YSeq([new YWait(800), new YAnimate("#ch_5", "alpha", [0, 100], 1000)])]);

  3. アニメーションエンジンを起動します。
    アニメーション定義をYEngineオブジェクトに渡し、start関数を呼び出せばアニメーションが開始されます。

    (new YEngine(anim)).start();


YPar

YPar( [アニメーションの配列] )

複数のアニメーションを同時に実行します。
全アニメーションが終了すると、このアニメーションも終了扱いになります。

YSeq

YSeq( [アニメーションの配列] )

複数のアニメーションを順番に実行します。
0番目のアニメーションから実行開始し、アニメーションが終了するたびに次のインデックスのアニメーションに移動します。

YAnimate

YAnimate( "jQueryセレクタ", "プロパティ名", [値], 持続時間(ミリ秒) )

スタイル変化アニメーションを実行します。

jQueryセレクタによりDOM要素を選択し、これらの要素に対して、開始時から持続時間までスタイルを連続的に変化させます。
jQueryセレクタはアニメーション開始時に評価されます。

プロパティには以下の値を指定することが可能です。

プロパティ名 値 説明 サンプル
left 整数値 左端のピクセル値です。 new YAnimate("#test", "left", [100,200], 1000)
    ... left値を100ピクセルから開始して200ピクセルまで変化させます。
top 整数値 上端のピクセル値です。 new YAnimate("#test", "top", [100,200], 1000)
    ... top値を100ピクセルから開始して200ピクセルまで変化させます。
width 整数値 幅のピクセル値です。 new YAnimate("#test", "width", [100,200], 1000)
    ... width値を100ピクセルから開始して200ピクセルまで変化させます。
height 整数値 高さのピクセル値です。 new YAnimate("#test", "height", [100,200], 1000)
    ... height値を100ピクセルから開始して200ピクセルまで変化させます。
background-color 整数の配列 [R,G,B] 背景色です。 new YAnimate("#test", "background-color", [[0xff,0x00,0x00],[0xff,0xff,0xff]], 1000)
    ... 背景色を赤(#ff0000)から白(#ffffff)まで変化させます。
alpha 整数値(0-100) 不透明度です。パーセント値で指定してください。
filter,-moz-opacity,opacityスタイルすべてに値を設定します。 		new YAnimate("#test", "alpha", [0, 100], 1000)
    ... 不透明度を0%(透明)から100(#ffffff)まで変化させます。
visibility 文字列 (visible|hidden) オブジェクトの可視(visible)/不可視(hidden)を設定します。
この値は連続的に変化しません。 		new YAnimate("#test", "visibility", ["visible", "hidden"], 1000)
    ... 可視状態から不可視状態に変更します。


値はプロパティ名に対応する値の配列で、1個以上の値を設定できます。
値の個数により以下のように挙動が変化します。

個数 挙動
1 アニメーション開始時に値を設定し、以後持続時間終了まで値は変化しません。
2 アニメーション開始から持続時間終了まで、値を値1から値2まで連続的に変化させます。
3以上 アニメーション開始から持続時間終了まで、値1から値nを連続的に変化させます。
開始と終了の間は等間隔で値2～値n-1で補間されます。


YWait

YWait( 持続時間(ミリ秒) )

持続時間だけ待機します。

YCallback

YCallback( コールバック関数 )

コールバック関数を呼び出します。
コールバック関数の形式は以下の通り。引数timeにはYCallbackのstartからコールバック関数が実際に呼ばれるまでの経過時間(ミリ秒)が設定されます。

function(time) { コールバック処理; }


インデックスに戻る
Copyright(C) 2009 やざわラボ