Class: Fx

Fx.TransitionsはベースとなるFxコンストラクタを上書きし、transitionオプションを文字列として使えるようにします。

Transitionオプション:

エフェクトに用いる方程式。Fx.Transitionsを参照のこと。関数(ex: Fx.Transitions.Sine.easeIn)と文字列(‘sine:in’, ‘bounce:out’ or ‘quad:in:out’)の両方を受け入れ、Fx.Transitions.Sine.easeIn / Fx.Transitions.Bounce.easeOut / Fx.Transitions.Quad.easeInOutへとマッピングします。

Hash: Fx.Transitions

Fxクラスに用いるアニメーション遷移のバリエーション。

例:

//初期値=Elastic.easeOut:
var myFx = $('myElement').effect('margin', {transition: Fx.Transitions.Elastic.easeOut});

参考情報:

• Robert Penner’s Easing Equations

Fx.Transitionsメソッド: linear

一次方程式による遷移。

Fx.Transitionsメソッド: quad

二次方程式による遷移。Quad.easeIn、Quad.easeOut、Quad.easeInOutのいずれか。

Fx.Transitionsメソッド: cubic

三次方程式による遷移。Cubic.easeIn、Cubic.easeOut、Cubic.easeInOutのいずれか。

Fx.Transitionsメソッド: quart

四次方程式による遷移。Quart.easeIn、Quart.easeOut、Quart.easeInOutのいずれか。

Fx.Transitionsメソッド: quint

五次方程式による遷移。Quint.easeIn、Quint.easeOut、Quint.easeInOutのいずれか。

Fx.Transitionsメソッド: pow

Quad、Cubic、Quart、Quintを生成するために使われます。Used to generate .

注意点:

• 初期値はp^6.

Fx.Transitionsメソッド: expo

幾何級数的な遷移。Expo.easeIn、Expo.easeOut、Expo.easeInOutのいずれか。

Fx.Transitionsメソッド: circ

余弦波による遷移。Circ.easeIn、Circ.easeOut、Circ.easeInOutのいずれか。

Fx.Transitionsメソッド: sine

正弦波による遷移。Sine.easeIn、Sine.easeOut、Sine.easeInOutのいずれか。

Fx.Transitionsメソッド: back

一端下がってから進みます。Back.easeIn、Back.easeOut、Back.easeInOutのいずれか。

Fx.Transitionsメソッド: bounce

バウンドしながら遷移します。Bounce.easeIn、Bounce.easeOut、Bounce.easeInOutのいずれか。

Fx.Transitionsメソッド: elastic

ゴムのようなカーブ。Elastic.easeIn、Elastic.easeOut、Elastic.easeInOutのいずれか。

Class: Fx.Transition

このクラスは自分でイージングの方程式を書ける数学の天才にしか役立たないでしょう。
‘easeIn’、’easeOut’、’easeInOut’メソッドを持ったFx関数を返します。

構文:

var myTransition = new Fx.Transition(transition[, params]);

引数:

1. transition – (関数) Fx.Transitions関数か、ユーザーが作成したエージング関数。
2. params – (いろいろ, オプション) transition関数の第2引数として与えられる単一の値か、複数の値からなる配列。

戻り値:

• (関数) イージング関数。

例:

//Elastic.easeOutの伸び具合ににユーザーが任意の値を与えます。
var myTransition = new Fx.Transition(Fx.Transitions.Elastic, 3);

var myFx = $('myElement').effect('margin', {transition: myTransition.easeOut});

参考情報:

• Fx.Transitions

No related posts.

Class: Fx.Morph

複数のCSSプロパティを一度にアニメーションさせることができ、CSSセレクタを使用することもできます。Fxからメソッド、イベント、プロパティ、オプションを継承します。

継承:

• Fx

構文:

var myFx = new Fx.Morph(element[, options]);

引数:

1. element – (いろいろ) スタイルをアニメーションさせたい要素のIDか要素そのもの。
2. options – (オブジェクト, オプション) Fxオプションオブジェクト。

戻り値:

• (オブジェクト) 新しいFx.Morphインスタンス。

