API Preview tool | The Dojo Toolkit

dojo/_base/fx.js

Provides:
- dojo._base.fx
Requires:
- dojo.lib.kernel in common
- dojo._base.Color in common
- dojo._base.connect in common
- dojo._base.lang in common
- dojo._base.html in common

dojo.Animation

type
```
Function
```

parameters:

args: (typeof Object)

The 'magic argument', mixing all the properties into this
animation instance.

summary

A generic animation class that fires callbacks into its handlers
object at various states.

description

A generic animation class that fires callbacks into its handlers
object at various states. Nearly all dojo animation functions
return an instance of this method, usually without calling the
.play() method beforehand. Therefore, you will likely need to
call .play() on instances of `dojo.Animation` when one is
returned.

dojo.Animation.duration

type
```
Integer
```

summary

The time in milliseonds the animation will take to run

dojo.Animation.curve

type
```
dojo._Line|Array
```

summary

A two element array of start and end values, or a <code>dojo._Line</code> instance to be
used in the Animation.

dojo.Animation.easing

optional
type
```
Function
```

summary

A Function to adjust the acceleration (or deceleration) of the progress
across a dojo._Line

dojo.Animation.repeat

optional
type
```
Integer
```

summary

The number of times to loop the animation

dojo.Animation.rate

optional
type
```
Integer
```

summary

the time in milliseconds to wait before advancing to next frame
(used as a fps timer: 1000/rate = fps)

dojo.Animation.delay

optional
type
```
Integer
```

summary

The time in milliseconds to wait before starting animation after it
has been .play()'ed

dojo.Animation.beforeBegin

optional
type
```
Event
```

summary

Synthetic event fired before a dojo.Animation begins playing (synchronous)

dojo.Animation.onBegin

optional
type
```
Event
```

summary

Synthetic event fired as a dojo.Animation begins playing (useful?)

dojo.Animation.onAnimate

optional
type
```
Event
```

summary

Synthetic event fired at each interval of a <code>dojo.Animation</code>

dojo.Animation.onEnd

optional
type
```
Event
```

summary

Synthetic event fired after the final frame of a <code>dojo.Animation</code>

dojo.Animation.onPlay

optional
type
```
Event
```

summary

Synthetic event fired any time a <code>dojo.Animation</code> is play()'ed

dojo.Animation.onPause

optional
type
```
Event
```

summary

Synthetic event fired when a <code>dojo.Animation</code> is paused

dojo.Animation.onStop

type
```
Event
```

summary

Synthetic event fires when a <code>dojo.Animation</code> is stopped

dojo.Animation._percent
- type
```
Number
```
dojo.Animation._startRepeatCount
- type
```
Number
```
dojo.Animation._getStep
- type
```
Function
```
dojo.Animation._getStep._percent
dojo.Animation._getStep.easing

dojo.Animation._fire

parameters:

evt: (typeof Event)
```
The event to fire.
```
args: (typeof Array)
```
The arguments to pass to the event.
```

returns
```
dojo.Animation
```

summary

Convenience function.  Fire event &quot;evt&quot; and pass it the
arguments specified in &quot;args&quot;.

description

Convenience function.  Fire event "evt" and pass it the
arguments specified in "args".
Fires the callback in the scope of the `dojo.Animation`
instance.

type
```
Function
```

dojo.Animation.play

parameters:

delay: (typeof int)

How many milliseconds to delay before starting.

gotoStart: (typeof Boolean)

If true, starts the animation from the beginning; otherwise,
starts it from its current position.

summary
```
Start the animation.
```

return_summary

dojo.Animation
The instance to allow chaining.

type
```
Function
```

dojo.Animation._play
- parameters:
  - gotoStart
- returns
```
dojo.Animation
```
- type
```
Function
```

dojo.Animation.pause

returns
```
dojo.Animation
```
summary
```
Pauses a running animation.
```
type
```
Function
```

dojo.Animation.gotoPercent

parameters:

percent: (typeof Decimal)

A percentage in decimal notation (between and including 0.0 and 1.0).

andPlay: (typeof Boolean)

If true, play the animation after setting the progress.

returns
```
dojo.Animation
```
summary
```
Sets the progress of the animation.
```
type
```
Function
```

dojo.Animation.stop

parameters:
- gotoEnd: (typeof boolean)
```
If true, the animation will end.
```
returns
```
dojo.Animation
```
summary
```
Stops a running animation.
```
type
```
Function
```

dojo.Animation.status

returns
```
String
```

