스토리보드 개요
이 개요는 Windows 애니메이션에서 전환 및 스토리보드를 사용하는 방법에 중점을 둡니다. Windows 애니메이션의 구성 요소에 대한 개요는 Windows 애니메이션 개요를 참조 하세요.
이 항목에는 다음과 같은 섹션이 포함되어 있습니다.
전환
전환은 특정 시간 간격 동안 단일 애니메이션 변수가 변경되는 방식을 정의합니다. Windows 애니메이션에는 개발자가 하나 이상의 애니메이션 변수에 적용할 수 있는 일반적인 전환 라이브러리가 포함되어 있습니다. 다양한 종류의 전환에는 서로 다른 매개 변수 집합이 있으며, 여기에는 전환이 완료된 경우 변수 값, 전환 기간 또는 기본 수학 함수에 고유한 수량(예: 가속 또는 진동 범위)이 포함될 수 있습니다.
모든 전환은 수학 함수의 초기 값과 초기 속도(기울기)라는 두 개의 암시적 매개 변수를 공유합니다. 애플리케이션에서 명시적으로 지정할 수 있지만 일반적으로 애니메이션 관리자가 전환이 시작될 때 애니메이션 변수의 값과 속도로 설정합니다.
전환 라이브러리
현재 전환 라이브러리에서 제공하는 전환은 다음과 같습니다. 애플리케이션에 전환 라이브러리를 사용하여 지정할 수 없는 효과가 필요한 경우 개발자는 애플리케이션에 대한 사용자 지정 보간기를 구현하거나 타사에서 전환 라이브러리를 사용하여 다른 종류의 전환을 만들 수 있습니다.
| 전환 이름 | 설명 |
|---|---|
| 가속 감속 |
애니메이션 변수의 속도가 빨라지고 지정된 기간 동안 속도가 느려집니다. |
| constant |
애니메이션 변수는 전환 동안 초기 값으로 유지됩니다. |
| 입방 |
애니메이션 변수는 지정된 기간 동안 지정된 최종 속도로 초기 값에서 지정된 최종 값으로 변경됩니다. |
| 이산 |
애니메이션 변수는 지정된 지연 시간 동안 초기 값으로 유지된 다음, 즉시 지정된 최종 값으로 전환되고 지정된 보류 시간 동안 해당 값으로 유지됩니다. |
| 즉각적인 |
애니메이션 변수는 현재 값에서 지정된 최종 값으로 즉시 변경됩니다. |
| linear |
애니메이션 변수는 지정된 기간 동안 초기 값에서 지정된 최종 값으로 선형으로 전환됩니다. |
| 속도에서 선형 |
애니메이션 변수는 초기 값에서 지정된 속도로 지정된 최종 값으로 선형으로 전환됩니다. |
| 가속의 포물선 |
애니메이션 변수는 초기 값에서 지정된 최종 값으로 전환되고, 지정된 최종 속도로 지정된 가속으로 속도를 변경합니다. |
| 반전 |
변수는 지정된 기간 동안 방향을 변경합니다. 최종 값은 초기 값과 같으며 최종 속도는 초기 속도의 음수가 됩니다. |
| 범위에서 시누소이드 |
변수는 지정된 기간 동안 지정된 진동 기간과 함께 지정된 값 범위 내에서 진동합니다. |
| 속도에서 부비동성 |
변수는 지정된 기간 동안 지정된 진동 기간으로 진동합니다. 진동 진폭은 변수의 초기 속도에 따라 결정됩니다. |
| 부드러운 중지 |
애니메이션 변수는 지정된 최종 값에서 최대 시간 내에 원활하게 중지됩니다. |
다음 표에는 이러한 각 전환에 대한 그림이 포함되어 있습니다.
| 그림 |
|---|
     |
   |
   |
 |