例:

オブジェクトを利用して、複数のスタイルに初期値・終了値を設定:

var myEffect = new Fx.Morph('myElement', {duration: 'long', transition: Fx.Transitions.Sine.easeOut});

myEffect.start({
    'height': [10, 100], //スタイル'height'が10pxから100pxへ変形。

    'width': [900, 300]  //スタイル'width'が900pxから300pxへ変形。
});

複数のスタイルの初期値を省略し、現在の要素のスタイルを初期値として利用:

var myEffect = new Fx.Morph('myElement', {duration: 'short', transition: Fx.Transitions.Sine.easeOut});

myEffect.start({
    'height': 100, //現在の高さから100pxまで変形。
    'width': 300   //現在の幅から300pxまで変形。

});

CSSクラスにマッチする要素のCSSプロパティを変更:

var myEffect = new Fx.Morph('myElement', {duration: 1000, transition: Fx.Transitions.Sine.easeOut});

//myEffectのスタイル変更がターゲット要素にだけ適用されます。
myEffect.start('.myClassName');

参考情報:

• Fx

Fx.Morphメソッド: set

要素のCSSプロパティを指定した値へ即座に変更します。

構文:

myFx.set(to);

引数:

1. properties – (いろいろ) 変更したいCSSプロパティのキー=値のペアを持つオブジェクトか、CSSセレクターを指定した文字列。CSSプロパティに対して一つの値しか与えられていなければ、現在の値から与えられた値へと遷移します。

戻り値:

• (オブジェクト) このFx.Morphインスタンス。

例:

var myFx = new Fx.Morph('myElement').set({

    'height': 200,
    'width': 200,
    'background-color': '#f00',
    'opacity': 0

});
var myFx = new Fx.Morph('myElement').set('.myClass');

Fx.Morphメソッド: start

複数のCSSプロパティを同時にアニメーションさせます。

構文:

myFx.start(properties);

引数:

1. properties – (いろいろ) 変更させたいCSSプロパティのキー＝値からなるオブジェクトか、CSSセレクタを表す文字列。
   もしCSSプロパティの値が一つだけならば、現在の値から与えられた値へとアニメーションします。

戻り値:

• (オブジェクト) このFx.Morphインスタンス。

例:

var myEffects = new Fx.Morph('myElement', {duration: 1000, transition: Fx.Transitions.Sine.easeOut});

myEffects.start({
    'height': [10, 100],
    'width': [900, 300],
    'opacity': 0,
    'background-color': '#00f'

});

注意点:

• CSSセレクターとして文字列が与えられた場合、セレクターは一意のものでなくてはなりません。
• 複数のセレクター(カンマ区切り)はサポートされていません。

Hash: Element.Properties

参考:Element.Properties

Element Property: morph

Set:

要素にデフォルトのFx.Morphインスタンスを設定します。

構文:

el.set('morph'[, options]);

引数:

1. options – (オブジェクト, オプション) Fx.Morphオプション。

戻り値:

• (要素) この要素。

例:

el.set('morph', {duration: 'long', transition: 'bounce:out'});
el.morph({height: 100, width: 100});

Get:

要素のデフォルトFx.Morphインスタンスを取得します。

構文:

el.get('morph');

引数:

1. options – (オブジェクト, オプション) Fx.Morphオプション。これが渡されると、新しいインスタンスが生成されます。

戻り値:

• (オブジェクト) Fx.Morphインスタンス。

例:

el.set('morph', {duration: 'long', transition: 'bounce:out'});
el.morph({height: 100, width: 100});
el.get('morph'); //Fx.Morphインスタンス。

Native: Element

Elementメソッド: morph

渡されたプロパティを元に、要素をアニメーションさせます。

構文:

myElement.morph(properties);

引数:

1. properties – (いろいろ) アニメーションさせるCSSプロパティ。CSSプロパティのオブジェクトか、CSSセレクターを表す文字列。CSSプロパティに与えられた値が1つの場合、現在のCSSプロパティ値から、与えられた値へとアニメーションさせます。

戻り値:

• (要素) この要素。

