Share via

Membuat Papan Cerita dan Menambahkan Transisi

  • Artikel

Untuk membuat animasi, aplikasi harus membuat papan cerita.

Gambaran Umum

Langkah-langkah umum untuk membangun papan cerita adalah sebagai berikut:

  1. Membuat papan cerita
  2. Membuat satu atau beberapa transisi
  3. Tambahkan transisi ke papan cerita, menentukan variabel mana yang mereka animasikan

Papan cerita kosong dapat dibuat menggunakan manajer animasi. Aplikasi harus mengisi setiap papan cerita dengan transisi. Setiap transisi menentukan bagaimana satu variabel animasi berubah selama interval waktu tertentu. Transisi dapat dibuat menggunakan komponen pustaka transisi yang disertakan dalam Animasi Windows. Secara bergantian, aplikasi dapat membuat transisi kustomnya sendiri atau menggunakan pustaka transisi dari pihak ketiga. Ketika aplikasi menambahkan transisi ke papan cerita, aplikasi menentukan variabel animasi mana yang akan dianimasikan oleh transisi.

Papan cerita mungkin mencakup transisi pada satu atau beberapa variabel animasi. Papan cerita yang lebih kompleks dapat menggunakan keyframe untuk menyinkronkan awal atau akhir transisi, atau untuk menentukan bagian papan cerita yang harus diulang (berapa kali atau tanpa batas waktu).

Contoh Kode

Contoh kode berikut diambil dari MainWindow.cpp di Animasi Windows sampel Timer-Driven Animation; lihat metode CMainWindow::ChangeColor. Contoh ini membuat papan cerita (langkah 1) menggunakan metode IUIAnimationManager::CreateStoryboard , membuat transisi (langkah 2) menggunakan metode IUIAnimationTransitionLibrary::CreateAccelerateDecelerateTransition , dan menambahkan transisi ke papan cerita (langkah 3) menggunakan metode 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

                            ...

}

Langkah Sebelumnya

Sebelum memulai langkah ini, Anda seharusnya telah menyelesaikan langkah ini: Membaca Nilai Variabel Animasi.

Langkah Selanjutnya

Setelah menyelesaikan langkah ini, langkah selanjutnya adalah: Jadwalkan Storyboard.

IUIAnimationManager::CreateStoryboard

IUIAnimationStoryboard::AddTransition

IUIAnimationTransitionLibrary::CreateAccelerateDecelerateTransition

Gambaran Umum Papan Cerita