You are on page 1of 4

Animation

<ajaxToolkit:AnimationExtender ID="ae"
runat="server" TargetControlID="ctrl">
<Animations>
<OnLoad> ... </OnLoad>
<OnClick> ... </OnClick>
<OnMouseOver> ... </OnMouseOver>
<OnMouseOut> ... </OnMouseOut>
<OnHoverOver> ... </OnHoverOver>
<OnHoverOut> ... </OnHoverOut>
</Animations>
</ajaxToolkit:AnimationExtender>

TargetControlID - ID of the target control whose events are used to animate (this is also the default
target of the animations)
OnLoad - Generic animation played as soon as the page is loaded
OnClick - Generic animation played when the target control is clicked
OnMouseOver - Generic animation played when the mouse moves over the target control
OnMouseOut - Generic animation played when the mouse moves out of the target control
OnHoverOver - Generic animation similar to OnMouseOver except it will stop the OnHoverOut
animation before it plays
OnHoverOut - Generic animation similar to OnMouseOut except it will stop the OnHoverOver animation
before it plays

Properties:
Number duration; (Length of time to play the animation (in seconds). The default value is 1.
Number fps; (Number of frames per second shown when animating. The default values is 25.)
Boolean isActive; // Read Only (true if animation is active, false if not.)
Boolean isInitialized; // Read Only (Inherited from Sys.Component)
Boolean isPlaying; // Read Only (true if animation is playing, false if not.)
Boolean isUpdating; // Read Only (Inherited from Sys.Component)
Number percentComplete; // Read Only (Percentage of the animation already played.)
Object target; (Target element that the animation should operate on. (Note: Do not set this property in
a generic xml animation description. It will be set automatically using either the TargetControlID or the
AnimationTarget properties.))


Methods:
dispose(); Dispose the animation
getAnimatedValue(); Determine the state of the animation after the given percentage of its duration has
elapsed
getDescriptor(); Inherited from Sys.Component
interpolate(start, end, percentage); Given two Numbers start and end, the interpolate function will
produce another Number the specified percentage between the two values.
onEnd(); Perform any cleanup after playing the animation.
onStart(); Perform any initialization before playing the animation.
onStep(percentage); Progress the animation through each frame
pause(); Pause the animation
play(); Play the animation
setOwner(owner); Inherited from Sys.Component
setValue(value); Set the current state of the animation
stop(); Stop playing the animation


Parallel Animation
The ParallelAnimation plays several animations simultaneously. It inherits fromParentAnimation, but makes
itself the owner of all its child animations as this allows it to use a single timer and synchronization mechanisms of
the parent animation (in other words, theduration properties of any child animations are ignored in favor of the
parent's duration). It is very useful in creating sophisticated effects through combinations of simpler animations.
Note: The ParallelAnimation cannot have any child animations that derive fromSequenceAnimation.

Sequence Animation
The SequenceAnimation runs several child animations one after the other. It can also repeat the sequence of
animations for a specified number of iterations (which defaults to a single iteration, but will repeat forever if you
specify zero or less iterations). It is important to note that the SequenceAnimation ignores
its duration and fps properties, and will let each of its child animations use any values they please.
Note: The SequenceAnimation cannot be a child animation of ParallelAnimation,SelectionAnimation, or any
animation deriving from these two.

Selection Animation
The SelectionAnimation will run a single animation chosen from of its child animations. This is a base class with
no functional implementation, so consider using ConditionAnimationor CaseAnimation.
Note: The SelectionAnimation cannot have any child animations that derive fromSequenceAnimation.

Condition Animation
The ConditionAnimation is used as a control structure to play a specific child animation depending on the result
of executing the conditionScript. If the conditionScriptevaluated to true, the first child animation is played.
If it evaluates to false, the second child animation is played (although nothing is played if the second animation is not
present).
Note: The ConditionAnimation cannot have any child animations that derive fromSequenceAnimation.

Case Animation
The CaseAnimation is used as a control structure to play a specific child animation depending on the result of
executing the selectScript, which should evaluate to the index of the child animation to play (this is similar to
the switch statement in C#, etc.). If the provided index is outside the bounds of the child animations (or if nothing
was returned) then we will not play anything.
Note: The CaseAnimation cannot have any child animations that derive fromSequenceAnimation.

Fade Animation
The FadeAnimation is used to fade an element in or out of view, depending on the
provided AjaxControlToolkit.Animation.FadeEffect. The minimum and maximum opacity values can be
specified to precisely control the fade. Also, due to known issues with Internet Explorer,
the forceLayoutInIE property is used to enforce certain conditions (specifically that it has a set size and
background color). You may also consider usingFadeInAnimation and FadeOutAnimation if you know the specific
direction you are fading.

FadeIn Animation
The FadeInAnimation performs a fade in from the current opacity to themaximumOpacity.

FadeOut Animation
The FadeOutAnimation performs a fade out from the current opacity to theminimumOpacity.

Pulse Animation
The PulseAnimation fades an element in and our repeatedly to create a pulsating effect.
The iterations determine how many pulses there will be. The duration property defines the length of each fade
in or fade out, not the length of the animation as a whole.

Property Animation
The PropertyAnimation is a useful base animation that will assign the value fromgetAnimatedValue to a
specified property. You can provide the name of a propertyalongside an optional propertyKey (which indicates
the value property[propertyKey], like style['backgroundColor']).

Discrete Animation
The DiscreteAnimation inherits from PropertyAnimation and sets the value of theproperty to the elements in a
provided array of values.

Interpolated Animation
The InterpolatedAnimation assigns a range of values between startValue andendValue to the
designated property.

Color Animation
The ColorAnimation transitions the value of a property between two colors (although it does ignore the alpha
channel). The colors must be 7-character hex strings (like #246ACF).

Length Animation
The LengthAnimation is identical to InterpolatedAnimation except it adds a unit to the value before assigning it
to the property.

Move Animation
The MoveAnimation is used to move the target element. If the relative flag is set to true, then it treats
the horizontal and vertical properties as offsets to move the element. If the relative flag is false, then it
will treat the horizontal and verticalproperties as coordinates on the page where the target element should
be moved. It is important to note that the target must be positioned (i.e. absolutely) so that settings
its top/left properties will change its location.

Resize Animation
The ResizeAnimation changes the size of the target from its current values to the
specified width and height.

Scale Animation
The ScaleAnimation scales the size of the target element by the given scaleFactor(i.e. a scaleFactor of
.5 will shrink it in half and a scaleFactor of 2.0 will double it). IfscaleFont is true, the size of the font will
also scale with the element. If center is true, then the element's center will not move as it is scaled. It is important
to note that thetarget must be positioned (i.e. absolutely) so that settings its top/left properties will
change its location in order for center to have an effect.

Action
Action is a base class for all "non-animating" animations. While regular animations perform an operation in a
sequence of small steps spread over an interval, the actions perform a single operation instantaneously. By default,
all actions have a duration of zero.

Enable Action
The EnableAction changes whether or not the target is disabled.

Hide Action
The HideAction simply hides the target from view (by setting its style's displayattribute to 'none').

Style Action
The StyleAction is used to set a particular attribute of the target's style.

Opacity Action
OpacityAction will set the opacity of the target.

Script Action
The ScriptAction is used to execute arbitrary JavaScript.