summary

Returns a string token representation of the status of
the animation, one of: &quot;paused&quot;, &quot;playing&quot;, &quot;stopped&quot;

type
```
Function
```

dojo.Animation._cycle
- returns
```
dojo.Animation
```
- type
```
Function
```
dojo.Animation._clearTimer
- summary
```
Clear the play delay timer
```
- type
```
Function
```
dojo.Animation._startTimer
- type
```
Function
```
dojo.Animation._startTimer._timer
- type
```
Object
```
dojo.Animation._stopTimer
- type
```
Function
```
dojo.Animation._stopTimer._timer
- type
```
Object
```
dojo.__AnimArgs
- type
```
Function
```
- chains:
  - dojo.__FadeArgs: (prototype)
  - dojo.__FadeArgs: (call)
dojo.__AnimArgs.properties
- type
```
Object
```
dojo
- alias - dojo
dojo._mixin
- alias - dojo._mixin

dojo._Line

parameters:

start: (typeof int)
```
Beginning value for range
```
end: (typeof int)
```
Ending value for range
```

summary

dojo._Line is the object used to generate values from a start value
to an end value

type
```
Function
```

dojo._Line.start
- type
```
int
```
- summary
```
Beginning value for range
```
dojo._Line.end
- type
```
int
```
- summary
```
Ending value for range
```

dojo._Line.getValue

parameters:

n: (typeof float)

a floating point number greater than 0 and less than 1

returns
```
Decimal
```
summary
```
Returns the point on the line
```
type
```
Function
```

dojo._Animation
- alias - dojo.Animation

dojo._fade

parameters:
- args: (typeof Object)
returns
```
dojo.Animation
```

summary

Returns an animation that will fade the node defined by
args.node from the start to end values passed (args.start
args.end) (end is mandatory, start is optional)

type
```
Function
```

dojo.__FadeArgs
- parameters:
  - node: (typeof DOMNode|String)
```
The node referenced in the animation
```
  - duration: (typeof Integer)
```
Duration of the animation in milliseconds.
```
  - easing: (typeof Function)
```
An easing function.
```
- type
```
Function
```

dojo.__FadeArgs.node

type
```
DOMNode|String
```
summary
```
The node referenced in the animation
```

dojo.__FadeArgs.duration

optional
type
```
Integer
```

summary

Duration of the animation in milliseconds.

dojo.__FadeArgs.easing
- optional
- type
```
Function
```
- summary
```
An easing function.
```

dojo.fadeIn

parameters:
- args: (typeof dojo.__FadeArgs)
returns
```
dojo.Animation
```

summary

Returns an animation that will fade node defined in 'args' from
its current opacity to fully opaque.

type
```
Function
```

dojo.fadeOut

parameters:
- args: (typeof dojo.__FadeArgs)
returns
```
dojo.Animation
```

summary

Returns an animation that will fade node defined in 'args'
from its current opacity to fully transparent.

type
```
Function
```

dojo._defaultEasing
- parameters:
  - n: (typeof Decimal)
- summary
```
The default easing function for dojo.Animation(s)
```
- type
```
Function
```

dojo.animateProperty

parameters:
- args: (typeof dojo.__AnimArgs)
returns
```
dojo.Animation
```

summary

Returns an animation that will transition the properties of
node defined in <code>args</code> depending how they are defined in
<code>args.properties</code>

description

`dojo.animateProperty` is the foundation of most `dojo.fx`
animations. It takes an object of "properties" corresponding to
style properties, and animates them in parallel over a set
duration.

example

A simple animation that changes the width of the specified node.
	dojo.animateProperty({
		node: "nodeId",
		properties: { width: 400 },
	}).play();
Dojo figures out the start value for the width and converts the
integer specified for the width to the more expressive but
verbose form `{ width: { end: '400', units: 'px' } }` which you
can also specify directly. Defaults to 'px' if ommitted.

example

Animate width, height, and padding over 2 seconds... the
pedantic way:
	dojo.animateProperty({ node: node, duration:2000,
		properties: {
			width: { start: '200', end: '400', units:"px" },
			height: { start:'200', end: '400', units:"px" },
			paddingTop: { start:'5', end:'50', units:"px" }
		}
	}).play();
Note 'paddingTop' is used over 'padding-top'. Multi-name CSS properties
are written using "mixed case", as the hyphen is illegal as an object key.

example

