次の方法で共有

ストーリーボードの作成と画面切り替えの追加

  • [アーティクル]

アニメーションを作成するには、アプリケーションでストーリーボードを構築する必要があります。

概要

ストーリーボードを構築するための一般的な手順は次のとおりです。

  1. ストーリーボードを作成する
  2. 1 つ以上の画面切り替えを作成する
  3. ストーリーボードに遷移を追加し、アニメーション化する変数を指定します

空のストーリーボードは、アニメーション マネージャーを使用して作成できます。 アプリケーションでは、各ストーリーボードに画面切り替えを設定する必要があります。 各遷移は、特定の時間間隔で 1 つのアニメーション変数がどのように変化するかを指定します。 画面切り替えは、Windows アニメーションに含まれる切り替えライブラリ コンポーネントを使用して作成できます。 または、アプリケーションで独自のカスタム画面切り替えを作成したり、サード パーティの切り替えライブラリを使用したりできます。 アプリケーションは、ストーリーボードに切り替えを追加するときに、遷移がアニメーション化するアニメーション変数を指定します。

ストーリーボードには、1 つ以上のアニメーション変数の遷移を含めることができます。 複雑なストーリーボードでは、キーフレームを使用して遷移の開始または終了を同期したり、繰り返すストーリーボードの一部 (固定回数または無期限) を指定することができます。

コード例

次のコード例は、Windows アニメーション のサンプル タイマー駆動型アニメーションの MainWindow.cpp から取得されています。CMainWindow::ChangeColor メソッドを参照してください。 次の使用例は、 IUIAnimationManager::CreateStoryboard メソッドを使用してストーリーボード (手順 1) を作成し、 IUIAnimationTransitionLibrary::CreateAccelerateDecelerateTransition メソッドを使用して画面切り替え (手順 2) を作成し、 IUIAnimationStoryboard::AddTransition メソッドを使用してストーリーボード (手順 3) に切り替えを追加します。

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

ストーリーボードの概要