KeyFrameAnimation.Direction 속성

정의

네임스페이스:

Windows.UI.Composition

애니메이션이 재생되는 방향입니다.

Direction 속성을 사용하면 애니메이션에 IterationCount가 1보다 큰 경우 시작과 끝 또는 끝을 시작하거나 번갈아 시작하거나 시작할 수 있도록 애니메이션을 처음부터 끝까지 구동할 수 있습니다. 이렇게 하면 애니메이션 정의를 쉽게 사용자 지정할 수 있습니다.

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

속성 값

AnimationDirection

애니메이션이 재생되는 방향입니다.

Windows 요구 사항

디바이스 패밀리	Windows 10 Anniversary Edition (10.0.14393.0에서 도입되었습니다.)
API contract	Windows.Foundation.UniversalApiContract (v3.0에서 도입되었습니다.)

예제

AnimationDirection은 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이 역방향입니다.

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은 대체입니다.

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이 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); 
  } 
} 

설명

키프레임 0의 경우 Vector3(5,5,5)의 값과 키 프레임 1의 경우 Vector3(20,20,20)의 값을 가진 3개 및 2개의 키프레임(0 및 1)의 오프셋 애니메이션이 있는 경우 다음 표에서는 방향 값이 다른 애니메이션 동작을 보여 줍니다.

Direction	애니메이션 동작
보통	애니메이션은 오프셋 값 Vector3(5,5,5)에서 시작하여 Vector3(20,20,20)로 이동하여 항상 (5,5,5)부터 3회 반복합니다.
Reverse	애니메이션은 역방향 및 오프셋 값(20,20,20)에서 시작하여 (5,5,5)로 이동하여 항상 3회 반복됩니다(20,20,20).
대체	첫 번째 반복의 경우 애니메이션은 오프셋 값(5,5,5)에서 시작하여 (20,20,20)로 이동합니다. 두 번째 반복 애니메이션에서 애니메이션은 오프셋 값(20,20,20)에서 시작하여 (5,5,5)로 이동합니다. 세 번째이자 마지막 반복에서는 애니메이션이 오프셋(5,5,5)에서 시작하여 (20,20,20)로 이동합니다.
AlternateReverse	첫 번째 반복의 경우 애니메이션은 오프셋 값(20,20,20)에서 시작하여 (5,5,5)로 이동합니다. 두 번째 반복에서 애니메이션은 오프셋 값(5,5,5)에서 시작하여 (20, 20, 20)로 이동합니다. 세 번째 및 마지막 반복에서 애니메이션은 오프셋(20, 20, 20)에서 시작하여 (5,5,5)로 이동합니다.