Animation Reference
Animation
Parent Animation
Parallel Animation
Sequence Animation
Selection Animation
Condition Animation
Case Animation
Fade Animation
FadeIn Animation
FadeOut Animation
Pulse Animation
Property Animation
Discrete Animation
Interpolated Animation
Color Animation
Length Animation
Move Animation
Resize Animation
Scale Animation
Action
Enable Action
Hide Action
Style Action
Opacity Action
Script Action
Animation
Animation is an abstract base class used as a starting point for all the other animations.
provides the basic mechanics for the animation (playing, pausing, stopping, timing, etc.)
and leaves the actual animation to be done in the abstract methods getAnimatedValue
and setValue.
| Tag: |
Animation |
| Class: |
AjaxControlToolkit.Animation.Animation |
| Base: |
Sys.Component |
| Constructor: |
new AjaxControlToolkit.Animation.Animation(target, duration, fps); |
| Play: |
AjaxControlToolkit.Animation.Animation.play(target, duration, fps); |
| 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
|
|
Parent Animation
The ParentAnimation serves as a base class for all animations that contain children (such as
ParallelAnimation,
SequenceAnimation, etc.). It does not
actually play the animations, so any classes that inherit from it must do so.
| Tag: |
Parent |
| Class: |
AjaxControlToolkit.Animation.ParentAnimation |
| Base: |
AjaxControlToolkit.Animation.Animation |
| Constructor: |
new AjaxControlToolkit.Animation.ParentAnimation(target, duration, fps, animations); |
| Play: |
AjaxControlToolkit.Animation.ParentAnimation.play(target, duration, fps, animations); |
| Properties: |
|
| Methods: |
|
Parallel Animation
The ParallelAnimation plays several animations simultaneously. It inherits from
ParentAnimation, 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, the duration
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
from SequenceAnimation.
| Tag: |
Parallel |
| Class: |
AjaxControlToolkit.Animation.ParallelAnimation |
| Base: |
AjaxControlToolkit.Animation.ParentAnimation |
| Constructor: |
new AjaxControlToolkit.Animation.ParallelAnimation(target, duration, fps, animations); |
| Play: |
AjaxControlToolkit.Animation.ParallelAnimation.play(target, duration, fps, animations); |
| Properties: |
|
| Methods: |
|
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.
| Tag: |
Sequence |
| Class: |
AjaxControlToolkit.Animation.SequenceAnimation |
| Base: |
AjaxControlToolkit.Animation.ParentAnimation |
| Constructor: |
new AjaxControlToolkit.Animation.SequenceAnimation(target, duration, fps, animations, iterations); |
| Play: |
AjaxControlToolkit.Animation.SequenceAnimation.play(target, duration, fps, animations, iterations); |
| Properties: |
|
| Methods: |
|
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 ConditionAnimation or
CaseAnimation.
Note: The SelectionAnimation cannot have any child animations that derive
from SequenceAnimation.
| Tag: |
Selection |
| Class: |
AjaxControlToolkit.Animation.SelectionAnimation |
| Base: |
AjaxControlToolkit.Animation.ParentAnimation |
| Constructor: |
new AjaxControlToolkit.Animation.SelectionAnimation(target, duration, fps, animations); |
| Play: |
AjaxControlToolkit.Animation.SelectionAnimation.play(target, duration, fps, animations); |
| Properties: |
|
| Methods: |
|
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 conditionScript
evaluated 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 from SequenceAnimation.
| Tag: |
Condition |
| Class: |
AjaxControlToolkit.Animation.ConditionAnimation |
| Base: |
AjaxControlToolkit.Animation.SelectionAnimation |
| Constructor: |
new AjaxControlToolkit.Animation.ConditionAnimation(target, duration, fps, animations, conditionScript); |
| Play: |
AjaxControlToolkit.Animation.ConditionAnimation.play(target, duration, fps, animations, conditionScript); |
| Properties: |
|
| Methods: |
|
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 from SequenceAnimation.
| Tag: |
Case |
| Class: |
AjaxControlToolkit.Animation.CaseAnimation |
| Base: |
AjaxControlToolkit.Animation.SelectionAnimation |
| Constructor: |
new AjaxControlToolkit.Animation.CaseAnimation(target, duration, fps, animations, selectScript); |
| Play: |
AjaxControlToolkit.Animation.CaseAnimation.play(target, duration, fps, animations, selectScript); |
| Properties: |
|
| Methods: |
|
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 using
FadeInAnimation and FadeOutAnimation if you know the specific direction you are fading.
| Tag: |
Fade |
| Class: |
AjaxControlToolkit.Animation.FadeAnimation |
| Base: |
AjaxControlToolkit.Animation.Animation |
| Constructor: |
new AjaxControlToolkit.Animation.FadeAnimation(target, duration, fps, effect, minimumOpacity, maximumOpacity, forceLayoutInIE); |
| Play: |
AjaxControlToolkit.Animation.FadeAnimation.play(target, duration, fps, effect, minimumOpacity, maximumOpacity, forceLayoutInIE); |
| Properties: |
|
| Methods: |
|
FadeIn Animation
The FadeInAnimation performs a fade in from the current opacity to the
maximumOpacity.
| Tag: |
FadeIn |
| Class: |
AjaxControlToolkit.Animation.FadeInAnimation |
| Base: |
AjaxControlToolkit.Animation.FadeAnimation |
| Constructor: |
new AjaxControlToolkit.Animation.FadeInAnimation(target, duration, fps, minimumOpacity, maximumOpacity, forceLayoutInIE); |
| Play: |
AjaxControlToolkit.Animation.FadeInAnimation.play(target, duration, fps, minimumOpacity, maximumOpacity, forceLayoutInIE); |
| Properties: |
|
| Methods: |
|
FadeOut Animation
The FadeOutAnimation performs a fade out from the current opacity to the
minimumOpacity.
| Tag: |
FadeOut |
| Class: |
AjaxControlToolkit.Animation.FadeOutAnimation |
| Base: |
AjaxControlToolkit.Animation.FadeAnimation |
| Constructor: |
new AjaxControlToolkit.Animation.FadeOutAnimation(target, duration, fps, minimumOpacity, maximumOpacity, forceLayoutInIE); |
| Play: |
AjaxControlToolkit.Animation.FadeOutAnimation.play(target, duration, fps, minimumOpacity, maximumOpacity, forceLayoutInIE); |
| Properties: |
|
| Methods: |
|
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.
| Tag: |
Pulse |
| Class: |
AjaxControlToolkit.Animation.PulseAnimation |
| Base: |
AjaxControlToolkit.Animation.SequenceAnimation |
| Constructor: |
new AjaxControlToolkit.Animation.PulseAnimation(target, duration, fps, iterations, minimumOpacity, maximumOpacity, forceLayoutInIE); |
| Play: |
AjaxControlToolkit.Animation.PulseAnimation.play(target, duration, fps, iterations, minimumOpacity, maximumOpacity, forceLayoutInIE); |
| Properties: |
|
| Methods: |
|
Property Animation
The PropertyAnimation is a useful base animation that will assign the value from
getAnimatedValue to a specified property. You can provide the name of a property
alongside an optional propertyKey (which indicates the value property[propertyKey],
like style['backgroundColor']).
| Tag: |
Property |
| Class: |
AjaxControlToolkit.Animation.PropertyAnimation |
| Base: |
AjaxControlToolkit.Animation.Animation |
| Constructor: |
new AjaxControlToolkit.Animation.PropertyAnimation(target, duration, fps, property, propertyKey); |
| Play: |
AjaxControlToolkit.Animation.PropertyAnimation.play(target, duration, fps, property, propertyKey); |
| Properties: |
|
| Methods: |
|
Discrete Animation
The DiscreteAnimation inherits from PropertyAnimation and sets the value
of the property to the elements in a provided array of values.
| Tag: |
Discrete |
| Class: |
AjaxControlToolkit.Animation.DiscreteAnimation |
| Base: |
AjaxControlToolkit.Animation.PropertyAnimation |
| Constructor: |
new AjaxControlToolkit.Animation.DiscreteAnimation(target, duration, fps, property, propertyKey, values); |
| Play: |
AjaxControlToolkit.Animation.DiscreteAnimation.play(target, duration, fps, property, propertyKey, values); |
| Properties: |
|
| Methods: |
|
Interpolated Animation
The InterpolatedAnimation assigns a range of values between startValue and
endValue to the designated property.
| Tag: |
Interpolated |
| Class: |
AjaxControlToolkit.Animation.InterpolatedAnimation |
| Base: |
AjaxControlToolkit.Animation.PropertyAnimation |
| Constructor: |
new AjaxControlToolkit.Animation.InterpolatedAnimation(target, duration, fps, property, propertyKey, startValue, endValue); |
| Play: |
AjaxControlToolkit.Animation.InterpolatedAnimation.play(target, duration, fps, property, propertyKey, startValue, endValue); |
| Properties: |
|
| Methods: |
|
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).
| Tag: |
Color |
| Class: |
AjaxControlToolkit.Animation.ColorAnimation |
| Base: |
AjaxControlToolkit.Animation.InterpolatedAnimation |
| Constructor: |
new AjaxControlToolkit.Animation.ColorAnimation(target, duration, fps, property, propertyKey, startValue, endValue); |
| Play: |
AjaxControlToolkit.Animation.ColorAnimation.play(target, duration, fps, property, propertyKey, startValue, endValue); |
| Properties: |
|
| Methods: |
|
Length Animation
The LengthAnimation is identical to InterpolatedAnimation except it adds a unit to the value before assigning it to the property.
| Tag: |
Length |
| Class: |
AjaxControlToolkit.Animation.LengthAnimation |
| Base: |
AjaxControlToolkit.Animation.InterpolatedAnimation |
| Constructor: |
new AjaxControlToolkit.Animation.LengthAnimation(target, duration, fps, property, propertyKey, startValue, endValue, unit); |
| Play: |
AjaxControlToolkit.Animation.LengthAnimation.play(target, duration, fps, property, propertyKey, startValue, endValue, unit); |
| Properties: |
|
| Methods: |
|
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 vertical properties
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.
| Tag: |
Move |
| Class: |
AjaxControlToolkit.Animation.MoveAnimation |
| Base: |
AjaxControlToolkit.Animation.ParallelAnimation |
| Constructor: |
new AjaxControlToolkit.Animation.MoveAnimation(target, duration, fps, horizontal, vertical, relative, unit); |
| Play: |
AjaxControlToolkit.Animation.MoveAnimation.play(target, duration, fps, horizontal, vertical, relative, unit); |
| Properties: |
|
| Methods: |
|
Resize Animation
The ResizeAnimation changes the size of the target from its current values to
the specified width and height.
| Tag: |
Resize |
| Class: |
AjaxControlToolkit.Animation.ResizeAnimation |
| Base: |
AjaxControlToolkit.Animation.ParallelAnimation |
| Constructor: |
new AjaxControlToolkit.Animation.ResizeAnimation(target, duration, fps, width, height, unit); |
| Play: |
AjaxControlToolkit.Animation.ResizeAnimation.play(target, duration, fps, width, height, unit); |
| Properties: |
|
| Methods: |
|
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). If scaleFont 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 the target 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.
| Tag: |
Scale |
| Class: |
AjaxControlToolkit.Animation.ScaleAnimation |
| Base: |
AjaxControlToolkit.Animation.Animation |
| Constructor: |
new AjaxControlToolkit.Animation.ScaleAnimation(target, duration, fps, scaleFactor, unit, center, scaleFont, fontUnit); |
| Play: |
AjaxControlToolkit.Animation.ScaleAnimation.play(target, duration, fps, scaleFactor, unit, center, scaleFont, fontUnit); |
| Properties: |
|
| Methods: |
|
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.
| Tag: |
Action |
| Class: |
AjaxControlToolkit.Animation.Action |
| Base: |
AjaxControlToolkit.Animation.Animation |
| Constructor: |
new AjaxControlToolkit.Animation.Action(target, duration, fps); |
| Play: |
AjaxControlToolkit.Animation.Action.play(target, duration, fps); |
| Properties: |
|
| Methods: |
|
Enable Action
The EnableAction changes whether or not the target is disabled.
| Tag: |
EnableAction |
| Class: |
AjaxControlToolkit.Animation.EnableAction |
| Base: |
AjaxControlToolkit.Animation.Action |
| Constructor: |
new AjaxControlToolkit.Animation.EnableAction(target, duration, fps, enabled); |
| Play: |
AjaxControlToolkit.Animation.EnableAction.play(target, duration, fps, enabled); |
| Properties: |
|
| Methods: |
|
Hide Action
The HideAction simply hides the target from view (by setting its style's display attribute to 'none').
| Tag: |
HideAction |
| Class: |
AjaxControlToolkit.Animation.HideAction |
| Base: |
AjaxControlToolkit.Animation.Action |
| Constructor: |
new AjaxControlToolkit.Animation.HideAction(target, duration, fps, visible); |
| Play: |
AjaxControlToolkit.Animation.HideAction.play(target, duration, fps, visible); |
| Properties: |
|
| Methods: |
|
Style Action
The StyleAction is used to set a particular attribute of the target's style.
| Tag: |
StyleAction |
| Class: |
AjaxControlToolkit.Animation.StyleAction |
| Base: |
AjaxControlToolkit.Animation.Action |
| Constructor: |
new AjaxControlToolkit.Animation.StyleAction(target, duration, fps, attribute, value); |
| Play: |
AjaxControlToolkit.Animation.StyleAction.play(target, duration, fps, attribute, value); |
| Properties: |
|
| Methods: |
|
Opacity Action
OpacityAction will set the opacity of the target.
| Tag: |
OpacityAction |
| Class: |
AjaxControlToolkit.Animation.OpacityAction |
| Base: |
AjaxControlToolkit.Animation.Action |
| Constructor: |
new AjaxControlToolkit.Animation.OpacityAction(target, duration, fps, opacity); |
| Play: |
AjaxControlToolkit.Animation.OpacityAction.play(target, duration, fps, opacity); |
| Properties: |
|
| Methods: |
|
Script Action
The ScriptAction is used to execute arbitrary JavaScript.
| Tag: |
ScriptAction |
| Class: |
AjaxControlToolkit.Animation.ScriptAction |
| Base: |
AjaxControlToolkit.Animation.Action |
| Constructor: |
new AjaxControlToolkit.Animation.ScriptAction(target, duration, fps, script); |
| Play: |
AjaxControlToolkit.Animation.ScriptAction.play(target, duration, fps, script); |
| Properties: |
|
| Methods: |
|