ColorKeyFrameAnimation ColorKeyFrameAnimation ColorKeyFrameAnimation ColorKeyFrameAnimation Class

Definition

A time-based animation that targets the Color property with one or more color key frames.

The ColorKeyFrameAnimation class is one of the supported types of KeyFrameAnimation s that is used to animate the Color property off of the Brush property on a SpriteVisual. When working with ColorKeyFrameAnimation s, utilize Windows.UI.Color objects for the values of keyframes. Utilize the InterpolationColorSpace property to define which color space the system will interpolate through for the animation.

public : sealed class ColorKeyFrameAnimation : KeyFrameAnimation, IColorKeyFrameAnimationpublic sealed class ColorKeyFrameAnimation : KeyFrameAnimation, IColorKeyFrameAnimationPublic NotInheritable Class ColorKeyFrameAnimation Inherits KeyFrameAnimation Implements IColorKeyFrameAnimation// This API is not available in Javascript.
Inheritance
Attributes
Windows 10 requirements
Device family
Windows 10 (introduced v10.0.10586.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v2)

Inherited Members

Inherited methods

Inherited properties

Examples


void ColorAnimation(SpriteVisual visual)
{
  // Create the ColorKeyFrameAnimation
  var colorAnimation = _compositor.CreateColorKeyFrameAnimation();

  // Create the KeyFrames using Windows.UI.Color objects
  colorAnimation.InsertKeyFrame(0.5f, Colors.Purple);
  colorAnimation.InsertKeyFrame(1.0f, Colors.Cyan);

  // Set the interpolation to go through the HSL space
  colorAnimation.InterpolationColorSpace = CompositionColorSpace.Hsl;
  colorAnimation.Duration = TimeSpan.FromSeconds(3);

  // Apply the cubic-bezier to a KeyFrame
  visual.Brush.StartAnimation("Color", colorAnimation);
}

Remarks

Use the CompostionObject.StartAnimation and CompostionObject.StopAnimation methods to start and stop the animation.

An animation is associated with an object's property by calling CompositionObject::StartAnimation and specifying the property name and the animation. See the remarks section of CompositionObject::StartAnimation for a list of animatable properties.

Properties

InterpolationColorSpace InterpolationColorSpace InterpolationColorSpace InterpolationColorSpace

The color space the color interpolation should run through.

The ColorKeyFrameAnimation.InterpolationColorSpace property enables a developer to choose what color space the system will interpolate through when animating between two colors. Developers can choose between the CompositionColorSpace enum values Rgb, Hsl, or Auto (system chosen).

public : CompositionColorSpace InterpolationColorSpace { get; set; }public CompositionColorSpace InterpolationColorSpace { get; set; }Public ReadWrite Property InterpolationColorSpace As CompositionColorSpace// This API is not available in Javascript.
Value
CompositionColorSpace CompositionColorSpace CompositionColorSpace CompositionColorSpace

The color space the color interpolation should run through.

Methods

InsertKeyFrame(Single, Color) InsertKeyFrame(Single, Color) InsertKeyFrame(Single, Color) InsertKeyFrame(Single, Color)

Inserts a key frame.

public : void InsertKeyFrame(float normalizedProgressKey, Color value)public void InsertKeyFrame(Single normalizedProgressKey, Color value)Public Function InsertKeyFrame(normalizedProgressKey As Single, value As Color) As void// This API is not available in Javascript.
Parameters
normalizedProgressKey
float Single Single Single

The time the key frame should occur at, expressed as a percentage of the animation Duration. Allowed value is from 0.0 to 1.0.

value
Color Color Color Color

The value of the key frame.

See Also

InsertKeyFrame(Single, Color, CompositionEasingFunction) InsertKeyFrame(Single, Color, CompositionEasingFunction) InsertKeyFrame(Single, Color, CompositionEasingFunction) InsertKeyFrame(Single, Color, CompositionEasingFunction)

Inserts a key frame with the specified easing function.

public : void InsertKeyFrame(float normalizedProgressKey, Color value, CompositionEasingFunction easingFunction)public void InsertKeyFrame(Single normalizedProgressKey, Color value, CompositionEasingFunction easingFunction)Public Function InsertKeyFrame(normalizedProgressKey As Single, value As Color, easingFunction As CompositionEasingFunction) As void// This API is not available in Javascript.
Parameters
normalizedProgressKey
float Single Single Single

The time the key frame should occur at, expressed as a percentage of the animation Duration. Allowed value is from 0.0 to 1.0.

value
Color Color Color Color

The value of the key frame.

easingFunction
CompositionEasingFunction CompositionEasingFunction CompositionEasingFunction CompositionEasingFunction

The easing function to use to interpolate between key frames.

See Also

See Also