사용자 지정 전환
보간기는 애니메이션 변수가 초기 값에서 최종 값으로 진행되는 동안 시간이 지남에 따라 변경되는 방식을 결정하는 수학 함수를 정의합니다. 전환 라이브러리의 각 전환에는 시스템에서 제공하고 보간기 함수를 구현하는 연결된 보간기 개체가 있습니다. 애플리케이션에 전환 라이브러리를 사용하여 지정할 수 없는 효과가 필요한 경우 각 새 전환에 대해 보간기 개체를 구현하여 하나 이상의 사용자 지정 전환을 구현할 수 있습니다. 보간기 개체는 애플리케이션에서 직접 사용할 수 없으며 대신 연결된 전환에 래핑되어야 합니다. 전환 팩터리는 보간기 개체에서 전환을 생성하는 데 사용됩니다. 자세한 내용은 IUIAnimationInterpolator 및 IUIAnimationTransitionFactory를 참조하세요.
대부분의 애플리케이션에는 전환 라이브러리를 사용하여 필요한 모든 전환이 있으므로 보간기를 구현할 필요가 없습니다.
스토리보드
스토리보드는 시간이 지남에 따라 하나 이상의 애니메이션 변수에 적용되는 전환의 컬렉션입니다. 스토리보드의 전환은 서로에 대해 동기화된 상태로 유지되고 스토리보드는 하나의 단위로 예약되거나 취소됩니다. 원하는 전환을 만든 후 애플리케이션은 애니메이션 관리자를 사용하여 스토리보드를 만들고, 스토리보드에 전환을 추가하고, 스토리보드를 적절하게 구성하고, 가능한 한 빨리 재생되도록 예약합니다. 애니메이션 관리자는 현재 동일한 변수에 애니메이션 효과를 주는 다른 스토리보드와의 경합이 있을 수 있으므로 스토리보드의 실제 시작 시간을 결정합니다.
스토리보드의 전체 기간은 스토리보드 내 전환 기간에 따라 달라집니다. 전환 기간을 수정할 필요가 없습니다. 전환이 시작될 때 애니메이션된 변수의 값과 속도에 따라 확인할 수 있습니다. 따라서 스토리보드의 기간은 애니메이션 효과를 주는 변수의 상태에 따라 달라질 수도 있습니다.
다음 예제에서는 애니메이션 관리자, 전환 라이브러리 및 타이머가 생성되었다고 가정합니다. 자세한 내용은 기본 애니메이션 개체 만들기를 참조 하세요. 또한 이 예제에서는 애플리케이션이 IUIAnimationManager::CreateAnimationVariable 메서드를 사용하여 3개의 애니메이션 변수(X, Y 및 Z)를 만들고 IUIAnimationTransitionLibrary 인터페이스의 메서드 중 하나를 사용하여 5개의 전환(T1, T2, T3, T4 및 T5)을 만들었다고 가정합니다.
간단한 스토리보드 빌드
간단한 스토리보드를 빌드하려면 IUIAnimationManager::CreateStoryboard 메서드를 사용하여 새 스토리보드, IUIAnimationTransitionLibrary::CreateLinearTransition 메서드를 사용하여 선형 전환, T1 및 IUIAnimationStoryboard::AddTransition 메서드를 만들어 T1 전환을 변수 X에 적용하고 결과 전환을 스토리보드에 추가합니다.
이 프로세스는 다음 그림과 같이 간단한 스토리보드를 생성합니다. 스토리보드에는 고정된 기간 동안 변수 X의 값이 선형적으로 변경되도록 T1이라는 하나의 전환이 포함되어 있습니다.
이러한 간단한 시나리오의 경우 대체 옵션은 IUIAnimationManager::ScheduleTransition 메서드를 사용하는 것입니다.
상황에 맞는 기간 사용
일부 전환에는 고정된 기간이 있지만 다른 전환 기간은 전환이 시작될 때 애니메이션된 변수의 초기 값 또는 속도에 따라 달라집니다. 예를 들어 IUIAnimationTransitionLibrary::CreateLinearTransitionFromSpeed 메서드는 애니메이션 변수의 초기 값과 지정된 최종 값 간의 차이에 비례하는 기간으로 전환을 만듭니다. 이 그림과 나머지 그림에서는 임의 기간이 있는 이러한 전환에 물음표(?)가 표시되고 실제 기간은 스토리보드가 재생되면 결정됩니다.
더 복잡한 스토리보드 빌드
스토리보드를 만들고 단일 전환 T1을 추가한 후에는 T1 대신 T2를 사용하여 IUIAnimationStoryboard::AddTransition 메서드를 다시 호출하여 X 변수에 대한 두 번째 전환을 추가할 수 있습니다.
T2 전환에 컨텍스트를 구분하는 기간이 있다고 가정하면 스토리보드에는 이제 변수 X에 영향을 주는 임의의 기간의 두 개의 백 투백 전환이 포함됩니다.
변수 Y 및 전환 T3을 사용하여 AddTransition을 다시 호출하면 스토리보드 시작 부분에 세 번째 전환이 추가됩니다. 스토리보드가 재생되는 경우 X 및 Y의 값에 따라 T3은 T1 이후 또는 T2 이후에도 종료할 수 있습니다.
키 프레임 사용
스토리보드의 시작 부분부터 오프셋에 전환을 추가하려면 먼저 키 프레임을 추가해야 합니다. 키 프레임은 시간에 따라 인스턴트를 나타내며 그 자체로는 스토리보드의 동작에 영향을 주지 않습니다. 모든 스토리보드에는 스토리보드의 시작을 나타내는 암시적 키 프레임이 UI_ANIMATION_KEYFRAME_STORYBOARD_START. UI_ANIMATION_KEYFRAME_STORYBOARD_START 사용하여 IUIAnimationStoryboard::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 값은 스토리보드가 끝날 때까지 유지됩니다. 일반적으로 스토리보드 재생을 시작할 때 변수의 값과 속도는 키 프레임 순서와 스토리보드의 전체 길이 및 모양에 영향을 줄 수 있습니다.
Storyboard 예약
스토리보드를 예약할 때 시작 시간은 개요 및 현재 일정에 있는 스토리보드의 개요에 따라 결정됩니다. 특히 스토리보드가 각 개별 변수에 애니메이션 효과를 주는 첫 번째 및 마지막 순간은 두 스토리보드가 충돌하는지 여부와 시기를 결정하지만 내부 전환 세부 정보는 중요하지 않습니다.
다음 그림에서는 세 개의 변수에 애니메이션 효과를 주는 5개의 전환이 있는 스토리보드의 개요를 보여 줍니다.
Windows 애니메이션 플랫폼의 초석은 필요한 경우 다른 애니메이션이 시작되기 전에 하나의 애니메이션을 완료하도록 지원하는 것입니다. 이렇게 하면 많은 논리적 문제가 제거되지만 UI에 임의 대기 시간도 발생합니다. 이 문제를 해결하기 위해 애플리케이션은 IUIAnimationStoryboard::SetLongestAcceptableDelay 메서드를 사용하여 스토리보드를 시작할 수 있는 가장 긴 지연 시간을 지정할 수 있으며, 애니메이션 관리자는 이 정보를 사용하여 지정된 대기 시간이 경과하기 전에 스토리보드를 예약합니다. 스토리보드가 예약되면 애니메이션 관리자는 다른 스토리보드를 먼저 취소, 잘라내기, 종료 및/또는 압축해야 하는지 여부를 결정합니다.
애플리케이션은 스토리보드의 상태가 변경될 때 호출되는 처리기를 등록할 수 있습니다. 이렇게 하면 스토리보드가 재생되기 시작하거나, 완료될 때 실행되거나, 일정에서 완전히 제거되거나, 우선 순위가 높은 스토리보드의 중단으로 인해 완료되지 않도록 애플리케이션이 응답할 수 있습니다. 스토리보드 이벤트 처리기(또는 우선 순위 비교)에 전달된 스토리보드를 식별하기 위해 애플리케이션은 IUIAnimationStoryboard::SetTag 메서드를 사용하여 변수를 식별하는 데 사용할 수 있는 것과 유사하게 스토리보드에 태그를 적용할 수 있습니다. 스토리보드 재사용과 마찬가지로 개발자는 태그를 사용하여 스토리보드를 식별할 때 주의를 기울여야 하며, 사용자 작업으로 인해 많은 스토리보드가 큐에 대기될 때 모호성이 발생하지 않도록 해야 합니다.
다음 예제에서는 이 항목의 이전 섹션에서 빌드된 스토리보드를 예약하려는 시도의 두 가지 변형을 보여 줍니다.
이 시나리오에서는 A부터 F까지 6개의 스토리보드가 이미 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의 윤곽선이 알려지고 첫 번째 시나리오의 결과와 다릅니다.