例:

オブジェクトの場合:

$('myElement').morph({height: 100, width: 200});

CSSセレクターの場合:

$('myElement').morph('.class1');

参考情報:

• Fx.Morph

No related posts.

Class: Fx.Tween

Fx.TweenとElementのElement.tweenへのショートカットから成っています。

継承:

Fx

Fx.Tweenメソッド: constructor

あらゆるCSSプロパティをある値から別の値へ遷移させるトゥイーンエフェクトです。

構文:

var myFx = new Fx.Tween(element, [, options]);

引数:

1. element – (いろいろ) アニメーションを適用したい要素そのものか、要素のID。
2. options – (オブジェクト, オプション) Fxオプションオブジェクトと、以下に挙げられるオプションです:

オプション:

• property – (文字列) 遷移させたいCSSプロパティ(例:’width’, ‘color’, ‘font-size’, ‘border’,など)。オプションが省略された場合、startメソッドかsetメソッドの第1引数にプロパティを指定しなければなりません。初期値はnullです。

注意点:

• Element:setStyleで設定できるすべてのCSSプロパティはFx.Tweenによって遷移させることができます。
• border-styleやbackground-imageのように、プロパティが数学的に計算できないものであれば、アニメーション開始とともにすぐに変更されます。
• プロパティオプションを使う場合、startメソッドとsetメソッドに引数を渡してはいけません。

参考情報:

• Fx

Fx.Tweenメソッド: set

要素のCSSプロパティに対して任意の値を即座にセットします。

構文:

myFx.set(property, value);

引数:

1. property – (文字列) 値を設定したいCSSプロパティ。プロパティオプションを使用した場合は省略すること。
2. value – (いろいろ) このインスタンスにセットしたいCSSプロパティの値。

戻り値:

• (オブジェクト) このFx.Tweenインスタンス。

例:

var myFx = new Fx.Tween(element);
//背景色を即座に赤にします:
myFx.set('background-color', '#f00');

注意点:

プロパティオプションを使用する場合、startメソッドとsetメソッドに引数を渡してはいけません。

Fx.Tweenメソッド: start

特定の値まで、CSSプロパティを遷移させます。

構文:

myFx.start([property,] [from,] to);

引数:

1. property – (文字列, オプションにない場合のみ) 遷移させたいCSSプロパティ。プロパティオプションを使用した場合は省略すること。
2. from – (いろいろ, オプション) エフェクト開始時のCSSプロパティの値。
3. to – (いろいろ) エフェクトのターゲットとなるCSSプロパティ値。

戻り値:

• (オブジェクト) このFx.Tweenインスタンス。

例:

var myFx = new Fx.Tween(element);

//要素の背景色を黒から赤に遷移させます:
myFx.start('background-color', '#000', '#f00');
//要素の背景色を現在の色から青に遷移させます:
myFx.start('background-color', '#00f');

注意点:

• 引数が一つしか渡されていない場合、第1引数がターゲット値として使用され、初期値は現在の状態から算出された値になります。
• 色を使う場合、RGBカラー値か16進数カラー値が使われます。
• プロパティオプションを使用した場合、startメソッドとsetメソッドにプロパティを渡してはいけません。

Hash: Element.Properties

参考:Element.Properties

Elementプロパティ: tween

要素のFx.Tweenインスタンスにデフォルトオプションを設定・取得します。

Set:

構文:

el.set('tween'[, options]);

引数:

• options – (オブジェクト) Fx.Tweenオプション。

戻り値:

• (要素) この要素。

例:

el.set('tween', {duration: 'long'});
el.tween('color', '#f00');

Get:

構文:

el.get('tween', [options]);

引数:

1. property – (文字列) Fx.Tweenプロパティの引数。
2. options – (オブジェクト) Fx.Tweenオプション。

戻り値:

• (オブジェクト) 要素内のFx.Tweenインスタンス。

例:

el.get('tween', {property: 'opacity', duration: 'long'}).start(0);

注意点:

