구성 요소 또는 전체 사용자 환경이 변경되면 최종 사용자는 시간이 지남에 따라 또는 즉시 두 가지 방법으로 이를 관찰하는 경우가 많습니다. Windows 플랫폼에서 전자는 후자보다 선호됩니다. 즉, 즉시 변경되는 사용자 환경은 사용자가 발생한 일을 따를 수 없기 때문에 종종 혼란스럽고 놀라움을 선사합니다. 그런 다음 최종 사용자는 환경을 혼란스럽고 부자연스럽다고 인식합니다.
대신 시간이 지남에 따라 UI를 변경하여 최종 사용자를 안내하거나 환경 변경 내용을 알릴 수 있습니다. Windows 플랫폼에서는 KeyFrameAnimations라고도 하는 시간 기반 애니메이션을 사용하여 이 작업을 수행합니다. KeyFrameAnimations를 사용하면 시간이 지남에 따라 UI를 변경하고 애니메이션이 시작되는 방법과 시기 및 종료 상태에 도달하는 방법을 포함하여 애니메이션의 각 측면을 제어할 수 있습니다. 예를 들어, 개체를 300밀리초에 걸쳐 새로운 위치로 이동하는 애니메이션을 적용하는 것이 즉시 "텔레포트"하는 것보다 더 즐겁습니다. 즉각적인 변경 대신 애니메이션을 사용하는 경우 순 결과는 더 즐겁고 매력적인 환경입니다.
시간 기반 애니메이션 유형
Windows에서 멋진 사용자 환경을 빌드하는 데 사용할 수 있는 시간 기반 애니메이션에는 두 가지 범주가 있습니다.
명시적 애니메이션 - 이름이 의미하듯이, 명시적으로 애니메이션을 시작함으로써 업데이트합니다. 암시적 애니메이션 – 이러한 애니메이션은 조건이 충족될 때 시스템에 의해 자동으로 시작됩니다.
이 문서에서는 KeyFrameAnimations를 사용하여 명시적 시간 기반 애니메이션을 만들고 사용하는 방법을 설명합니다.
명시적 및 암시적 시간 기반 애니메이션의 경우 애니메이션할 수 있는 CompositionObjects의 다양한 속성 형식에 해당하는 다양한 형식이 있습니다.
- 색상 키프레임 애니메이션
- 쿼터니언 키 프레임 애니메이션 (QuaternionKeyFrameAnimation)
- 스칼라 키프레임 애니메이션
- Vector2KeyFrameAnimation (벡터2키프레임애니메이션)
- 벡터3키프레임애니메이션
- 벡터4키프레임애니메이션
KeyFrameAnimations를 사용하여 시간 기반 애니메이션 만들기
KeyFrameAnimations를 사용하여 명시적 시간 기반 애니메이션을 만드는 방법을 설명하기 전에 몇 가지 개념을 살펴보겠습니다.
- KeyFrames – 애니메이션이 따라가는 각각의 "스냅샷"입니다.
- 키 및 값 쌍으로 정의됩니다. 키는 애니메이션 수명에서 이 "스냅샷"이 발생하는 시점을 즉, 0과 1 사이의 진행률로 나타냅니다. 다른 매개 변수는 현재 속성 값을 나타냅니다.
- KeyFrameAnimation 속성 – UI의 요구 사항에 맞게 적용할 수 있는 사용자 지정 옵션입니다.
- DelayTime – StartAnimation이 호출된 후 애니메이션이 시작되기 전의 시간입니다.
- 기간 – 애니메이션의 기간입니다.
- IterationBehavior – 애니메이션의 반복 횟수 또는 무한 반복 동작.
- IterationCount – 키 프레임 애니메이션이 반복되는 한정된 횟수입니다.
- 키 프레임 수 – 특정 키 프레임 애니메이션의 키 프레임 수를 읽습니다.
- StopBehavior – StopAnimation을 호출할 때 애니메이션 속성 값의 동작을 지정합니다.
- 방향 – 재생을 위한 애니메이션의 방향을 지정합니다.
- 애니메이션 그룹 – 동시에 여러 애니메이션을 시작합니다.
- 여러 속성에 동시에 애니메이션 효과를 주려는 경우에 자주 사용됩니다.
자세한 내용은 CompositionAnimationGroup을 참조하십시오.
이러한 개념을 염두에 두고 KeyFrameAnimation을 생성하기 위한 일반적인 수식을 살펴보겠습니다.
- 애니메이션을 적용해야 하는 CompositionObject 및 해당 속성을 식별합니다.
- 애니메이션 효과를 줄 속성 형식과 일치하는 작성자의 KeyFrameAnimation 형식 템플릿을 만듭니다.
- 애니메이션 템플릿을 사용하여 KeyFrames를 추가하고 애니메이션의 속성을 정의하기 시작합니다.
- 하나 이상의 KeyFrame이 필요합니다(100% 또는 1f 키프레임).
- 기간을 정의하는 것이 좋습니다.
- 이 애니메이션을 실행할 준비가 되면 CompositionObject에서 StartAnimation(...)을 호출하여 애니메이션 효과를 주려는 속성을 대상으로 합니다. 구체적으로 말씀드리면:
visual.StartAnimation("targetProperty", CompositionAnimation animation);visual.StartAnimationGroup(AnimationGroup animationGroup);
- 실행 중인 애니메이션이 있고 애니메이션 또는 애니메이션 그룹을 중지하려는 경우 다음 API를 사용할 수 있습니다.
visual.StopAnimation("targetProperty");visual.StopAnimationGroup(AnimationGroup AnimationGroup);
이 수식의 작동을 확인하는 예제를 살펴보겠습니다.
예시
이 예제에서는 시각적 개체의 오프셋을 <0,0,0>에서 <200,0,0>으로 1초 동안에 걸쳐 애니메이션 시키고자 합니다. 또한 이러한 위치 간에 시각적 효과를 10번 애니메이션으로 보여주고 싶습니다.
먼저 애니메이션 효과를 주려는 CompositionObject 및 속성을 식별합니다. 이 경우, 빨간 사각형은 'redVisual'이라는 컴포지션 비주얼로 표현됩니다. 이 개체에서 애니메이션을 시작합니다.
다음으로 Offset 속성에 애니메이션 효과를 주려면 Vector3KeyFrameAnimation(Offset은 Vector3 형식)을 만들어야 합니다. KeyFrameAnimation에 대응하는 KeyFrames도 정의합니다.
Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));
그런 다음, KeyFrameAnimation의 속성을 정의하여 두 위치(현재 및 <200,0,0>) 간에 애니메이션 효과를 10회 적용하는 동작과 함께 지속 시간을 설명합니다.
animation.Duration = TimeSpan.FromSeconds(2);
animation.Direction = Windows.UI.Composition.AnimationDirection.Alternate;
// Run animation for 10 times
animation.IterationCount = 10;
마지막으로 애니메이션을 실행하려면 CompositionObject의 속성에서 애니메이션을 시작해야 합니다.
redVisual.StartAnimation("Offset", animation);
전체 코드는 다음과 같습니다.
private void AnimateSquare(Compositor compositor, SpriteVisual redVisual)
{
Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));
animation.Duration = TimeSpan.FromSeconds(2);
animation.Direction = Windows.UI.Composition.AnimationDirection.Alternate;
// Run animation for 10 times
animation.IterationCount = 10;
redVisual.StartAnimation("Offset", animation);
}