다음을 통해 공유

Storyboard 만들기 및 전환 추가

  • 아티클

애니메이션을 만들려면 애플리케이션이 스토리보드를 구성해야 합니다.

개요

스토리보드를 생성하기 위한 일반적인 단계는 다음과 같습니다.

  1. 스토리보드 만들기
  2. 하나 이상의 전환 만들기
  3. 애니메이션 효과를 제공하는 변수를 지정하여 스토리보드에 전환을 추가합니다.

애니메이션 관리자를 사용하여 빈 스토리보드를 만들 수 있습니다. 애플리케이션은 전환으로 각 스토리보드를 채워야 합니다. 각 전환은 지정된 시간 간격 동안 단일 애니메이션 변수가 변경되는 방식을 지정합니다. Windows 애니메이션에 포함된 전환 라이브러리 구성 요소를 사용하여 전환을 만들 수 있습니다. 또는 애플리케이션이 자체 사용자 지정 전환을 만들거나 타사에서 전환 라이브러리를 사용할 수 있습니다. 애플리케이션이 스토리보드에 전환을 추가하는 경우 전환에 애니메이션 효과를 줄 애니메이션 변수를 지정합니다.

스토리보드에는 하나 이상의 애니메이션 변수에 대한 전환이 포함될 수 있습니다. 더 복잡한 스토리보드는 키 프레임을 사용하여 전환의 시작 또는 끝을 동기화하거나 반복해야 하는 스토리보드의 일부를 지정할 수 있습니다(고정된 횟수 또는 무기한).

코드 예

다음 예제 코드는 Windows 애니메이션 샘플 타이머 기반 애니메이션의 MainWindow.cpp에서 가져옵니다. CMainWindow::ChangeColor 메서드를 참조하세요. 이 예제에서는 IUIAnimationManager::CreateStoryboard 메서드를 사용하여 스토리보드(1단계)를 만들고, IUIAnimationTransitionLibrary::CreateAccelerateDecelerateTransition 메서드를 사용하여 전환(2단계)을 만들고, IUIAnimationStoryboard::AddTransition 메서드를 사용하여 스토리보드(3단계)에 전환을 추가합니다.

const UI_ANIMATION_SECONDS DURATION = 0.5;
const DOUBLE ACCELERATION_RATIO = 0.5;
const DOUBLE DECELERATION_RATIO = 0.5;

// Create a storyboard

IUIAnimationStoryboard *pStoryboard = NULL;
HRESULT hr = m_pAnimationManager->CreateStoryboard(
    &pStoryboard
    );
if (SUCCEEDED(hr))
{
    // Create transitions for the RGB animation variables

    IUIAnimationTransition *pTransitionRed;
    hr = m_pTransitionLibrary->CreateAccelerateDecelerateTransition(
        DURATION,
        red,
        ACCELERATION_RATIO,
        DECELERATION_RATIO,
        &pTransitionRed
        );
    if (SUCCEEDED(hr))
    {
        IUIAnimationTransition *pTransitionGreen;
        hr = m_pTransitionLibrary->CreateAccelerateDecelerateTransition(
            DURATION,
            green,
            ACCELERATION_RATIO,
            DECELERATION_RATIO,
            &pTransitionGreen
            );
        if (SUCCEEDED(hr))
        {
            IUIAnimationTransition *pTransitionBlue;
            hr = m_pTransitionLibrary->CreateAccelerateDecelerateTransition(
                DURATION,
                blue,
                ACCELERATION_RATIO,
                DECELERATION_RATIO,
                &pTransitionBlue
                );
            if (SUCCEEDED(hr))
            {
                // Add transitions to the storyboard

                hr = pStoryboard->AddTransition(
                    m_pAnimationVariableRed,
                    pTransitionRed
                    );
                if (SUCCEEDED(hr))
                {
                    hr = pStoryboard->AddTransition(
                        m_pAnimationVariableGreen,
                        pTransitionGreen
                        );
                    if (SUCCEEDED(hr))
                    {
                        hr = pStoryboard->AddTransition(
                            m_pAnimationVariableBlue,
                            pTransitionBlue
                            );
                        if (SUCCEEDED(hr))
                        {
                            // Get the current time and schedule the storyboard for play

                            ...

}

이전 단계

이 단계를 시작하기 전에 애니메이션 변수 값을 읽어보세요. 단계를 완료해야 합니다.

다음 단계

이 단계를 완료한 후 다음 단계는 스토리보드 예약입니다.

IUIAnimationManager::CreateStoryboard

IUIAnimationStoryboard::AddTransition

IUIAnimationTransitionLibrary::CreateAccelerateDecelerateTransition

스토리보드 개요