Plug in a different easing function and register a callback for
when the animation ends. Easing functions accept values between
zero and one and return a value on that basis. In this case, an
exponential-in curve.
	dojo.animateProperty({
		node: "nodeId",
		// dojo figures out the start value
		properties: { width: { end: 400 } },
		easing: function(n){
			return (n==0) ? 0 : Math.pow(2, 10 * (n - 1));
		},
		onEnd: function(node){
			// called when the animation finishes. The animation
			// target is passed to this function
		}
	}).play(500); // delay playing half a second

example

Like all `dojo.Animation`s, animateProperty returns a handle to the
Animation instance, which fires the events common to Dojo FX. Use `dojo.connect`
to access these events outside of the Animation definiton:
	var anim = dojo.animateProperty({
		node:"someId",
		properties:{
			width:400, height:500
		}
	});
	dojo.connect(anim,"onEnd", function(){
		console.log("animation ended");
	});
	// play the animation now:
	anim.play();

example

Each property can be a function whose return value is substituted along.
Additionally, each measurement (eg: start, end) can be a function. The node
reference is passed direcly to callbacks.
	dojo.animateProperty({
		node:"mine",
		properties:{
			height:function(node){
				// shrink this node by 50%
				return dojo.position(node).h / 2
			},
			width:{
				start:function(node){ return 100; },
				end:function(node){ return 200; }
			}
		}
	}).play();

type
```
Function
```

dojo.anim

parameters:

node: (typeof DOMNode|String)

a DOM node or the id of a node to animate CSS properties on

properties: (typeof Object)

duration: (typeof Integer)

The number of milliseconds over which the animation
should run. Defaults to the global animation default duration
(350ms).

easing: (typeof Function)

An easing function over which to calculate acceleration
and deceleration of the animation through its duration.
A default easing algorithm is provided, but you may
plug in any you wish. A large selection of easing algorithms
are available in <code>dojo.fx.easing</code>.

onEnd: (typeof Function)

A function to be called when the animation finishes
running.

delay: (typeof Integer)

The number of milliseconds to delay beginning the
animation by. The default is 0.

returns
```
dojo.Animation
```

summary

A simpler interface to <code>dojo.animateProperty()</code>, also returns
an instance of <code>dojo.Animation</code> but begins the animation
immediately, unlike nearly every other Dojo animation API.

description

`dojo.anim` is a simpler (but somewhat less powerful) version
of `dojo.animateProperty`.  It uses defaults for many basic properties
and allows for positional parameters to be used in place of the
packed "property bag" which is used for other Dojo animation
methods.

The `dojo.Animation` object returned from `dojo.anim` will be
already playing when it is returned from this function, so
calling play() on it again is (usually) a no-op.

example

Fade out a node
	dojo.anim("id", { opacity: 0 });

example

Fade out a node over a full second
	dojo.anim("id", { opacity: 0 }, 1000);

type
```
Function
```

dojo._base.fx
- type
```
Object
```
dojo._base
- type
```
Object
```

dojo/_base/fx.js

Provides:

Requires:

dojo.Animation

dojo.Animation.duration

dojo.Animation.curve

dojo.Animation.easing

dojo.Animation.repeat

dojo.Animation.rate

dojo.Animation.delay

dojo.Animation.beforeBegin

dojo.Animation.onBegin

dojo.Animation.onAnimate

dojo.Animation.onEnd

dojo.Animation.onPlay

dojo.Animation.onPause

dojo.Animation.onStop

dojo.Animation._percent

dojo.Animation._startRepeatCount

dojo.Animation._getStep

dojo.Animation._getStep._percent

dojo.Animation._getStep.easing

dojo.Animation._fire

dojo.Animation.play

dojo.Animation._play

dojo.Animation.pause

dojo.Animation.gotoPercent

dojo.Animation.stop

dojo.Animation.status

dojo.Animation._cycle

dojo.Animation._clearTimer

dojo.Animation._startTimer

dojo.Animation._startTimer._timer

dojo.Animation._stopTimer

dojo.Animation._stopTimer._timer

dojo.__AnimArgs

dojo.__AnimArgs.properties

dojo

dojo._mixin

dojo._Line

dojo._Line.start

dojo._Line.end

dojo._Line.getValue

dojo._Animation

dojo._fade

dojo.__FadeArgs

dojo.__FadeArgs.node

dojo.__FadeArgs.duration

dojo.__FadeArgs.easing

dojo.fadeIn

dojo.fadeOut

dojo._defaultEasing

dojo.animateProperty

dojo.anim

dojo._base.fx

dojo._base