Class: Fx

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

Implements:

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メソッド: 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インスタンス。

注意点:

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

このドキュメントはMooToolsのドキュメントを元に高橋文樹が翻訳(ちょっと改変)しました。
本家と同じく、Attribution-NonCommercial-ShareAlike 3.0ライセンスで公表されています。

トップに戻る