Animation

• Animation
  • ParentAnimation
    • ParallelAnimation
    • SequenceAnimation
    • SelectionAnimation
      • ConditionAnimation
      • CaseAnimation
  • FadeAnimation
    • FadeInAnimation
    • FadeOutAnimation
      • PulseAnimation
  • PropertyAnimation
    • DiscreteAnimation
    • InterpolatedAnimation
      • ColorAnimation
      • LengthAnimation
      • MoveAnimation
      • ResizeAnimation
  • ScaleAnimation
  • Action
    • EnableAction
    • HideAction
    • StyleAction
    • OpacityAction
    • ScriptAction

Animation

Animation is an abstract base class used as a starting point for all the other animations. It 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.

Client properties

Name	Description
duration	Length of the animation in seconds. The default is 1.
fps	Number of steps per second. The default is 25.
isActive	true if animation is active, false if not.
isPlaying	true if animation is playing, false if not.
percentComplete	Percentage of the animation already played.
target	Target Sys.UI.DomElement of the animation. If the target of this animation is null and the animation has a parent, then it will recursively use the target of the parent animation instead.

Client methods

Name	Description
.ctor(target, duration, fps)
getAnimatedValue(percentage)	Determine the state of the animation after the given percentage of its duration has elapsed.
interpolate(start, end, percentage)	The interpolate function is used to find the appropriate value between starting and ending values given the current percentage.
onEnd()	The onEnd method is called just after the animation is played each time.
onStart()	The onStart method is called just before the animation is played each time.
onStep(percentage)	The onStep method is called repeatedly to progress the animation through each frame.
pause()	Pause the animation if it is playing. Calling play will resume where the animation left off.
play()	Play the animation from the beginning or where it was left off when paused.
setAnimationTarget(id)	Sets animation target by id.
setOwner(owner)	Makes this animation the child of another animation.
setValue(value)	Set the current state of the animation.
stop(finish)	Stop playing the animation.

Client events

Name	Description
ended	Fires just after the animation is played each time.
started	Fires just before the animation is played each time.
step	Fires at each frame of the the animation.

Client properties

duration

Length of the animation in seconds. The default is 1.

Getter name: get_duration()
Setter name: set_duration(value)

fps

Number of steps per second. The default is 25.

Getter name: get_fps()
Setter name: set_fps(value)

target

Target Sys.UI.DomElement of the animation. If the target of this animation is null and the animation has a parent, then it will recursively use the target of the parent animation instead.

Remarks: Do not set this property in a generic Xml animation description. It should be set using either the extender's TargetControlID or the AnimationTarget property (the latter maps to Sys.Extended.UI.Animation.set_animationTarget). The only valid way to set this property in the generic Xml animation description is to use the dynamic property TargetScript="$get('myElement')".

Getter name: get_target()
Setter name: set_target(value)

percentComplete

Percentage of the animation already played.

Getter name: get_percentComplete()
Setter name: set_percentComplete(value)

isActive

true if animation is active, false if not.

Getter name: get_isActive()

isPlaying

true if animation is playing, false if not.

Getter name: get_isPlaying()

Client methods

.ctor(target, duration, fps)

Params:

• target

  • Type: Object
  • Description: Target of the animation.

• duration

  • Type: Number
  • Description: Length of the animation in seconds. The default is 1.

• fps

  • Type: Number
  • Description: Number of steps per second. The default is 25.

play()

Play the animation from the beginning or where it was left off when paused.

Remarks: If this animation is the child of another, you must call play on its parent instead.

pause()

Pause the animation if it is playing. Calling play will resume where the animation left off.

Remarks: If this animation is the child of another, you must call pause on its parent instead.

stop(finish)

Stop playing the animation.

Remarks: If this animation is the child of another, you must call stop on its parent instead.

Params:

• finish
  • Type: Boolean
  • Description: Whether or not stopping the animation should leave the target element in a state consistent with the animation playing completely by performing the last step. The default value is true.

onStart()

The onStart method is called just before the animation is played each time.

onStep(percentage)

The onStep method is called repeatedly to progress the animation through each frame.

Params:

• percentage
  • Type: Number
  • Description: Percentage of the animation already complete.

onEnd()

The onEnd method is called just after the animation is played each time.

getAnimatedValue(percentage)

Determine the state of the animation after the given percentage of its duration has elapsed.

Params:

• percentage
  • Type: Number
  • Description: Percentage of the animation already complete.

setValue(value)

Set the current state of the animation.

Params:

• value
  • Type: Object
  • Description: Animation state.

interpolate(start, end, percentage)

The interpolate function is used to find the appropriate value between starting and ending values given the current percentage.

Params:

• start

  • Type: Number
  • Description: Start of the range to interpolate.

• end

  • Type: Number
  • Description: End of the range to interpolate.

• percentage

  • Type: Number
  • Description: Percentage completed in the range to interpolate.

setOwner(owner)

Makes this animation the child of another animation.

Params:

• owner
  • Type: Object
  • Description: Parent animation.

setAnimationTarget(id)

Sets animation target by id.

Params:

• id
  • Type: Object
  • Description: ID of a Sys.UI.DomElement or Sys.UI.Control to use as the target of the animation If no Sys.UI.DomElement or Sys.UI.Control can be found for the given ID, an argument exception will be thrown.

Client events

started

Fires just before the animation is played each time.

Add event handler method: add_started(handler)
Remove event handler method: remove_started(handler)
Raise event method: raise_started()

ended

Fires just after the animation is played each time.

Add event handler method: add_ended(handler)
Remove event handler method: remove_ended(handler)
Raise event method: raise_ended()

step

Fires at each frame of the the animation.

Add event handler method: add_step(handler)
Remove event handler method: remove_step(handler)
Raise event method: raise_step()