|
uu_fx
uu.fx はエフェクトとアニメーションを提供します
uu.fx() と NodeSet.fx() は CSSプロパティを連続的に変化させるCSSアニメーション機能を提供します。 uu.fxを特殊化した以下の関数があります。
要素の非表示状態を調べる uu.fx.isHide もあります。 以下の easing 関数が利用できます。easing 関数の特性については http://uupaa-js.googlecode.com/svn/trunk/0.8/test/core/fx/easeing.htm を参照してください。
APIuu.fxuu.fx(node:Node, duration:Number, option:Hash/Function):Node は、アニメーションキューを作成し node を返します。 duration には 0 以上の数値を指定します。単位は ms です。 duration で指定した時間が経過するまで、option で指定した幾つかの CSS プロパティを連続的に変化させます。 duration で指定した時間が経過するとアニメーションは終了します。option.after が指定されている場合はコールバックします。 option が関数なら、一定間隔でコールバックします。 option に Hash を指定すると、一定間隔で変化させる CSS プロパティと変化の割合を easing 関数により指定できます。 Hash には { key: endValue, ... } または { key: [endValue, easing], ... } のように指定します。
予約済みキーワードkey には、予約済みのキーワード( before, after, chain, reverse, deny ) も指定できます。
key には、短い名前(Alias) も指定できます。
逆再生A{ reverse: 1 } は、A → !A の順に再生と逆再生を行ないます(!は逆再生を意味します)。 http://uupaa-js.googlecode.com/svn/trunk/0.8/test/core/fx/reverse.a.htm // A(width を 300px に変化させ), !A(元に戻す)
uu(".box").fx(2000, { w: 300, reverse: 1 }); // AA{ chain: 1 }, B{ reverse: 1 } は、A → B → !B → !A の順になります。 http://uupaa-js.googlecode.com/svn/trunk/0.8/test/core/fx/reverse.ab.htm // A(width を 300px に)、B(height を 300px に変化させ)、!B(height), !A(width の順に元に戻す)
uu(".box").fx(2000, { w: 300, chain: 1 }). // A
fx(2000, { h: 300, reverse: 1 }); // BA{ reverse: 1 }, B{ chain: 1 }, C{ reverse: 1 } は、A → !A → B → C → !C → !B の順になります。 http://uupaa-js.googlecode.com/svn/trunk/0.8/test/core/fx/reverse.abc.htm // A(不透明度(opacity)を0.2に変化させ)、!A(元に戻した後に)、
// B(width を 300px に)、C(height を 300px に変化させ)、!C(height), !B(width の順に元に戻す)
uu(".box").fx(2000, { o: 0.2, reverse: 1 }). // A
fx(2000, { w: 300, chain: 1 }). // B
fx(2000, { h: 300, reverse: 1 }); // CA{}, B{ chain: 1 }, C{}, D{ reverse: 1 } は、A → B → C → D → !D → !B の順になります。A と C は逆再生されません。 http://uupaa-js.googlecode.com/svn/trunk/0.8/test/core/fx/reverse.abcd.htm // A(不透明度(opacity)を0.5に変化させ)、
// B(width を 300px に)、C(height を 300px に変化させ)、
// D(font-size を 3倍にし)、!D(元に戻し)、!B(width も元に戻す)
// 最終的に、不透明度は0.5になり、高さは 300 になり、それらは元に戻らない。
uu(".box").fx(2000, { o: 0.5 }). // A
fx(2000, { w: 300, chain: 1 }). // B
fx(2000, { h: 300, }). // C
fx(2000, { fs: "*3", reverse: 1 }); // DA{ chain: 1 }, B{ reverse: 1 }, C{ chain: 1 }, D{ reverse: 1 }, E{ reverse: 1} は、A → B → !B → !A → C → D → !D → !C → E → !E の順になります。 http://uupaa-js.googlecode.com/svn/trunk/0.8/test/core/fx/reverse.abcde.htm // A(不透明度(opacity)を0.5に変化させ)、
// B(width を 300px に変化させ)、!B(widthを元に戻し)、!A(不透明度を元に戻す)。
// C(height を 300px に変化させ)、
// D(font-size を 3倍にし)、!D(元に戻した後に)、!C(height を元に戻す)
// E(背景色を赤にし)、!E(元に戻す)
uu(".box").fx(2000, { o: 0.5, chain: 1 }). // A
fx(2000, { w: 300, reverse: 1 }). // B
fx(2000, { h: 300, chain: 1 }). // C
fx(2000, { fs: "*3", reverse: 1 }). // D
fx(2000, { bgc: "red", reverse: 1 }); // Euu.fx.showuu.fx.show(node:Node, duration:Number = 0, displayValue:String= "block"):Node は、node を duration 時間かけて表示し、node を返します。 duration には処理時間を ms 単位で指定します。 0 を指定するとすぐに表示し、1000 を指定すると 1秒かけて表示します。 displayValue には style.display が "none" の場合に、display に設定する値を指定します。デフォルトは "block" です。 uu.fx(node, { w: 100, h: 100, o: 0.5 });
// 1秒かけて要素を表示する
uu.fx.show(node, 1000);uu.fx.hideuu.fx.hide(node:Node, duration:Number = 0):Node は、node を duration 時間かけて隠し、node を返します。 duration には処理時間を ms 単位で指定します。 0 を指定するとすぐに隠します、1000 を指定すると 1秒かけて隠します。 uu.fx(node, { w: 100, h: 100, o: 1 });
// 1秒かけて要素を隠す
uu.fx.hide(node, 1000);uu.fx.isHideuu.fx.isHide(node:Node):Boolean は、要素が見えない状態で true を返します。
上記のいずれかで true を返します。 色の変化色を連続的に変化させます。 var c = uu.color.random().hex,
bgc = uu.color.random().hex;
// 色(color)と背景色(background-color)を 500ms かけて変化させる。c は color のエリアスで、bgc は background-color のエリアスです。
uu.fx(node, 500, { c: c, bgc: bgc });不透明度の変化不透明度(opacity)を連続的に変化させます。o は opacity の別名です。 // 不透明度を 500ms かけて 0 ～ 1 に連続的に変化させる
uu("div").css({ o: 0 }).fx(500, { o: 1 });位置の変化位置(left, top)を連続的に変化させます。変化方法も指定します。x, y は left, top の別名です。 // left と top を 500ms かけて left = 100, top + 200(現在位置 + 200) の位置に連続的に変化させる
// top は InOutQuad の計算結果を使用する
uu("div").css({ x: 0 }).fx(500, { x: 100, y: ["+200", "InOutQuad"] });大きさの変化大きさ(width, height)を連続的に変化させます。w, h は width, height の別名です。 // width と height を 500ms かけて width = 0, height 0 に連続的に変化させる
uu("div").css({ w: 100, h: 100 }).fx(500, { w: 0, h: 0 });スタンバイキューuu.fx(node, duration, uu.nop) とすることで、duration の間だけ何もしないスタンバイキューを作成できます。 // 500ms かけて不透明にし、500ms なにもせず、その後 500ms かけて透明にする
uu("div").fx(500, { o: 1.0 }).fx(500, uu.nop).fx(500, { o: 0 });uu.fx.skipuu.fx.skip(node:Node = null, skipAll:Boolean = false, invisible:Boolean = false):NodeArray は、node のキューに積まれたアニメーションを一つだけスキップし、キューをスキップしたノードの配列 NodeArray を返します。 スキップすると、各CSSプロパティの値は、アニメーション開始時に uu.fx で指定した endValue の値になります。 複数のキューが設定されている場合は、次のキューが再生されます。 uu.fx.stop はアニメーションを途中で停止し、uu.fx.skip はアニメーションを最後まで実行した状態で次のキューを再生します。 node に null を指定すると、アニメーションキューを持つ全てのノードから先頭のキューを一つだけスキップし、NodeArray を返します。 skipAll に true を指定すると、全てのアニメーションキューをスキップします。 invisible に true を指定すると、2つ以上のアニメーションを連続でスキップする際に style.visibility = "hidden" を設定し、スキップ完了後に "visible" に戻す特別な処理が追加されます。この処理をいれるとフリッカー(点滅)を抑止できるケースがあります。 // node のアニメーションを一つスキップする
uu.fx.skip(node); // アニメーションしている全てのノードで、アニメーションキューを全てスキップし、
// アニメーションを終了させる
uu.fx.skip(0, true); // ちらつきを抑えつつ、アニメーションを終了させる
uu.fx.skip(0, true, true);uu.fx.stopuu.fx.stop(node:Node):!Node は、node のキューに積まれたアニメーションを一つだけ途中で停止し、node を返します。アニメーションが実行されていなければ何も起きません。 複数のキューが設定されている場合は、次のキューが再生されます。 uu.fx.stop はアニメーションを途中で停止し、uu.fx.skip はアニメーションを最後まで実行した状態で次のキューを再生します。 uu.fx.isBusyuu.fx.isBusy(node:Node) は node がアニメーション中かアニメーションキューが積まれている状態で true を返します。 uu.fx.fadeuu.fx.fade(node:Node, duration:Number, option:Hash/Function = void):Node は、 opacity が 0.5以上ならフェードアウトし、0.5未満ならフェードインします。 uu.fx.puffuu.fx.puff(node:Node, duration:Number, option:Hash/Function = void):Node は、 その場で拡大しながら消えます。 uu.fx.flareuu.fx.flare(node:Node, duration:Number, option:Hash/Function = { parts: 10, range: 200 }):Node は、 フレア状に拡散し消えます。
uu.fx.shrinkuu.fx.shrink(node:Node, duration:Number, option:Hash/Function = void):Node は、 縮小し消えます。 uu.fx.moveinuu.fx.movein(node:Node, duration:Number, option:Hash/Function = { degree: 0, range: 200 }):Node は、 離れた場所から登場します。
uu.fx.moveoutuu.fx.moveout(node:Node, duration:Number, option:Hash/Function = { degree: 0, range: 200 }):Node は、 離れた場所に消えます。
uu.fx.highlightuu.fx.highlight(node:Node, duration:Number, option:Hash/Function = { bgc: "#ff9", r: 1 }):Node は、 背景色をハイライトカラー(#ff9)にし、元の背景色に戻します。 Test Code
| ||||||||||||||||||||||||||||||||||||||||
► Sign in to add a comment