エフェクトの共通パラメーター

すべてのコア効果に設定できる次の一般的なオプション-

Sr.No	Option & Description
1	duration フロートとして与えられる秒単位の効果の持続時間。デフォルトは1.0です。
2	fps 1秒あたりこれらの多くのフレームをターゲットにします。デフォルトは25です。 100を超えることはできません。
3	transition アニメーションの現在のポイント（0〜1）を変更する関数を設定します。次の遷移が提供されています- Effect.Transitions.sinoidal（デフォルト） Effect.Transitions.linear Effect.Transitions.reverse Effect.Transitions.wobble *Effect.Transitions.flicker
4	from* 遷移の開始点、0.0〜1.0のフロートを設定します。デフォルトは0.0です。
5	to トランジションの終点、0.0〜1.0のフロートを設定します。デフォルトは1.0です。
6	sync エフェクトが新しいフレームを自動的にレンダリングするかどうかを設定します（デフォルトで実行します）。 trueの場合、エフェクトのrender（）インスタンスメソッドを呼び出すことにより、フレームを手動でレンダリングできます。これはEffect.Parallel（）によって使用されます .
7	queue キューイングオプションを設定します。文字列で使用する場合、front_または_end_を使用して、エフェクトを先頭または末尾のグローバルエフェクトキューにキューイングするか、キューパラメーターオブジェクトに\ {position：_front/end、scope：scope、limit：1を指定できます}。
8	delay エフェクトが実際に開始されるまで待機する秒数を設定します。デフォルトは0.0です。
9	direction 遷移の方向を設定します。値は、「左上」、「右上」、「左下」、「右下」または「中央」（デフォルト）のいずれかです。成長および縮小効果にのみ適用されます。

上記のパラメーターの1つ以上を適用する例を次に示します。すべてのパラメーターは\ {}に入れられ、コンマ（、）で区切られます。

<html>
   <head>
      <title>script.aculo.us examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects" ></script>
   </head>

   <body>
      <p>Try by giving different parameters</p>

      <div onclick = "new Effect.Opacity(this,
         {
            duration: 2.0,
            transition: Effect.Transitions.linear,
            from: 1.0,
            to: 0.5
         });" >
         Click here to see the result:
      </div>
   </body>
</html>

これにより、次の結果が生成されます–

コールバックメソッド

エフェクトの実行中に、さまざまなイベントで任意の要素に上記のパラメーターを適用できます。これは、その要素のコールバックメソッドをJavaScriptで記述することによって行われます。

コールバックメソッドを使用するには、以下にリストする追加の4つのパラメーターがあります-

Sr.No	Callback & Description
1	beforeStart メインエフェクトのレンダリングループが開始される前に呼び出されます。
2	beforeUpdate 再描画が行われる前に、エフェクトレンダリングループの各反復で呼び出されます。
3	afterUpdate 再描画が行われた後、エフェクトレンダリングループの各反復で呼び出されます。
4	afterFinish エフェクトの最後の再描画が行われた後に呼び出されます。

エフェクトオブジェクト内には、コールバック関数でアクセスして使用できる便利な変数がいくつかあります。

Sr.No	Variable & Description
1	effect.element 効果が適用される要素。
2	effect.options エフェクトに与えたオプションを保持します。
3	effect.currentFrame レンダリングされた最後のフレームの番号。
4	effect.startOn エフェクトが開始された時間（ミリ秒）。
5	effect.finishOn エフェクトの開始後にエフェクトが終了する時間（ミリ秒）。
6	effect.effects[] Effect.Parallelエフェクトには、パラレルエフェクトを構成する個々のエフェクトを含むeffects []配列があります。

例

次の例は、コールバックの使用方法を示しています

<html>
   <head>
      <title>script.aculo.us examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects"></script>

      <script type = "text/javascript">
         function OnFinish(obj){
            alert("Finishing - I'm element :" + obj.element.id);
         }

         function OnStart(obj){
            alert("Starting - I'm element :" + obj.element.id);
         }

         function myEffect(myObject){
            new Effect.Highlight(myObject,
               {
                  startcolor:'#ffffff',
                  endcolor:'#ffffcc',
                  duration: 0.5,
                  afterFinish: OnFinish,
                  beforeStart: OnStart
               }
            );
         }
      </script>
   </head>

   <body>
      <p>Click following line to see the result:</p>

      <div onclick = "myEffect(this)" id = "bestdiv">
         Click me to see the result!
      </div>
   </body>
</html>

これにより、次の結果が生成されます–

注-ここで、_startcolor_および_endcolor_はエフェクト固有のパラメーターです。これらのパラメーターについては、_Effect.Highlight_で説明します。

Script.aculo.us-scriptaculous-common-parameters

エフェクトの共通パラメーター

コールバックメソッド

例