KeyFrameAnimation.Direction Property

Reference

Definition

Namespace:: Microsoft.UI.Composition

Important

Some information relates to prerelease product that may be substantially modified before it’s released. Microsoft makes no warranties, express or implied, with respect to the information provided here.

Edit

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:
 property AnimationDirection Direction { AnimationDirection get(); void set(AnimationDirection value); };

AnimationDirection Direction();

void Direction(AnimationDirection value);

public AnimationDirection Direction { get; set; }

var animationDirection = keyFrameAnimation.direction;
keyFrameAnimation.direction = animationDirection;

Public Property Direction As AnimationDirection

Property Value

AnimationDirection

The direction the animation is playing.

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).

Applies to

Share via