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	A boolean value that determines whether or not animation is active.
isPlaying	A boolean value that determines whether or not animation is currently playing.
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
constructor(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)	Set the animation target by its identifier.
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	Occurs each time after animation stops playing.
started	Occurs each time before animation starts playing.
step	Occurs on animation's each frame.

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)

isActive

A boolean value that determines whether or not animation is active.

Getter name: get_isActive()

isPlaying

A boolean value that determines whether or not animation is currently playing.

Getter name: get_isPlaying()

percentComplete

Percentage of the animation already played.

Getter name: get_percentComplete()
Setter name: set_percentComplete(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)

Client methods

constructor(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.

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.

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.

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.

Params:

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

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.

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.

setAnimationTarget(id)

Set the animation target by its identifier.

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.

setOwner(owner)

Makes this animation the child of another animation.

Params:

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

setValue(value)

Set the current state of the animation.

Params:

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

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.

Client events

ended

Occurs each time after animation stops playing.

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

started

Occurs each time before animation starts playing.

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

step

Occurs on animation's each frame.

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