Compartir a través de

Crear un guión gráfico y agregar transiciones

  • Artículo

Para crear una animación, una aplicación debe construir un guión gráfico.

Información general

Los pasos generales para construir un guión gráfico son los siguientes:

  1. Creación de un guión gráfico
  2. Crear una o varias transiciones
  3. Agregue las transiciones al guión gráfico, especificando las variables que animan.

Se puede crear un guión gráfico vacío mediante el administrador de animaciones. La aplicación debe rellenar cada guión gráfico con transiciones. Cada transición especifica cómo cambia una sola variable de animación durante un intervalo de tiempo determinado. Las transiciones se pueden crear mediante el componente de biblioteca de transición incluido en la animación de Windows. Como alternativa, una aplicación puede crear sus propias transiciones personalizadas o usar una biblioteca de transición de un tercero. Cuando la aplicación agrega una transición a un guión gráfico, especifica qué variable de animación se animará la transición.

Un guión gráfico puede incluir transiciones en una o varias variables de animación. Los guiones gráficos más complejos pueden usar fotogramas clave para sincronizar los inicios o finales de las transiciones, o para especificar partes del guión gráfico que deben repetirse (un número fijo de veces o indefinidamente).

Código de ejemplo

El código de ejemplo siguiente se toma de MainWindow.cpp en la animación de ejemplo de animación de Windows Animación Animación controlada por temporizador; vea el método CMainWindow::ChangeColor. En este ejemplo se crea el guión gráfico (paso 1) mediante el método IUIAnimationManager::CreateStoryboard , se crean las transiciones (paso 2) mediante el método IUIAnimationTransitionLibrary::CreateAccelerateDecelerateTransition y se agregan las transiciones al guión gráfico (paso 3) mediante el 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

                            ...

}

Paso anterior

Antes de iniciar este paso, debe haber completado este paso: Leer los valores de las variables de animación.

siguiente paso

Después de completar este paso, el siguiente paso es: Programar un guión gráfico.

IUIAnimationManager::CreateStoryboard

IUIAnimationStoryboard::AddTransition

IUIAnimationTransitionLibrary::CreateAccelerateDecelerateTransition

Introducción al guión gráfico