Görsel Taslak Oluşturma ve Geçiş Ekleme

Animasyon oluşturmak için uygulamanın görsel taslak oluşturması gerekir.

Genel bakış

Görsel taslak oluşturmanın genel adımları şunlardır:

  1. Görsel taslak oluşturma
  2. Bir veya daha fazla geçiş oluşturma
  3. Hangi değişkenlere animasyon eklediklerini belirterek geçişleri görsel taslak içine ekleyin

Animasyon yöneticisi kullanılarak boş bir görsel taslak oluşturulabilir. Uygulamanın her görsel şeridi geçişlerle doldurması gerekir. Her geçiş, tek bir animasyon değişkeninin belirli bir zaman aralığında nasıl değiştiğini belirtir. Geçişler, Windows Animasyonu'na dahil edilen geçiş kitaplığı bileşeni kullanılarak oluşturulabilir. Alternatif olarak, bir uygulama kendi özel geçişlerini oluşturabilir veya bir üçüncü tarafın geçiş kitaplığını kullanabilir. Uygulama bir hikaye tahtasına geçiş eklediğinde, geçişin hangi animasyon değişkenini animasyonlandıracağını belirtir.

Görsel taslak, bir veya daha fazla animasyon değişkeninde geçişler içerebilir. Daha karmaşık görsel taslaklar, geçişlerin başlangıç veya bitişlerini eşitlemek veya film şeridinin yinelenmesi gereken bölümlerini (sabit sayıda veya süresiz) belirtmek için ana kareler kullanabilir.

Örnek Kod

Aşağıdaki örnek kod, Windows Animation örneği Timer-Driven Animasyoniçindeki MainWindow.cpp dosyasından alınmıştır; CMainWindow::ChangeColor metoduna bakın. Bu örnek, IUIAnimationManager::CreateStoryboard yöntemini kullanarak görsel taslak (1. adım) oluşturur. IUIAnimationTransitionLibrary::CreateAccelerateDecelerateTransition yöntemini kullanarak geçişleri (2. adım) oluşturur ve IUIAnimationStoryboard::AddTransition yöntemini kullanarak geçişleri film şeridine (3. adım) ekler.

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

                            ...

}

Önceki Adım

Bu adıma başlamadan önce şu adımı tamamlamış olmanız gerekir: Animasyon Değişkeni Değerlerini Okuma.

Sonraki Adım

Bu adımı tamamladıktan sonra sonraki adım: Storyboardzamanlama yapmaktır.

IUIAnimationManager::CreateStoryboard

IUIAnimationStoryboard::AddTransition

IUIAnimationTransitionLibrary::CreateAccelerateDecelerateTransition

Storyboard'a Genel Bakış

 

 

  • Last updated on