Share via

Buat Variabel Animasi

  • Artikel

Aplikasi harus membuat variabel animasi untuk setiap karakteristik visual yang akan dianimasikan menggunakan Animasi Windows.

Gambaran Umum

Variabel animasi dibuat menggunakan manajer animasi, dan aplikasi harus mempertahankan referensi untuk masing-masing selama diperlukan. Aplikasi Anda umumnya akan membuat setiap variabel animasi secara bersamaan dengan objek visual yang dianimasikannya.

Saat variabel animasi dibuat, nilai awalnya harus ditentukan. Setelah itu, nilainya hanya dapat diubah dengan menjadwalkan papan cerita yang menganimasikannya.

Variabel animasi diteruskan sebagai parameter ketika papan cerita dibangun, sehingga aplikasi tidak boleh melepaskannya sampai karakteristik visual yang mereka wakili tidak perlu lagi dianimasikan, biasanya ketika objek visual terkait akan dihancurkan.

Contoh Kode

Warna Animasi

Contoh kode berikut diambil dari MainWindow.cpp dalam Animasi Windows sampel Animasi Berbasis Aplikasi dan Animasi Berbasis Timer. Dalam contoh, tiga variabel animasi dibuat menggunakan CreateAnimationVariable untuk mewakili warna latar belakang. Kode ini juga menggunakan metode SetLowerBound dan SetUpperBound untuk mengontrol nilai variabel animasi.

const DOUBLE INITIAL_RED = COLOR_MAX;
const DOUBLE INITIAL_GREEN = COLOR_MAX;
const DOUBLE INITIAL_BLUE = COLOR_MAX;

HRESULT hr = m_pAnimationManager->CreateAnimationVariable(
    INITIAL_RED,
    &m_pAnimationVariableRed
    );
if (SUCCEEDED(hr))
{
    hr = m_pAnimationVariableRed->SetLowerBound(COLOR_MIN);
    if (SUCCEEDED(hr))
    {
        hr = m_pAnimationVariableRed->SetUpperBound(COLOR_MAX);
        if (SUCCEEDED(hr))
        {
            hr = m_pAnimationManager->CreateAnimationVariable(
                INITIAL_GREEN,
                &m_pAnimationVariableGreen
                );
            if (SUCCEEDED(hr))
            {
                hr = m_pAnimationVariableGreen->SetLowerBound(COLOR_MIN);
                if (SUCCEEDED(hr))
                {
                    hr = m_pAnimationVariableGreen->SetUpperBound(COLOR_MAX);
                    if (SUCCEEDED(hr))
                    {
                        hr = m_pAnimationManager->CreateAnimationVariable(
                            INITIAL_BLUE,
                            &m_pAnimationVariableBlue
                            );
                        if (SUCCEEDED(hr))
                        {
                            hr = m_pAnimationVariableBlue->SetLowerBound(COLOR_MIN);
                            if (SUCCEEDED(hr))
                            {
                                hr = m_pAnimationVariableBlue->SetUpperBound(COLOR_MAX);
                            }
                        }
                    }
                }
            }
        }
    }
}

Perhatikan definisi berikut dari MainWindow.h.

class CMainWindow
{

    ...

private:

    // Animated Variables

    IUIAnimationVariable *m_pAnimationVariableRed;
    IUIAnimationVariable *m_pAnimationVariableGreen;
    IUIAnimationVariable *m_pAnimationVariableBlue;

    ...

};

Menganimasikan Koordinat x dan y

Contoh kode berikut diambil dari Thumbnail.cpp dalam Sampel Tata Letak Kisi Animasi Windows; lihat metode CMainWindow::CreateAnimationVariables. Dua variabel animasi dibuat untuk mewakili koordinat X dan Y dari setiap objek.

// Create the animation variables for the x and y coordinates

hr = m_pAnimationManager->CreateAnimationVariable(
    xInitial,
    &m_pAnimationVariableX
    );

if (SUCCEEDED(hr))
{
    hr = m_pAnimationManager->CreateAnimationVariable(
        yInitial,
        &m_pAnimationVariableY
        );

    ...

}

Perhatikan definisi berikut dari Thumbnail.h.

class CThumbnail
{
public:

    ...

    // X and Y Animation Variables

    IUIAnimationVariable *m_pAnimationVariableX;
    IUIAnimationVariable *m_pAnimationVariableY;

    ...

};

Variabel animasi adalah angka floating-point, tetapi nilainya juga dapat diambil sebagai bilangan bulat. Secara default, setiap nilai akan dibulatkan ke bilangan bulat terdekat, tetapi dimungkinkan untuk mengambil alih mode pembulatan yang digunakan untuk variabel. Contoh kode berikut menggunakan metode SetRoundingMode untuk menentukan bahwa nilai harus selalu dibulatkan ke bawah.

hr = m_pAnimationVariableX->SetRoundingMode(
    UI_ANIMATION_ROUNDING_MODE_FLOOR
    );
if (SUCCEEDED(hr))
{
    hr = m_pAnimationVariableY->SetRoundingMode(
        UI_ANIMATION_ROUNDING_MODE_FLOOR
        );

    ...

}

Langkah Sebelumnya

Sebelum memulai langkah ini, Anda seharusnya telah menyelesaikan langkah ini: Buat Objek Animasi Utama.

Langkah Selanjutnya

Setelah menyelesaikan langkah ini, langkah selanjutnya adalah: Perbarui Pengelola Animasi dan Gambar Bingkai.

IUIAnimationManager::CreateAnimationVariable

IUIAnimationVariable::SetLowerBound

IUIAnimationVariable::SetRoundingMode

IUIAnimationVariable::SetUpperBound

Gambaran Umum Animasi Windows