스토리보드 개요
이 개요에서는 Windows 애니메이션에서 전환 및 스토리보드를 사용하는 방법에 중점을 둡니다. Windows 애니메이션 구성 요소에 대한 개요는 Windows 애니메이션 개요를 참조하세요.
이 항목에는 다음과 같은 섹션이 포함되어 있습니다.
전환
전환은 특정 시간 간격에 따라 단일 애니메이션 변수가 변경되는 방식을 정의합니다. Windows 애니메이션에는 개발자가 하나 이상의 애니메이션 변수에 적용할 수 있는 일반적인 전환 라이브러리가 포함되어 있습니다. 다양한 종류의 전환에는 서로 다른 매개 변수 집합이 있으며, 여기에는 전환이 완료되었을 때의 변수 값, 전환 기간 또는 가속 또는 진동 범위와 같은 기본 수학 함수에 고유한 수량이 포함될 수 있습니다.
모든 전환은 두 개의 암시적 매개 변수인 수학적 함수의 초기 값과 초기 속도(기울기)를 공유합니다. 애플리케이션에서 명시적으로 지정할 수 있지만 일반적으로 애니메이션 관리자가 전환이 시작될 때 애니메이션 변수의 값과 속도로 설정합니다.
전환 라이브러리
현재 전환 라이브러리에서 제공하는 전환은 다음과 같습니다. 애플리케이션에 전환 라이브러리를 사용하여 지정할 수 없는 효과가 필요한 경우 개발자는 애플리케이션에 대한 사용자 지정 보간기를 구현하거나 타사에서 전환 라이브러리를 사용하여 다른 종류의 전환을 만들 수 있습니다.
| 전환 이름 | 설명 |
|---|---|
| 가속 감속 |
애니메이션 변수의 속도가 빨라진 다음 지정된 기간 동안 속도가 느려집니다. |
| constant |
애니메이션 변수는 전환 동안 초기 값으로 유지됩니다. |
| 입방형 |
애니메이션 변수는 지정된 기간 동안 지정된 최종 속도를 사용하여 초기 값에서 지정된 최종 값으로 변경됩니다. |
| 이산 |
애니메이션 변수는 지정된 지연 시간 동안 초기 값으로 유지된 다음, 즉시 지정된 최종 값으로 전환하고 지정된 보류 시간 동안 해당 값으로 유지됩니다. |
| 즉각적인 |
애니메이션 변수는 현재 값에서 지정된 최종 값으로 즉시 변경됩니다. |
| linear |
애니메이션 변수는 지정된 기간 동안 초기 값에서 지정된 최종 값으로 선형적으로 전환됩니다. |
| 속도에서 선형 |
애니메이션 변수는 초기 값에서 지정된 속도로 지정된 최종 값으로 선형으로 전환됩니다. |
| 가속에서의 포물선 |
애니메이션 변수는 초기 값에서 지정된 최종 값으로 전환되고, 지정된 최종 속도와 함께 지정된 가속으로 속도를 변경합니다. |
| 반전 |
변수는 지정된 기간 동안 방향을 변경합니다. 최종 값은 초기 값과 같고 최종 속도는 초기 속도의 음수입니다. |
| 범위에서 시누소이드 |
변수는 지정된 기간 동안 지정된 진동 기간과 함께 지정된 값 범위 내에서 진동합니다. |
| susoidal from velocity |
변수는 지정된 기간 동안 지정된 진동 기간으로 진동합니다. 진동 진폭은 변수의 초기 속도에 따라 결정됩니다. |
| 부드러운 중지 |
애니메이션 변수는 지정된 최종 값에서 최대 시간 내에 원활하게 중지됩니다. |
다음 표에는 이러한 각 전환에 대한 그림이 포함되어 있습니다.
| 그림 |
|---|
개별    에 대한   그림 |
 전환에 대한   전환 그림 |
범위 시누 그림  |
 |
