What are Common Parameters for the Effects? - script.aculo.us

What are Common Parameters for the Effects?

The following common options which can be set for all the core effects –

Option

Description

duration

Duration of the effect in seconds, given as a float. Defaults to 1.0.

fps

Target these many frames per second. Defaults to 25. Can't be higher than 100.

transition

Sets a function that modifies the current point of the animation, which is between 0 and 1. Following transitions are supplied −

  • Effect.Transitions.sinoidal (default)
  • Effect.Transitions.linear
  • Effect.Transitions.reverse
  • Effect.Transitions.wobble
  • Effect.Transitions.flicker

from

Sets the starting point of the transition, a float between 0.0 and 1.0. Defaults to 0.0.

to

Sets the end point of the transition, a float between 0.0 and 1.0. Defaults to 1.0.

sync

Sets whether the effect should render new frames automatically (which it does by default). If true, you can render frames manually by calling the render() instance method of an effect. This is used by Effect.Parallel().

queue

Sets queuing options. When used with a string, it can befrontorendto 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}.

delay

Sets the number of seconds to wait before the effect actually starts. Defaults to 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.

Here is an example to use one or more of the above-mentioned parameters. all the parameters are put in a {} and they're separated by using comma (,).

This will produce following result –

Common Parameters for the Effects

Callback methods

You could apply any of the above-mentioned parameters to any element at various events while the effect is running. this is completed by writing a callback approach in JavaScript for that element.

To apply a callback approach, you've got extra four parameters as listed below:

Callback

Description

beforeStart

Called before the main effects rendering loop is started.

beforeUpdate

Called on each iteration of the effects rendering loop, before the redraw takes places.

afterUpdate

Called on each iteration of the effects rendering loop, after the redraw takes places.

afterFinish

Called after the last redraw of the effect was made.

Within the effect object, there are several useful variables you can access and use them in your callback functions:

Variable

Description

effect.element

The element the effect is applied to.

effect.options

Holds the options you gave to the effect.

effect.currentFrame

The number of the last frame rendered.

effect.startOn

The times (in ms) when the effect was started.

effect.finishOn

The times (in ms) when the effect will be finished after starting an effect.

effect.effects[]

On an Effect.Parallel effect, there's an effects[] array containing the individual effects the parallel effect is composed of.


The following example shows how to use a callback:

This will produce following result –

Common Parameters for the Effects

Note − Right here start color and end color are effect specific parameters. we are able to discuss those parameters in effect. highlight.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

script.aculo.us Topics