• 要素のTweenインスタンスをElement:setで初期化するときは、Tweenにプロパティを渡してはいけません。
• プロパティを指定するのは、実際のFx.TweenインスタンスにElement:getを行うときか、Element:tweenを呼び出すときのみです。
• setメソッドやgetメソッドにオプションを渡すと、新しいインスタンスが作られます。
• 他のElementショートカットと同じく、setメソッドとgetメソッドの違いは、getがインスタンスを返す一方で、setは要素を返すという点です(連結と初期化のため)。

Native: Element

$関数で取得したDOM要素がすべてのメソッドを使えるようにするカスタムネイティブです。

Elementメソッド: tween

一つのCSSプロパティを即座に遷移させるためのElementのショートカットメソッドです。

構文:

myElement.tween(property, startvalue[, endvalue]);

引数:

1. property – (文字列) アニメーションさせたいCSSプロパティ。プロパティオプションをすでに設定しているときは省略すること。
2. startvalue – (いろいろ) 遷移の初期値。
3. endvalue – (いろいろ) 遷移のターゲット値。これを省略した場合、startvalueがターゲット値として使われます。

戻り値:

• (要素) この要素。

例:

//"myElement"の幅を現在の値から100pxに遷移させます:
$('myElement').tween('width', '100');

//"myElement"の高さを20pxから200pxに遷移させます:
$('myElement').tween('height', [20, 200]);

//"myElement"のボーダーを現在の値から"6px solid blue"へ変化させます:
$('myElement').tween('border', '6px solid #36f');

参考情報:

• Fx.Tween

Elementメソッド: fade

透明度アニメーションのためのElementのショートカットメソッド。要素を特定の透明度までフェードイン・フェードアウトさせるのに役立ちます。

構文:

myElement.fade([how]);

引数:

1. how – (いろいろ, オプション: 初期値=’toggle’) 数字か文字列による透明度の指定。次の値を使えます:
   • ‘in’ – 要素を不透明度100%までフェードインさせます。
   • ‘out’ – 要素を不透明度0%までフェードアウトさせます。
   • ‘show’ – 要素の不透明度を即座に100%に設定します。
   • ‘hide’ – 要素の不透明度を即座に0%に設定します。
   • ‘toggle’ – 要素が表示されていればフェードアウトさせ、そうでなければフェードインさせます。
   • (数) – 0から1の間の少数値。この不透明度まで要素をフェードさせます。

戻り値:

• この要素。

例:

$('myElement').fade('out'); //"myElement"をフェードアウト。
$('myElement').fade(0.7); //"myElement"を70%までフェードアウト。

Elementメソッド: highlight

背景色を遷移させるためのElementショートカットメソッドです。要素の背景色を指定した色に即座に変更し、それから元の色に戻します。

構文:

myElement.highlight([start, end]);

引数:

