Erstellen eines Storyboards und Hinzufügen von Übergängen

  • Artikel

Um eine Animation zu erstellen, muss eine Anwendung ein Storyboard erstellen.

Übersicht

Die allgemeinen Schritte zum Erstellen eines Storyboards sind wie folgt:

  1. Erstellen eines Storyboards
  2. Erstellen eines oder mehrerer Übergänge
  3. Fügen Sie die Übergänge zum Storyboard hinzu, und geben Sie an, welche Variablen sie animieren.

Mit dem Animations-Manager kann ein leeres Storyboard erstellt werden. Die Anwendung muss jedes Storyboard mit Übergängen auffüllen. Jeder Übergang gibt an, wie sich eine einzelne Animationsvariable über ein bestimmtes Zeitintervall ändert. Übergänge können mithilfe der in Windows-Animation enthaltenen Übergangsbibliothekskomponente erstellt werden. Alternativ kann eine Anwendung eigene benutzerdefinierte Übergänge erstellen oder eine Übergangsbibliothek von einem Drittanbieter verwenden. Wenn die Anwendung einem Storyboard einen Übergang hinzufügt, gibt sie an, welche Animationsvariable der Übergang animiert.

Ein Storyboard kann Übergänge für eine oder mehrere Animationsvariablen enthalten. Komplexere Storyboards können Keyframes verwenden, um die Anfangs- oder Enden von Übergängen zu synchronisieren oder Teile des Storyboards anzugeben, die wiederholt werden sollen (eine feste Anzahl von Wiederholungen oder unbegrenzt).

Beispielcode

Der folgende Beispielcode stammt aus MainWindow.cpp im Windows-Animationsbeispiel Timer-Driven Animation; siehe die CMainWindow::ChangeColor-Methode. In diesem Beispiel wird das Storyboard (Schritt 1) mithilfe der IUIAnimationManager::CreateStoryboard-Methode erstellt, die Übergänge (Schritt 2) mithilfe der IUIAnimationTransitionLibrary::CreateAccelerateDecelerateTransition-Methode erstellt und die Übergänge dem Storyboard (Schritt 3) mithilfe der IUIAnimationStoryboard::AddTransition-Methode hinzugefügt.

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

                            ...

}

Vorheriger Schritt

Bevor Sie mit diesem Schritt beginnen, sollten Sie diesen Schritt abgeschlossen haben: Lesen Sie die Werte der Animationsvariablen.

Nächster Schritt

Nach Abschluss dieses Schritts ist der nächste Schritt: Planen eines Storyboards.

IUIAnimationManager::CreateStoryboard

IUIAnimationStoryboard::AddTransition

IUIAnimationTransitionLibrary::CreateAccelerateDecelerateTransition

Übersicht über Storyboards