ColorAnimation

• 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

ColorAnimation (inherits InterpolatedAnimation)

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

Client properties

Name	Description
endValue	Ending color of the transition formatted as a 7-character hex string (like #246ACF).
startValue	Starting color of the transition formatted as a 7-character hex string (like #246ACF).

Client methods

Name	Description
.ctor(target, duration, fps, property, propertyKey, startValue, endValue)
getAnimatedValue(percentage)	Get the interpolated color values.
getRGB(color)	Convert the color to an RGB triplet.
onStart()	Determine which dimensions of color will be animated.
toColor(red, green, blue)	Convert an RBG triplet into a 7-character hex string (like #246ACF).

Client properties

startValue

Starting color of the transition formatted as a 7-character hex string (like #246ACF).
Setter name: set_startValue(value)

endValue

Ending color of the transition formatted as a 7-character hex string (like #246ACF).
Setter name: set_startValue(value)

Client methods

.ctor(target, duration, fps, property, propertyKey, startValue, endValue)

Params:

• target

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

• 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.

• property

  • Type: Object
  • Description: Property of the target element to set when animating.

• propertyKey

  • Type: Object
  • Description: optional key of the property to be set (which indicates the value property[propertyKey], like style['backgroundColor']). Note that for the style property, the key must be in a JavaScript friendly format (i.e. backgroundColor instead of background-color).

• startValue

  • Type: Object
  • Description: Start of the range of values.

• endValue

  • Type: Object
  • Description: End of the range of values.

onStart()

Determine which dimensions of color will be animated.

getAnimatedValue(percentage)

Get the interpolated color values.

Params:

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

getRGB(color)

Convert the color to an RGB triplet.

Params:

• color
  • Type: String
  • Description: Color formatted as a 7-character hex string (like #246ACF).

toColor(red, green, blue)

Convert an RBG triplet into a 7-character hex string (like #246ACF).

Params:

• red

  • Type: Object
  • Description: Value of the color's red dimension.

• green

  • Type: Object
  • Description: Value of the color's green dimension.

• blue

  • Type: Object
  • Description: Value of the color's blue dimension.