KeyFrameAnimation
KeyFrameAnimation
KeyFrameAnimation
KeyFrameAnimation
Class
Definition
A time-based animation with one or more key frames. These frames are markers, allowing developers to specify values at specific times for the animating property. KeyFrame animations can be further customized by specifying how the animation interpolates between keyframes.
public : class KeyFrameAnimation : CompositionAnimation, IKeyFrameAnimation, IKeyFrameAnimation2, IKeyFrameAnimation3public class KeyFrameAnimation : CompositionAnimation, IKeyFrameAnimation, IKeyFrameAnimation2, IKeyFrameAnimation3Public Class KeyFrameAnimation Inherits CompositionAnimation Implements IKeyFrameAnimation, IKeyFrameAnimation2, IKeyFrameAnimation3// This API is not available in Javascript.
- Inheritance
-
KeyFrameAnimationKeyFrameAnimationKeyFrameAnimationKeyFrameAnimation
- Attributes
| Device family |
Windows 10 (introduced v10.0.10240.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v1)
|
Inherited Members
Inherited methods
Inherited properties
Remarks
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. See Composition Animations Overview for additional information on ExpressionAnimation s.
Properties
DelayBehavior DelayBehavior DelayBehavior DelayBehavior
The delay behavior of the key frame animation.
public : AnimationDelayBehavior DelayBehavior { get; set; }public AnimationDelayBehavior DelayBehavior { get; set; }Public ReadWrite Property DelayBehavior As AnimationDelayBehavior// This API is not available in Javascript.
The delay behavior of the key frame animation.
| Device family |
Windows 10 Creators Update (introduced v10.0.15063.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v4)
|
DelayTime DelayTime DelayTime DelayTime
Delay before the animation starts after CompositionObject::StartAnimation is called.
public : TimeSpan DelayTime { get; set; }public TimeSpan DelayTime { get; set; }Public ReadWrite Property DelayTime As TimeSpan// This API is not available in Javascript.
- Value
- TimeSpan TimeSpan TimeSpan TimeSpan
Delay before the animation starts after CompositionObject::StartAnimation is called.
Direction Direction Direction Direction
The direction the animation is playing.
The Direction property allows you to drive your animation from start to end or end to start or alternate between start and end or end to start if animation has an IterationCount greater than one. This gives an easy way for customizing animation definitions.
public : AnimationDirection Direction { get; set; }public AnimationDirection Direction { get; set; }Public ReadWrite Property Direction As AnimationDirection// This API is not available in Javascript.
The direction the animation is playing.
| Device family |
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v3)
|
Examples
AnimationDirection is Normal
class Direction
{
Direction(Compositor compositor, SpriteVisual heroVisual)
{
Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
animation.InsertKeyFrame(0f, new Vector3(0f,0f,0f));
animation.InsertKeyFrame(1f, new Vector3(20f,20f,0f));
animation.Duration = TimeSpan.FromSeconds(0.25);
// Run animation for 4 times
animation.IterationCount = 4;
// Direction of animation is normal i.e. forward.
animation.Direction = AnimationDirection.Normal;
heroVisual.StartAnimation("Offset", animation);
}
}
AnimationDirection is Reverse
class Direction
{
Direction(Compositor compositor, SpriteVisual heroVisual)
{
Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
animation.InsertKeyFrame(0f, new Vector3(0f,0f,0f));
animation.InsertKeyFrame(1f, new Vector3(20f,20f,0f));
animation.Duration = TimeSpan.FromSeconds(0.25);
// Run animation for 4 times
animation.IterationCount = 4;
// Direction of animation is Reverse i.e. end to start.
animation.Direction = AnimationDirection.Reverse;
heroVisual.StartAnimation("Offset", animation);
}
}
AnimationDirection is Alternate
class Direction
{
Direction(Compositor compositor, SpriteVisual heroVisual)
{
Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
animation.InsertKeyFrame(0f, new Vector3(0f,0f,0f));
animation.InsertKeyFrame(1f, new Vector3(20f,20f,0f));
animation.Duration = TimeSpan.FromSeconds(0.25);
// Run animation for 4 times
animation.IterationCount = 4;
// Direction of animation is alternate i.e. start to end and then end to start and so on.
animation.Direction = AnimationDirection.Alternate;
heroVisual.StartAnimation("Offset", animation);
}
}
AnimationDirection is AlternateReverse
class Direction
{
Direction(Compositor compositor, SpriteVisual heroVisual)
{
Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
animation.InsertKeyFrame(0f, new Vector3(0f,0f,0f));
animation.InsertKeyFrame(1f, new Vector3(20f,20f,0f));
animation.Duration = TimeSpan.FromSeconds(0.25);
// Run animation for 4 times
animation.IterationCount = 4;
// Direction of animation is alternate-reverse i.e. end to start and then start to end and so on.
animation.Direction = AnimationDirection.AlternateReverse;
heroVisual.StartAnimation("Offset", animation);
}
}
Remarks
Given an offset animation with an iteration count of 3 and two keyframes (0, and 1) with a value of Vector3(5,5,5) for keyframe 0 and a value of Vector3(20,20,20) for keyframe 1, the following table shows the animation behavior with different values for Direction.
| Direction | Animation Behavior |
|---|---|
| Normal | Animation will start from offset value Vector3(5,5,5) and go to Vector3(20,20,20), repeating 3 times always starting from (5,5,5). |
| Reverse | Animation will start in reverse and offset value (20,20,20) and goes to (5,5,5) repeating 3 times always starting from (20,20,20). |
| Alternate | For the first iteration the animation will start from offset value (5,5,5) and go to (20,20,20). In the second iteration animation the animation will start from offset value (20,20,20) and go to (5,5,5). In third and final iteration the animation will start from offset (5,5,5) and go to (20,20,20). |
| AlternateReverse | For the first iteration the animation will start from offset value (20,20,20) and go to (5,5,5). In the second iteration the animation will start from offset value (5,5,5) and go to (20, 20, 20). In the third and final iteration the animation will start from offset (20, 20, 20) and go to (5,5,5). |
Duration Duration Duration Duration
The duration of the animation.
public : TimeSpan Duration { get; set; }public TimeSpan Duration { get; set; }Public ReadWrite Property Duration As TimeSpan// This API is not available in Javascript.
- Value
- TimeSpan TimeSpan TimeSpan TimeSpan
The duration of the animation. Minimum allowed value is 1ms and maximum allowed value is 24 days.
IterationBehavior IterationBehavior IterationBehavior IterationBehavior
The iteration behavior for the key frame animation.
public : AnimationIterationBehavior IterationBehavior { get; set; }public AnimationIterationBehavior IterationBehavior { get; set; }Public ReadWrite Property IterationBehavior As AnimationIterationBehavior// This API is not available in Javascript.
- Value
- AnimationIterationBehavior AnimationIterationBehavior AnimationIterationBehavior AnimationIterationBehavior
The iteration behavior for the key frame animation.
IterationCount IterationCount IterationCount IterationCount
The number of times to repeat the key frame animation.
public : int IterationCount { get; set; }public int IterationCount { get; set; }Public ReadWrite Property IterationCount As int// This API is not available in Javascript.
- Value
- int int int int
The number of times to repeat the key frame animation.
KeyFrameCount KeyFrameCount KeyFrameCount KeyFrameCount
The number of key frames in the KeyFrameAnimation.
public : int KeyFrameCount { get; }public int KeyFrameCount { get; }Public ReadOnly Property KeyFrameCount As int// This API is not available in Javascript.
- Value
- int int int int
The number of key frames in the KeyFrameAnimation.
StopBehavior StopBehavior StopBehavior StopBehavior
Specifies how to set the property value when StopAnimation is called.
public : AnimationStopBehavior StopBehavior { get; set; }public AnimationStopBehavior StopBehavior { get; set; }Public ReadWrite Property StopBehavior As AnimationStopBehavior// This API is not available in Javascript.
Specifies how to set the property value when StopAnimation is called.
Methods
InsertExpressionKeyFrame(Single, String) InsertExpressionKeyFrame(Single, String) InsertExpressionKeyFrame(Single, String) InsertExpressionKeyFrame(Single, String)
Inserts an expression key frame.
public : void InsertExpressionKeyFrame(float normalizedProgressKey, PlatForm::String value)public void InsertExpressionKeyFrame(Single normalizedProgressKey, String value)Public Function InsertExpressionKeyFrame(normalizedProgressKey As Single, value As String) 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.
- value
- PlatForm::String String String String
The expression used to calculate the value of the key frame.
- See Also
InsertExpressionKeyFrame(Single, String, CompositionEasingFunction) InsertExpressionKeyFrame(Single, String, CompositionEasingFunction) InsertExpressionKeyFrame(Single, String, CompositionEasingFunction) InsertExpressionKeyFrame(Single, String, CompositionEasingFunction)
Inserts an expression keyframe.
public : void InsertExpressionKeyFrame(float normalizedProgressKey, PlatForm::String value, CompositionEasingFunction easingFunction)public void InsertExpressionKeyFrame(Single normalizedProgressKey, String value, CompositionEasingFunction easingFunction)Public Function InsertExpressionKeyFrame(normalizedProgressKey As Single, value As String, 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.
- value
- PlatForm::String String String String
The expression used to calculate the value of the key frame.
- easingFunction
- CompositionEasingFunction CompositionEasingFunction CompositionEasingFunction CompositionEasingFunction
The easing function to use when interpolating between frames.
- See Also