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
-
ColorKeyFrameAnimationColorKeyFrameAnimationColorKeyFrameAnimationColorKeyFrameAnimation
- Attributes
| 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.
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.
- 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.
- 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.
- 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.
- easingFunction
- CompositionEasingFunction CompositionEasingFunction CompositionEasingFunction CompositionEasingFunction
The easing function to use to interpolate between key frames.
- See Also