Partager via

Créer un storyboard et ajouter des transitions

  • Article

Pour créer une animation, une application doit construire un storyboard.

Vue d’ensemble

Les étapes générales de construction d’un storyboard sont les suivantes :

  1. Créer un storyboard
  2. Créer une ou plusieurs transitions
  3. Ajoutez les transitions au storyboard, en spécifiant les variables qu’elles animent

Un storyboard vide peut être créé à l’aide du gestionnaire d’animations. L’application doit remplir chaque storyboard avec des transitions. Chaque transition spécifie comment une variable d’animation unique change sur un intervalle de temps donné. Les transitions peuvent être créées à l’aide du composant de bibliothèque de transition inclus dans l’animation Windows. Une application peut également créer ses propres transitions personnalisées ou utiliser une bibliothèque de transition à partir d’un tiers. Lorsque l’application ajoute une transition à un storyboard, elle spécifie la variable d’animation que la transition animera.

Un storyboard peut inclure des transitions sur une ou plusieurs variables d’animation. Les storyboards plus complexes peuvent utiliser des images clés pour synchroniser les débuts ou les fins des transitions, ou pour spécifier des parties du storyboard qui doivent se répéter (un nombre fixe de fois ou indéfiniment).

Exemple de code

L’exemple de code suivant est tiré de MainWindow.cpp dans l’exemple d’animation Windows pilotée par le minuteur ; consultez la méthode CMainWindow::ChangeColor. Cet exemple crée le storyboard (étape 1) à l’aide de la méthode IUIAnimationManager::CreateStoryboard , crée les transitions (étape 2) à l’aide de la méthode IUIAnimationTransitionLibrary::CreateAccelerateDecelerateTransition et ajoute les transitions au storyboard (étape 3) à l’aide de la méthode 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

                            ...

}

Étape précédente

Avant de commencer cette étape, vous devez avoir effectué cette étape : Lire les valeurs des variables d’animation.

étape suivante

Une fois cette étape terminée, l’étape suivante est : Planifier un storyboard.

IUIAnimationManager::CreateStoryboard

IUIAnimationStoryboard::AddTransition

IUIAnimationTransitionLibrary::CreateAccelerateDecelerateTransition

Vue d’ensemble du storyboard