1. start – (文字列, オプション: 初期値=’#ff8′) 遷移を開始する色。
2. end – (文字列, オプション: 初期値=要素に設定されていたbackground-color) ハイライトエフェクトの後に戻る色。

注意点:

要素に背景色が設定されていない、または’tranparent’に設定されている場合、初期値と終了値は白になります。

戻り値:

• (要素) この要素。

例:

//背景色を即座に水色に変え、それから元の色(または白)に戻します:

$('myElement').highlight('#ddf');

//背景色を即座に水色に変え、それからグレーにフェードさせます:
$('myElement').highlight('#ddf', '#ccc');

No related posts.

Class: Fx.CSS

エフェクトがCSSをパースするためのクラスです。Fx.Tween、Fx.Morph、Fx.Elementsによって要求されます。

パブリック・メソッドはありません。

No related posts.

Class: Fx

このクラスは単体で使われることは滅多にありませんが、すべてのカスタムFxクラスの基礎となります。
すべてのFxクラスはこれを継承します。

Implements:

• Chain, Events, Options

Fxメソッド: constructor

構文:

var myFx = new Fx([options]);

引数:

1. options – (オブジェクト, オプション) エフェクトのオプションを持つオブジェクト。以下を参照のこと。

オプション:

• fps – (数: 初期値=50) アニメーションの一秒あたりのフレーム数。
• unit – (文字列: 初期値=false) 単位(e.g. ‘px’, ‘em’, ‘%’)。詳しくはElement:setStyleを参照のこと。
• link – (文字列: 初期値=ignore) ‘ignore’, ‘cancel’,'chain’が入ります。
  • ‘ignore’ – エフェクト実行中に呼び出されたものはすべて無視されます(MooTools1.xにおける’wait’: trueと同じです)。
  • ‘cancel’ – エフェクト実行中に呼び出されたものが最優先となり、現在のアニメーションを上書きします。新しいアニメーションがスタートし、現在実行されているものはキャンセルされます。(MooTools1.xにおける’wait’: falseと同じです)。
  • ‘chain’ – エフェクト実行中に呼び出されたものは連結され、現在のエフェクトが終了してから実行されます。
• duration – (数: 初期値=500) エフェクトの持続時間(ミリ秒)。次のいずれかも使用できます:
  • ‘short’ – 250ミリ秒
  • ‘normal’ – 500ミリ秒
  • ‘long’ – 1000ミリ秒
• transition – (関数: 初期値=‘sine:in:out’ エフェクトを利用するための式。Fx.Transitionsを参照のこと。次の形式の文字列も受け取ることができます:

  transition[:in][:out] – 例: ‘linear’, ‘quad:in’, ‘back:in’, ‘bounce:out’, ‘elastic:out’, ‘sine:in:out’

イベント:

• start – (関数) エフェクトが始まったときに実行する関数。
• cancel – (関数) エフェクトを手動で停止したときに実行する関数。
• complete – (関数) エフェクトが完了したときに実行する関数。
• chainComplete – (関数) linkオプションに’chain’ (オプションを参照)を使用しているときに実行する関数。連結されたすべてのエフェクトが終了したときに実行されます。

注意点:

• Fx.Transitions.jsをインクルードしていなければ、アニメーションを変更することはできません(自分でアニメーションを開発するなら別です)。;)
• Fxクラスは基本的な関数を拡張するための骨格となるだけのクラスです。

参考情報:

• Fx.Tween, Fx.Morph.

Fxメソッド: start

アニメーションを開始するときに使われます。’start’イベントを発生させます。

構文:

myFx.start(from[, to]);

引数:

1. from – (いろいろ) エフェクトの初期値。引数が一つだけならば、ターゲット値として使用されます。
2. to – (いろいろ, オプション) エフェクトのターゲット値。

戻り値:

• (オブジェクト) – このFxインスタンス。

例:

• それぞれのFxサブクラスのドキュメンテーションを参照のこと。

注意点:

• 引数が一つだけの場合、第1引数はターゲット値として使われ、初期値は現在の要素の状態から算出されます。
• この値の書式とタイプはインプリメントの状態に強く依存します。それぞれのインプリメントの詳細を確認してください。

Fxメソッド: set

setメソッドはアニメーションのすべての段階で発生します。値を指定して、エフェクトに適用することもできます。

構文:

myFx.set(value);

引数:

1. value – (いろいろ) アニメーションに適用したい値。

戻り値:

• (オブジェクト) – このFxインスタンス。

例:

• それぞれのFxサブクラスのドキュメンテーションを参照のこと。

Fxメソッド: cancel

cancelメソッドは実行中のアニメーションをキャンセルします。’cancel’イベントが発生します。

構文:

myFx.cancel();

戻り値:

• (オブジェクト) – このFxインスタンス。

Fxメソッド: pause

実行中のエフェクトを一時的に停止します。

構文:

myFx.pause();

戻り値:

• (オブジェクト) – このFxインスタンス。

注意点:

• エフェクトを停止したタイマーはFx:resumeを呼び出すことで再開できます。
• 停止したエフェクトを再開すると、タイマーは単に消去され、新しいアニメーションを開始します。

Fxメソッド: resume

停止されたエフェクトを再開します。

構文:

myFx.resume();

戻り値:

• (オブジェクト) – このFxインスタンス。

注意点:

• 以前に一時停止されたエフェクトだけが再開できます。そうでない場合は無視されます。

No related posts.