JavaScript/Library/script.aculo.us http://www.ark-web.jp/sandbox/wiki/279.html
JavaScript/Library/script.aculo.us
JavaScript/Library/script.aculo.us
Core Effects †
以下の6つで構成されます
- Effect.Opacity
- Effect.Scale?
- Effect.Morph?
- Effect.Move
- Effect.Highlight?
- Effect.Parallel
Availability †
script.aculo.us V1.0 以降で使用できます
syntax †
new Effect.EffectName( element, required-params, [options] );
elementはDOMエレメントのIDの文字列か、DOMエレメントのオブジェクトを指定します
required-paramsは使用するEffectによって変化します
optionsはEffectをカスタマイズするために追加で指定することができます
Common parameters †
すべてのCore Effectsで以下のパラメータを指定できます
Option | since | Description |
duration | V1.0 | Effectの開始から終了までの秒数をfloatで指定します. デフォルトは1.0です. |
fps | V1.0 | 1秒間に画面を更新する回数を指定します. デフォルトは25です. 100以上は指定できません. |
transition | V1.0 | アニメーションの動きを制御する関数(0~1を返す)を指定します. 次の関数が用意されています: Effect.Transitions.sinoidal (default), Effect.Transitions.linear, Effect.Transitions.reverse, Effect.Transitions.wobble, Effect.Transitions.flicker. ソースにはpulse,spring,none,fullがあります. |
from | V1.0 | transitionの初期値を指定します, floatで0.0~1.0の間で指定します. デフォルトは0.0です. |
to | V1.0 | transitionの終了値を指定します, floatで0.0~1.0の間で指定します. デフォルトは1.0です. |
sync | V1.0 | 自動でアニメーションを更新するかどうかを指定します(デフォルトでは自動で更新されます). trueを指定した場合, render()をコールすることで更新することができます. これはEffect.Parallel()で使用されます. |
queue | V1.5 | Sets queuing options. When used with a string, can be ‘front’ or ‘end’ to queue the effect in the global effects queue at the beginning or end, or a queue parameter object that can have {position:’front/end’, scope:’scope’, limit:1}. For more info on this, see Effect Queues. |
delay | V1.5 | effect開始までの待ち時間を秒で指定します. デフォルトは0.0です. |
direction | ?? | Sets the direction of the transition. Values can be either ‘top-left’, ‘top-right’, ‘bottom-left’, ‘bottom-right’ or ‘center’ (Default). Applicable only on Grow and Shrink effects. |
callback †
さらに,optionにはcallback関数を指定することができます.
callback関数は引数としてeffect objectを受けとります.
Callback | since | Description |
beforeStart | V1.0 | Called before the main effects rendering loop is started. |
beforeUpdate | V1.0 | Called on each iteration of the effects rendering loop, before the redraw takes places. |
afterUpdate | V1.0 | Called on each iteration of the effects rendering loop, after the redraw takes places. |
afterFinish | V1.0 | Called after the last redraw of the effect was made. |
effect objectには以下のプロパティがあります.
Variable | since | Description |
effect.element | V1.0 | The element the effect is applied to. |
effect.options | V1.0 | Holds the options you gave to the effect. |
effect.currentFrame | V1.0 | The number of the last frame rendered. |
effect.startOn, effect.finishOn | V1.0 | The times (in ms) when the effect was started, and when it will be finished. |
effect.effects[] | V1.0 | On an Effect.Parallel effect, there’s an effects[] array containing the individual effects the parallel effect is composed of. |
翻訳中
参考:CoreEffects
tag: Effects?, JavaScript, Tween?