Compartilhar via

Criar variáveis de animação

  • Artigo

Um aplicativo deve criar uma variável de animação para cada característica visual que deve ser animada usando a Animação do Windows.

Visão geral

As variáveis de animação são criadas usando o gerenciador de animação e o aplicativo deve manter uma referência a cada uma pelo tempo que for necessário. Seu aplicativo geralmente criará cada variável de animação ao mesmo tempo que o objeto visual que ele anima.

Quando uma variável de animação é criada, seu valor inicial deve ser especificado. Depois disso, seu valor só pode ser alterado agendando storyboards que o animam.

As variáveis de animação são passadas como parâmetros quando os storyboards são construídos, portanto, o aplicativo não deve liberá-las até que as características visuais que representam não precisem mais ser animadas, normalmente quando os objetos visuais associados estão prestes a ser destruídos.

Código de exemplo

Animando cores

O código de exemplo a seguir é obtido de MainWindow.cpp nos exemplos de Animação controlada por aplicativo e animação controlada por temporizador. No exemplo, três variáveis de animação são criadas usando CreateAnimationVariable para representar cores de tela de fundo. O código também usa os métodos SetLowerBound e SetUpperBound para controlar o valor da variável de animação.

const DOUBLE INITIAL_RED = COLOR_MAX;
const DOUBLE INITIAL_GREEN = COLOR_MAX;
const DOUBLE INITIAL_BLUE = COLOR_MAX;

HRESULT hr = m_pAnimationManager->CreateAnimationVariable(
    INITIAL_RED,
    &m_pAnimationVariableRed
    );
if (SUCCEEDED(hr))
{
    hr = m_pAnimationVariableRed->SetLowerBound(COLOR_MIN);
    if (SUCCEEDED(hr))
    {
        hr = m_pAnimationVariableRed->SetUpperBound(COLOR_MAX);
        if (SUCCEEDED(hr))
        {
            hr = m_pAnimationManager->CreateAnimationVariable(
                INITIAL_GREEN,
                &m_pAnimationVariableGreen
                );
            if (SUCCEEDED(hr))
            {
                hr = m_pAnimationVariableGreen->SetLowerBound(COLOR_MIN);
                if (SUCCEEDED(hr))
                {
                    hr = m_pAnimationVariableGreen->SetUpperBound(COLOR_MAX);
                    if (SUCCEEDED(hr))
                    {
                        hr = m_pAnimationManager->CreateAnimationVariable(
                            INITIAL_BLUE,
                            &m_pAnimationVariableBlue
                            );
                        if (SUCCEEDED(hr))
                        {
                            hr = m_pAnimationVariableBlue->SetLowerBound(COLOR_MIN);
                            if (SUCCEEDED(hr))
                            {
                                hr = m_pAnimationVariableBlue->SetUpperBound(COLOR_MAX);
                            }
                        }
                    }
                }
            }
        }
    }
}

Observe as definições a seguir de MainWindow.h.

class CMainWindow
{

    ...

private:

    // Animated Variables

    IUIAnimationVariable *m_pAnimationVariableRed;
    IUIAnimationVariable *m_pAnimationVariableGreen;
    IUIAnimationVariable *m_pAnimationVariableBlue;

    ...

};

Animando coordenadas x e y

O código de exemplo a seguir é obtido de Thumbnail.cpp no Exemplo de Layout da Grade de Animação do Windows; consulte o método CMainWindow::CreateAnimationVariables. Duas variáveis de animação são criadas para representar as coordenadas X e Y de cada objeto.

// Create the animation variables for the x and y coordinates

hr = m_pAnimationManager->CreateAnimationVariable(
    xInitial,
    &m_pAnimationVariableX
    );

if (SUCCEEDED(hr))
{
    hr = m_pAnimationManager->CreateAnimationVariable(
        yInitial,
        &m_pAnimationVariableY
        );

    ...

}

Observe as definições a seguir de Thumbnail.h.

class CThumbnail
{
public:

    ...

    // X and Y Animation Variables

    IUIAnimationVariable *m_pAnimationVariableX;
    IUIAnimationVariable *m_pAnimationVariableY;

    ...

};

Variáveis de animação são números de ponto flutuante, mas seus valores também podem ser buscados como inteiros. Por padrão, cada valor será arredondado para o inteiro mais próximo, mas é possível substituir o modo de arredondamento usado para uma variável. O código de exemplo a seguir usa o método SetRoundingMode para especificar que os valores sempre devem ser arredondados para baixo.

hr = m_pAnimationVariableX->SetRoundingMode(
    UI_ANIMATION_ROUNDING_MODE_FLOOR
    );
if (SUCCEEDED(hr))
{
    hr = m_pAnimationVariableY->SetRoundingMode(
        UI_ANIMATION_ROUNDING_MODE_FLOOR
        );

    ...

}

Etapa anterior

Antes de iniciar esta etapa, você deve ter concluído esta etapa: Criar os Principais Objetos de Animação.

Próxima etapa

Depois de concluir esta etapa, a próxima etapa é: Atualizar o Gerenciador de Animação e Desenhar Quadros.

IUIAnimationManager::CreateAnimationVariable

IUIAnimationVariable::SetLowerBound

IUIAnimationVariable::SetRoundingMode

IUIAnimationVariable::SetUpperBound

Visão geral da animação do Windows