Compartilhar via

Criar um Storyboard e adicionar transições

  • Artigo

Para criar uma animação, um aplicativo deve construir um storyboard.

Visão geral

As etapas gerais para construir um storyboard são as seguintes:

  1. Criar um storyboard
  2. Criar uma ou mais transições
  3. Adicione as transições para o storyboard, especificando quais variáveis elas animam

Um storyboard vazio pode ser criado usando o gerenciador de animação. O aplicativo deve preencher cada storyboard com transições. Cada transição especifica como uma única variável de animação muda em um determinado intervalo de tempo. As transições podem ser criadas usando o componente de biblioteca de transição incluído na Animação do Windows. Como alternativa, um aplicativo pode criar suas próprias transições personalizadas ou usar uma biblioteca de transição de terceiros. Quando o aplicativo adiciona uma transição a um storyboard, ele especifica qual variável de animação a transição animará.

Um storyboard pode incluir transições em uma ou mais variáveis de animação. Storyboards mais complexos podem usar quadros-chave para sincronizar os inícios ou términos de transições ou para especificar partes do storyboard que devem ser repetidas (um número fixo de vezes ou indefinidamente).

Código de exemplo

O código de exemplo a seguir é obtido de MainWindow.cpp na animação controlada por temporizador de exemplo de animação do Windows; consulte o método CMainWindow::ChangeColor. Este exemplo cria o storyboard (etapa 1) usando o método IUIAnimationManager::CreateStoryboard , cria as transições (etapa 2) usando o método IUIAnimationTransitionLibrary::CreateAccelerateDecelerateTransition e adiciona as transições para o storyboard (etapa 3) usando o método IUIAnimationStoryboard::AddTransition .

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

                            ...

}

Etapa anterior

Antes de iniciar esta etapa, você deve ter concluído esta etapa: Leia os Valores da Variável de Animação.

Próxima etapa

Depois de concluir esta etapa, a próxima etapa é: Agendar um Storyboard.

IUIAnimationManager::CreateStoryboard

IUIAnimationStoryboard::AddTransition

IUIAnimationTransitionLibrary::CreateAccelerateDecelerateTransition

Visão geral do Storyboard