Creare uno storyboard e aggiungere transizioni

  • Articolo

Per creare un'animazione, un'applicazione deve costruire uno storyboard.

Panoramica

I passaggi generali per la costruzione di uno storyboard sono i seguenti:

  1. Creare uno storyboard
  2. Creare una o più transizioni
  3. Aggiungere le transizioni allo storyboard, specificando quali variabili animano

È possibile creare uno storyboard vuoto usando la gestione animazioni. L'applicazione deve popolare ogni storyboard con transizioni. Ogni transizione specifica il modo in cui una singola variabile di animazione cambia in un determinato intervallo di tempo. Le transizioni possono essere create usando il componente della libreria di transizione incluso nell'animazione di Windows. In alternativa, un'applicazione può creare transizioni personalizzate o usare una libreria di transizione da terze parti. Quando l'applicazione aggiunge una transizione a uno storyboard, specifica quale variabile di animazione verrà animata dalla transizione.

Uno storyboard può includere transizioni in una o più variabili di animazione. Gli storyboard più complessi possono usare fotogrammi chiave per sincronizzare gli inizi o le estremità delle transizioni oppure per specificare parti dello storyboard che devono essere ripetute (un numero fisso di volte o per un tempo indefinito).

Codice di esempio

Il codice di esempio seguente è tratto da MainWindow.cpp nell'esempio Animazione timer di Windows; vedere il metodo CMainWindow::ChangeColor. Questo esempio crea lo storyboard (passaggio 1) usando il metodo IUIAnimationManager::CreateStoryboard , crea le transizioni (passaggio 2) usando il metodo IUIAnimationTransitionLibrary::CreateAccelerateDecelerateTransition e aggiunge le transizioni allo storyboard (passaggio 3) usando il metodo 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

                            ...

}

Passaggio precedente

Prima di iniziare questo passaggio, è necessario aver completato questo passaggio: Leggere i valori delle variabili di animazione.

passaggio successivo

Al termine di questo passaggio, il passaggio successivo è: Pianificare uno storyboard.

IUIAnimationManager::CreateStoryboard

IUIAnimationStoryboard::AddTransition

IUIAnimationTransitionLibrary::CreateAccelerateDecelerateTransition

Panoramica dello storyboard