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

endValue

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

startValue

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

Client methods

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

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

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

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.