Поделиться через

Создайте раскадровку и добавьте переходы

  • Статья

Чтобы создать анимацию, приложение должно создать раскадровку.

Обзор

Общие шаги по созданию раскадровки приведены ниже.

  1. Создайте раскадровку
  2. Создание одного или нескольких переходов
  3. Добавьте переходы в раскадровку, указав, какие переменные они анимируют

С помощью диспетчера анимации можно создать пустую раскадровку. Приложение должно заполнять каждую раскадровку переходами. Каждый переход указывает, как одна переменная анимации изменяется в течение заданного интервала времени. Переходы можно создавать с помощью компонента библиотеки перехода, включенного в анимацию Windows. Кроме того, приложение может создавать собственные пользовательские переходы или использовать библиотеку перехода от стороннего производителя. Когда приложение добавляет переход в раскадровку, он указывает, какая переменная анимации будет анимировать переход.

Раскадровка может включать переходы на одну или несколько переменных анимации. Более сложные раскадровки могут использовать ключевые кадры для синхронизации запусков или окончания переходов, или указывать части раскадровки, которые должны повторяться (фиксированное количество раз или неограниченно).

Пример кода

Следующий пример кода взят из MainWindow.cpp в образце анимации Windows Timer-Driven анимации. См. метод CMainWindow::ChangeColor. В этом примере создается раскадровка (шаг 1) с помощью метода IUIAnimationManager::CreateStoryboard, создает переходы (шаг 2) с помощью метода IUIAnimationTransitionLibrary::CreateAccelerateDecelerateTransition и добавляет переходы в раскадровку (шаг 3) с помощью метода 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

                            ...

}

Предыдущий шаг

Прежде чем начать этот шаг, вы должны завершить шаг : Прочитать значения переменных анимации.

Следующий шаг

После завершения этого шага следующий шаг: Запланировать раскадровку.

IUIAnimationManager::CreateStoryboard

IUIAnimationStoryboard::AddTransition

IUIAnimationTransitionLibrary::CreateAccelerateDecelerateTransition

Обзор раскадровки