Key​Frame​Animation Key​Frame​Animation Key​Frame​Animation 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
Inheritance
Attributes
Windows 10 requirements
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

The delay behavior of the key frame animation.

public : AnimationDelayBehavior DelayBehavior { get; set; }public AnimationDelayBehavior DelayBehavior { get; set; }Public ReadWrite Property DelayBehavior As AnimationDelayBehavior
Value
AnimationDelayBehavior AnimationDelayBehavior AnimationDelayBehavior

The delay behavior of the key frame animation.

Attributes
Additional features and requirements
Device family
Windows 10 Creators Update (introduced v10.0.15063.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v4)

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
Value
TimeSpan TimeSpan TimeSpan

Delay before the animation starts after CompositionObject::StartAnimation is called.

Attributes

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
Value
AnimationDirection AnimationDirection AnimationDirection

The direction the animation is playing.

Attributes
Additional features and requirements
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.

DirectionAnimation Behavior
NormalAnimation 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).
ReverseAnimation 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).
AlternateFor 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).
AlternateReverseFor 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

The duration of the animation.

public : TimeSpan Duration { get; set; }public TimeSpan Duration { get; set; }Public ReadWrite Property Duration As TimeSpan
Value
TimeSpan TimeSpan TimeSpan

The duration of the animation. Minimum allowed value is 1ms and maximum allowed value is 24 days.

Attributes

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
Value
AnimationIterationBehavior AnimationIterationBehavior AnimationIterationBehavior

The iteration behavior for the key frame animation.

Attributes

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
Value
int int int

The number of times to repeat the key frame animation.

Attributes

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
Value
int int int

The number of key frames in the KeyFrameAnimation.

Attributes

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
Value
AnimationStopBehavior AnimationStopBehavior AnimationStopBehavior

Specifies how to set the property value when StopAnimation is called.

Attributes

Methods

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
Parameters
normalizedProgressKey
float 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

The expression used to calculate the value of the key frame.

Attributes
See Also

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
Parameters
normalizedProgressKey
float 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

The expression used to calculate the value of the key frame.

easingFunction
CompositionEasingFunction CompositionEasingFunction CompositionEasingFunction

The easing function to use when interpolating between frames.

Attributes
See Also

See Also