사용자 지정 전환
보간기는 애니메이션 변수가 초기 값에서 최종 값으로 진행되는 동안 시간이 지남에 따라 어떻게 변하는지 결정하는 수학 함수를 정의합니다. 전환 라이브러리의 각 전환에는 시스템에서 제공하고 보간 함수를 구현하는 연결된 보간 개체가 있습니다. 애플리케이션에 전환 라이브러리를 사용하여 지정할 수 없는 효과가 필요한 경우 각 새 전환에 대해 보간 개체를 구현하여 하나 이상의 사용자 지정 전환을 구현할 수 있습니다. 보간기 개체는 애플리케이션에서 직접 사용할 수 없으며 대신 연결된 전환에 래핑되어야 합니다. 전환 팩터리는 보간기 개체에서 전환을 생성하는 데 사용됩니다. 자세한 내용은 IUIAnimationInterpolator 및 IUIAnimationTransitionFactory 를 참조하세요.
대부분의 애플리케이션에는 전환 라이브러리를 사용하여 필요한 모든 전환이 있으므로 보간기를 구현할 필요가 없습니다.
스토리보드
스토리보드는 시간이 지남에 따라 하나 이상의 애니메이션 변수에 적용되는 전환의 컬렉션입니다. 스토리보드의 전환은 서로 상대적으로 동기화된 상태를 유지하도록 보장되며 스토리보드는 하나의 단위로 예약되거나 취소됩니다. 원하는 전환을 만든 후 애플리케이션은 애니메이션 관리자를 사용하여 스토리보드를 만들고, 스토리보드에 전환을 추가하고, 스토리보드를 적절하게 구성하고, 가능한 한 빨리 재생하도록 예약합니다. 애니메이션 관리자는 스토리보드의 실제 시작 시간을 결정합니다. 현재 동일한 변수에 애니메이션 효과를 주는 다른 스토리보드와 경합이 있을 수 있기 때문입니다.
스토리보드의 전체 기간은 스토리보드 내 전환 기간에 따라 달라집니다. 전환 기간을 수정할 필요가 없습니다. 전환이 시작될 때 애니메이션 변수의 값과 속도에 따라 결정할 수 있습니다. 따라서 스토리보드의 기간은 애니메이션 효과를 주는 변수의 상태에 따라 달라질 수도 있습니다.
다음 예제에서는 애니메이션 관리자, 전환 라이브러리 및 타이머가 만들어졌다고 가정합니다. 자세한 내용은 기본 애니메이션 개체 만들기를 참조하세요. 또한 이 예제에서는 애플리케이션이 IUIAnimationManager::CreateAnimationVariable 메서드를 사용하여 세 개의 애니메이션 변수(X, Y 및 Z)를 만들고 IUIAnimationTransitionLibrary 인터페이스의 메서드 중 하나를 사용하여 5개의 전환(T1, T2, T3, T4 및 T5)을 만들었다고 가정합니다.
간단한 스토리보드 빌드
간단한 스토리보드를 빌드하려면 IUIAnimationManager::CreateStoryboard 메서드를 사용하여 새 스토리보드인 IUIAnimationTransitionLibrary::CreateLinearTransition 메서드를 사용하여 선형 전환, T1 및 IUIAnimationStoryboard::AddTransition 메서드를 만들어 T1 전환을 변수 X에 적용하고 결과 전환을 스토리보드에 추가합니다.
이 프로세스는 다음 그림과 같이 간단한 스토리보드를 생성합니다. 스토리보드에는 고정된 기간 동안 변수 X 값이 선형으로 변경되도록 하나의 전환 T1이 포함되어 있습니다.
이러한 간단한 시나리오의 경우 대체 옵션은 IUIAnimationManager::ScheduleTransition 메서드를 사용하는 것입니다.
Context-Sensitive 기간 사용
일부 전환에는 고정된 기간이 있지만 다른 전환 기간은 전환이 시작될 때 애니메이션 변수의 초기 값 또는 속도에 따라 달라집니다. 예를 들어 IUIAnimationTransitionLibrary::CreateLinearTransitionFromSpeed 메서드는 애니메이션 변수의 초기 값과 지정된 최종 값 간의 차이에 비례하는 기간으로 전환을 만듭니다. 이 그림과 나머지 그림에서는 임의 기간이 있는 이러한 전환이 물음표(?)와 함께 표시되고 실제 기간은 스토리보드가 재생되면 결정됩니다.
더 복잡한 스토리보드 빌드
스토리보드를 만들고 단일 전환 T1을 추가한 후 IUIAnimationStoryboard::AddTransition 메서드를 다시 호출하지만 T1 대신 T2를 사용하여 X 변수에 대한 두 번째 전환을 추가할 수 있습니다.
T2 전환에 컨텍스트를 구분하는 기간이 있다고 가정하면 스토리보드에는 이제 변수 X에 영향을 주는 임의의 기간의 두 개의 백 투 백 전환이 포함됩니다.
변수 Y 및 전환 T3을 사용하여 AddTransition 을 다시 호출하면 스토리보드 시작 부분에 세 번째 전환이 추가됩니다. 스토리보드가 재생되는 경우 X 및 Y의 값에 따라 T3은 T1 이후 또는 T2 이후에 끝날 수 있습니다.
키 프레임 사용
스토리보드의 시작 부분부터 오프셋에 전환을 추가하려면 먼저 키 프레임을 추가해야 합니다. 키 프레임은 시간 내에 인스턴트를 나타내며 그 자체로 스토리보드의 동작에 영향을 주지 않습니다. 모든 스토리보드에는 스토리보드의 시작을 나타내는 암시적 키프레임이 UI_ANIMATION_KEYFRAME_STORYBOARD_START. UI_ANIMATION_KEYFRAME_STORYBOARD_STARTIUIAnimationStoryboard::AddKeyframeAtOffset 메서드를 호출하여 처음부터 오프셋에 새 키 프레임을 추가할 수 있습니다.
키 프레임을 추가하는 오프셋은 항상 다른 키 프레임을 기준으로 합니다. 다음 다이어그램은 변수 Z에 적용되고, keyframe1에 정렬되고, 고정된 기간으로 생성된 keyframe1 및 전환 T4를 추가한 결과를 보여줍니다. 물론 다른 전환 기간은 아직 알려지지 않았기 때문에 T4가 마지막 전환이 아닐 수도 있습니다.
IUIAnimationStoryboard::AddKeyframeAfterTransition 메서드를 사용하여 전환 끝에 키 프레임을 배치할 수도 있습니다. 다음 다이어그램은 T1 다음에 keyframe2를 추가한 결과와 T2 이후의 keyframe3을 보여 주는 다이어그램입니다.
스토리보드가 재생될 때까지 T1 및 T2의 기간을 알 수 없으므로 keyframe2 및 keyframe3의 오프셋도 그때까지 결정되지 않습니다. 따라서 keyframe2 및 keyframe3도 keyframe1보다 일찍 발생할 수 있습니다.
IUIAnimationStoryboard::AddTransitionBetweenKeyframes 메서드를 사용하여 전환의 시작과 끝을 모두 키 프레임에 맞출 수 있습니다. 다음 다이어그램은 keyframe2와 keyframe3 사이에 변수 Y에 다섯 번째 전환 T5를 추가한 결과를 보여 주는 다이어그램입니다. 이렇게 하면 T5 기간이 변경되어 keyframe2 및 keyframe3의 상대 오프셋에 따라 더 길거나 짧아질 수 있습니다.
변수 보유
T4가 T2 및 T5 이후에 종료되는 경우 스토리보드는 변수 X 및 Y에 애니메이션 효과를 주지 않으므로 다른 스토리보드에서 애니메이션 효과를 줄 수 있습니다. 그러나 애플리케이션은 IUIAnimationStoryboard::HoldVariable 메서드를 호출하여 스토리보드가 완료될 때까지 스토리보드가 최종 값에 애니메이션 효과를 주는 변수의 일부 또는 전부를 보유하도록 요청할 수 있습니다. 다음 다이어그램은 T4가 마지막으로 완료된 경우 X 및 Z를 보유한 결과를 보여 줍니다. 스토리보드는 스토리보드가 완료될 때까지 최종 값에 X를 보유합니다. T4가 완료되면 스토리보드가 종료되므로 보류는 Z에 영향을 주지 않습니다.
이 스토리보드에서 Y를 보유하지 않더라도 다른 스토리보드에 애니메이션 효과를 주지 않는 한 T5가 완료된 후에는 값이 변경되지 않습니다. Y가 유지되지 않으므로 우선 순위에 관계없이 다른 스토리보드는 T5가 완료된 후 Y에 애니메이션 효과를 적용할 수 있습니다. 반면 X는 유지되므로 우선 순위가 낮은 스토리보드는 이 스토리보드가 완료될 때까지 X에 애니메이션 효과를 줄 수 없습니다.
이러한 모든 그림에서는 스토리보드가 재생을 시작할 때 변수에 대해 임의의 현재 값 집합을 가정했습니다. 다른 값이 발견되면 다음 그림과 같이 상황에 맞는 전환 기간이 다를 수 있습니다.
이 시나리오에서는 T5가 T3이 완료되기 전에 시작되므로 T3이 잘립니다. T4는 T2 및 T5보다 일찍 완료되므로 Z 값은 스토리보드가 끝날 때까지 유지됩니다. 일반적으로 스토리보드 재생을 시작할 때 변수의 값과 속도는 키프레임 순서 및 스토리보드의 전체 길이와 모양에 영향을 줄 수 있습니다.
스토리보드 예약
스토리보드를 예약할 때 시작 시간은 현재 일정에 있는 스토리보드의 개요와 개요에 따라 결정됩니다. 특히 스토리보드가 각 개별 변수에 애니메이션 효과를 주는 첫 번째 및 마지막 순간은 두 스토리보드가 충돌하는지 여부와 시기를 결정하지만 내부 전환 세부 정보는 중요하지 않습니다.
다음 그림에서는 3개의 변수에 애니메이션 효과를 주는 5개의 전환이 있는 스토리보드의 개요를 보여 줍니다.
Windows 애니메이션 플랫폼의 초석은 필요한 경우 다른 애니메이션이 시작되기 전에 한 애니메이션이 완료되도록 지원하는 것입니다. 이렇게 하면 많은 논리적 문제가 제거되지만 UI에 임의 대기 시간도 발생합니다. 이 문제를 해결하기 위해 애플리케이션은 IUIAnimationStoryboard::SetLongestAcceptableDelay 메서드를 사용하여 스토리보드가 시작될 수 있는 가장 긴 지연 시간을 지정할 수 있으며, 애니메이션 관리자는 이 정보를 사용하여 지정된 대기 시간 기간이 경과하기 전에 스토리보드를 예약합니다. 스토리보드가 예약되면 애니메이션 관리자는 다른 스토리보드를 먼저 취소, 잘라내기, 마무리 및/또는 압축해야 하는지 여부를 결정합니다.
애플리케이션은 스토리보드의 상태 변경될 때 호출되는 처리기를 등록할 수 있습니다. 이렇게 하면 스토리보드가 재생되기 시작하거나, 완료될 때 실행되거나, 일정에서 완전히 제거되거나, 우선 순위가 높은 스토리보드의 중단으로 인해 완료되지 않도록 애플리케이션이 응답할 수 있습니다. 스토리보드 이벤트 처리기(또는 우선 순위 비교)에 전달된 스토리보드를 식별하기 위해 애플리케이션 은 IUIAnimationStoryboard::SetTag 메서드를 사용하여 변수를 식별하는 데 사용할 수 있는 것과 유사한 태그를 스토리보드에 적용할 수 있습니다. 스토리보드 재사용과 마찬가지로 개발자는 태그를 사용하여 스토리보드를 식별할 때 주의를 기울여야 하며, 사용자 작업으로 인해 많은 스토리보드가 큐에 대기될 때 모호성이 발생하지 않도록 해야 합니다.
다음 예제에서는 이 항목의 이전 섹션에서 빌드된 스토리보드를 예약하려는 시도의 두 가지 변형을 보여 줍니다.
이 시나리오에서는 6개의 스토리보드인 A~F가 이미 W, X, Y 및 Z 변수에 애니메이션 효과를 주도록 예약되었지만 A와 B만 재생하기 시작했습니다. G라는 레이블이 지정된 새 스토리보드의 허용 가능한 지연 시간이 다음 그림에 표시된 기간으로 설정됩니다.
애플리케이션은 다음 논리를 포함하는 우선 순위 비교를 등록했습니다.
- G는 C 및 E만 취소하고 실패를 방지하기 위해서만 취소할 수 있습니다.
- G는 A, C, E 및 F만 트리밍하여 오류를 방지할 수 있습니다.
- 모든 스토리보드는 다른 스토리보드를 압축할 수 있습니다(압축은 항상 오류를 방지하기 위해 수행됨).
참고
"실패를 방지하기 위해서만" 한정자는 priorityEffect 매개 변수가 UI_ANIMATION_PRIORITY_EFFECT_FAILURE 경우에만 등록된 우선 순위 비교가 S_OK 반환한다는 것을 의미합니다. 자세한 내용은 IUIAnimationPriorityComparison::HasPriority 메서드를 참조하세요.
허용되는 가장 긴 지연이 경과하기 전에 G를 시작하려면 애니메이션 관리자가 다음을 수행해야 합니다.
- F 자르기
- E 취소
E가 취소되면 D 및 F가 발견되고 원래 윤곽선으로 되돌리기.
애니메이션 관리자는 허용 가능한 가장 긴 지연이 경과하기 전에 C를 취소하거나 트리밍할 필요가 없으므로 C와 G의 모임은 G가 시작되는 시기를 결정합니다.
G가 성공적으로 예약된 후 전환 기간을 확인할 수 있으며, 따라서 개요의 나머지 부분을 알 수 있습니다. 그러나 이후 일정에서 다른 스토리보드가 제거되면 개요가 변경될 수 있습니다.
두 번째 예로 위의 시나리오를 고려하지만 G에 대해 허용되는 지연 시간이 가장 짧습니다.
이 경우 다음 작업이 수행됩니다.
- F 자르기
- E 취소
- C 취소
또한 애니메이션 관리자는 G가 허용 가능한 가장 긴 지연 후 더 이상 시작할 수 있도록 표시된 양만큼 D를 압축해야 합니다.
상대 타이밍을 유지하기 위해 A, B 및 F도 압축됩니다.
그러나 관련 없는 변수(표시되지 않음)의 스토리보드는 압축되지 않습니다.
다시 한번 G의 윤곽선은 이제 알려져 있으며 G가 시작될 때 변수의 값이 다르기 때문에 첫 번째 시나리오의 결과와 다릅니다.
관련 항목
피드백
출시 예정: 2024년 내내 콘텐츠에 대한 피드백 메커니즘으로 GitHub 문제를 단계적으로 폐지하고 이를 새로운 피드백 시스템으로 바꿀 예정입니다. 자세한 내용은 다음을 참조하세요. https://aka.ms/ContentUserFeedback
다음에 대한 사용자 의견 제출 및 보기