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, IKeyFrameAnimation3
public class KeyFrameAnimation : CompositionAnimation, IKeyFrameAnimation, IKeyFrameAnimation2, IKeyFrameAnimation3
Public Class KeyFrameAnimation Inherits CompositionAnimation Implements IKeyFrameAnimation, IKeyFrameAnimation2, IKeyFrameAnimation3
// This class does not provide a public constructor.
Inheritance
Attributes
Windows 10 requirements
Device family
Windows 10 (introduced v10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v1)

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
var animationDelayBehavior = keyFrameAnimation.delayBehavior;
keyFrameAnimation.delayBehavior = animationDelayBehavior;
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 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
var timeSpan = keyFrameAnimation.delayTime;
keyFrameAnimation.delayTime = timeSpan;
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
var animationDirection = keyFrameAnimation.direction;
keyFrameAnimation.direction = animationDirection;
Value
AnimationDirection AnimationDirection AnimationDirection AnimationDirection

The direction the animation is playing.

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 Duration

The duration of the animation.

public : TimeSpan Duration { get; set; }
public TimeSpan Duration { get; set; }
Public ReadWrite Property Duration As TimeSpan
var timeSpan = keyFrameAnimation.duration;
keyFrameAnimation.duration = timeSpan;
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
var animationIterationBehavior = keyFrameAnimation.iterationBehavior;
keyFrameAnimation.iterationBehavior = animationIterationBehavior;

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
var int = keyFrameAnimation.iterationCount;
keyFrameAnimation.iterationCount = int;
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
var int = keyFrameAnimation.keyFrameCount;
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
var animationStopBehavior = keyFrameAnimation.stopBehavior;
keyFrameAnimation.stopBehavior = animationStopBehavior;
Value
AnimationStopBehavior AnimationStopBehavior AnimationStopBehavior AnimationStopBehavior

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

Comment Comment Comment Comment

Inherited from CompositionObject

Compositor Compositor Compositor Compositor

Inherited from CompositionObject

Dispatcher Dispatcher Dispatcher Dispatcher

Inherited from CompositionObject

DispatcherQueue DispatcherQueue DispatcherQueue DispatcherQueue

Inherited from CompositionObject

ImplicitAnimations ImplicitAnimations ImplicitAnimations ImplicitAnimations

Inherited from CompositionObject

InitialValueExpressions InitialValueExpressions InitialValueExpressions InitialValueExpressions

Inherited from CompositionAnimation

Properties Properties Properties Properties

Inherited from CompositionObject

Target Target Target Target

Inherited from CompositionAnimation

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
keyFrameAnimation.insertExpressionKeyFrame(normalizedProgressKey, value);
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
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
keyFrameAnimation.insertExpressionKeyFrame(normalizedProgressKey, value, easingFunction);
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
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

ClearAllParameters ClearAllParameters ClearAllParameters ClearAllParameters

Inherited from CompositionAnimation

ClearParameter(String) ClearParameter(String) ClearParameter(String) ClearParameter(String)

Inherited from CompositionAnimation

Close Close Close Close

Inherited from CompositionObject

SetBooleanParameter(String,Boolean) SetBooleanParameter(String,Boolean) SetBooleanParameter(String,Boolean) SetBooleanParameter(String,Boolean)

Inherited from CompositionAnimation

SetColorParameter(String,Color) SetColorParameter(String,Color) SetColorParameter(String,Color) SetColorParameter(String,Color)

Inherited from CompositionAnimation

SetMatrix3x2Parameter(String,Matrix3x2) SetMatrix3x2Parameter(String,Matrix3x2) SetMatrix3x2Parameter(String,Matrix3x2) SetMatrix3x2Parameter(String,Matrix3x2)

Inherited from CompositionAnimation

SetMatrix4x4Parameter(String,Matrix4x4) SetMatrix4x4Parameter(String,Matrix4x4) SetMatrix4x4Parameter(String,Matrix4x4) SetMatrix4x4Parameter(String,Matrix4x4)

Inherited from CompositionAnimation

SetQuaternionParameter(String,Quaternion) SetQuaternionParameter(String,Quaternion) SetQuaternionParameter(String,Quaternion) SetQuaternionParameter(String,Quaternion)

Inherited from CompositionAnimation

SetReferenceParameter(String,CompositionObject) SetReferenceParameter(String,CompositionObject) SetReferenceParameter(String,CompositionObject) SetReferenceParameter(String,CompositionObject)

Inherited from CompositionAnimation

SetScalarParameter(String,Single) SetScalarParameter(String,Single) SetScalarParameter(String,Single) SetScalarParameter(String,Single)

Inherited from CompositionAnimation

SetVector2Parameter(String,Vector2) SetVector2Parameter(String,Vector2) SetVector2Parameter(String,Vector2) SetVector2Parameter(String,Vector2)

Inherited from CompositionAnimation

SetVector3Parameter(String,Vector3) SetVector3Parameter(String,Vector3) SetVector3Parameter(String,Vector3) SetVector3Parameter(String,Vector3)

Inherited from CompositionAnimation

SetVector4Parameter(String,Vector4) SetVector4Parameter(String,Vector4) SetVector4Parameter(String,Vector4) SetVector4Parameter(String,Vector4)

Inherited from CompositionAnimation

StartAnimation(String,CompositionAnimation) StartAnimation(String,CompositionAnimation) StartAnimation(String,CompositionAnimation) StartAnimation(String,CompositionAnimation)

Inherited from CompositionObject

StartAnimationGroup(ICompositionAnimationBase) StartAnimationGroup(ICompositionAnimationBase) StartAnimationGroup(ICompositionAnimationBase) StartAnimationGroup(ICompositionAnimationBase)

Inherited from CompositionObject

StopAnimation(String) StopAnimation(String) StopAnimation(String) StopAnimation(String)

Inherited from CompositionObject

StopAnimationGroup(ICompositionAnimationBase) StopAnimationGroup(ICompositionAnimationBase) StopAnimationGroup(ICompositionAnimationBase) StopAnimationGroup(ICompositionAnimationBase)

Inherited from CompositionObject

See Also