Dojo Animation (Simple actions)

Applies animation to a control.

Defined in

Extension Library

Type of simple action

Dojo Effects (Client)

Syntax

<xe:dojoAnimateProperty node="target" duration="ms" rate="ms" delay="ms loaded="true|false" easing="function" repeat="number" var="name"><xe:this.attributes><xp:parameter name="name" value="value" loaded="true|false"</xp:parameter>...</xe:this.attributes><xe:this.properties><xe:dojoAnimationProps name="width" start="200" end="400" loaded="true|false" unit="px|pc|pt|mm|cm|in|ex|em"></xe:dojoAnimationProps> ...</xe:this.properties> ...</xe:dojoAnimateProperty>

Table 1. Attributes
Attribute	Description
`attributes="json"`	List of JSON formatted values passed as is.
`delay="ms"`	Wait time before starting the animation in milliseconds. Defaults to 0.
`duration="ms"`	Duration of the animation in milliseconds. Defaults to 350.
`easing="function"`	Function that returns the rate of change of the animation over its duration.
`left="pixels"`xxx	Left position to which the target slides in pixels.
`loaded="true\|false"`	Creates a tag instance when the control is loaded, or not. Defaults to `true`.
`top="pixels"`xxx	Top position to which the target slides in pixels.
`node="target"`	Identifier of the control to which the animation is applied.
`properties="props"`	Sets of properties. Each set has the following properties: `end` for the ending value. `loaded` to create a tag instance when the control is loaded. `name` to name the property. `start` for the staring value. `unit` to specify the unit of measurement: `px` for pixels (default), `pc` for picas, `pt` for points, `mm` for millimeters, `cm` for centimeters, `in` for inches, `ex` for the height of a lowercase `x`, or `em` for the current font size
`rate="ms"`	Wait time between frames in milliseconds. Default is 20 which is 50 frames per second.
`repeat="number"`	Number of times the animation loops.
`var="name"`	Variable name to identify the animation.

Examples

Here two buttons increase and decrease the size of an area.

<xp:div id="div1" style="width: 200px; height: 200px;
	font-size:16pt;font-weight:bold;text-align:center;
	background-color:rgb(128,255,255)">Testing testing testing
</xp:div>
<xp:button value="Label" id="button1">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script>
			<xe:dojoAnimateProperty node="div1" duration="3000" rate="100">
				<xp:this.properties>
					<xe:dojoAnimationProps name="width" start="200" end="400"></xe:dojoAnimationProps>
					<xe:dojoAnimationProps name="height" start="200" end="400"></xe:dojoAnimationProps>
				</xp:this.properties>
			</xe:dojoAnimateProperty>
		</xp:this.script>
	</xp:eventHandler>
</xp:button>
<xp:button value="Label" id="button2">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script>
			<xe:dojoAnimateProperty node="div1" duration="3000" rate="100">
				<xp:this.properties>
					<xe:dojoAnimationProps name="width" start="400" end="200"></xe:dojoAnimationProps>
					<xe:dojoAnimationProps name="height" start="400" end="200"></xe:dojoAnimationProps>
				</xp:this.properties>
			</xe:dojoAnimateProperty>
		</xp:this.script>
	</xp:eventHandler>
</xp:button>