チュートリアル: MFC プロジェクトへのアニメーションの追加

[アーティクル]
08/09/2011

更新 : 2011 年 3 月

Visual Studio 2010 SP1 が必要です。

このチュートリアルでは、Visual C++ の Microsoft Foundation Class ライブラリ (MFC) プロジェクトに基本的なアニメーションオブジェクトを追加する方法について説明します。

ここでは、次の作業の手順を示します。

MFC アプリケーションを作成する。
メニューを追加し、アニメーションを開始および停止するコマンドを追加する。
開始コマンドと停止コマンドのハンドラーを作成する。
アニメーションオブジェクトをプロジェクトに追加する。
アニメーションオブジェクトをウィンドウの中央に配置する。
結果を確認する。

注意

お使いのマシンで、Visual Studio ユーザーインターフェイスの一部の要素の名前や場所が、次の手順とは異なる場合があります。これらの要素は、使用している Visual Studio のエディションや独自の設定によって決まります。詳細については、「Visual Studio の設定」を参照してください。

必須コンポーネント

このチュートリアルを完了するには、Visual Studio 2010 が必要です。

MFC アプリケーションを作成するには

[ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックします。
[新しいプロジェクト] ダイアログボックスで、左ペインの [インストールされたテンプレート] の下にある [Visual C++] を展開し、[MFC] をクリックします。中央のペインで、[MFC アプリケーション] をクリックします。 [名前] ボックスに、「MFCAnimationWalkthrough」と入力します。 [OK] をクリックします。
[MFC アプリケーションウィザード] ダイアログボックスで、[アプリケーションの種類] が [マルチドキュメント]、[プロジェクト形式] が [Visual Studio] にそれぞれ設定され、[ドキュメント/ビューアーキテクチャサポート] がオンになっていることを確認します。 [完了] をクリックします。

メニューを追加し、アニメーションを開始および停止するコマンドを追加するには

[表示] メニューの [その他のウィンドウ] をポイントし、[リソースビュー] をクリックします。
[リソースビュー] で [メニュー] フォルダーに移動し、フォルダーを開きます。変更対象の IDR_MFCAnimationWalTYPE リソースをダブルクリックして開きます。
メニューバーの [ここへ入力] ボックスに「A&nimation」と入力して、Animation メニューを作成します。
[Animation] の [ここへ入力] ボックスに「Start &Forward」と入力して、Start Forward コマンドを作成します。
[Start Forward] の [ここへ入力] ボックスに、「Start &Backward」と入力します。
[Start Backward] の [ここへ入力] ボックスに「S&top」と入力して、Stop コマンドを作成します。
MFCAnimationWalkthrough.rc を保存して閉じます。
ソリューションエクスプローラーで、変更対象の MainFrm.cpp をダブルクリックして開きます。 CMainFrame::OnCreate メソッドで、lstBasicCommands.AddTail の複数の呼び出しが含まれているセクションを見つけます。このセクションの直後に次のコードを追加します。
```
    lstBasicCommands.AddTail(ID_ANIMATION_STARTFORWARD);
    lstBasicCommands.AddTail(ID_ANIMATION_STARTBACKWARD);
    lstBasicCommands.AddTail(ID_ANIMATION_STOP);
```
ファイルを保存して閉じます。

開始コマンドと停止コマンドのハンドラーを作成するには

[プロジェクト] メニューの [クラスウィザード] をクリックします。
MFC クラスウィザードで、[クラス名] の下の [CMFCAnimationWalkthroughView] を選択します。
[コマンド] タブで、[オブジェクト ID] ボックスの [ID_ANIMATION_STARTFORWARD] を選択し、[メッセージ] ボックスの [COMMAND] を選択します。 [ハンドラーの追加] をクリックします。
[メンバー関数の追加] ダイアログボックスで、[OK] をクリックします。
[オブジェクト ID] ボックスの [ID_ANIMATION_STARTBACKWARD] を選択し、[メッセージ] ボックスの [COMMAND] を選択します。 [ハンドラーの追加] をクリックします。
[メンバー関数の追加] ダイアログボックスで、[OK] をクリックします。
[オブジェクト ID] ボックスの [ID_ANIMATION_STOP] を選択し、[メッセージ] ボックスの [COMMAND] を選択します。 [ハンドラーの追加] をクリックし、[OK] をクリックします。
[メンバー関数の追加] ダイアログボックスで、[OK] をクリックします。
MFC クラスウィザードで [OK] をクリックします。
MFCAnimationWalkthroughView.cpp を保存します。保存すると、このファイルがエディターで開かれますが、これを閉じないようにしてください。

アニメーションオブジェクトをプロジェクトに追加するには

ソリューションエクスプローラーで、変更対象の MFCAnimationWalkthroughView.h をダブルクリックして開きます。 CMFCAnimationWalkthroughView クラスの定義の直前に次のコードを追加して、カスタムアニメーションコントローラーを作成します。このコントローラーで、アニメーションオブジェクトとのスケジュールの競合を処理します。
```
class CCustomAnimationController : public CAnimationController
{
public:
    CCustomAnimationController()
    {
    }

    virtual BOOL OnHasPriorityTrim(CAnimationGroup* pGroupScheduled, CAnimationGroup* pGroupNew, UI_ANIMATION_PRIORITY_EFFECT priorityEffect)
    {
        return TRUE;
    }
};
```

CMFCAnimationWalkthroughView クラスの末尾に、次のコードを追加します。

    CCustomAnimationController m_animationController;
    CAnimationColor m_animationColor; 
    CAnimationRect m_animationRect;

DECLARE_MESSAGE_MAP() コード行の後に、次のコードを追加します。
```
    void Animate(BOOL bDirection);
```
ファイルを保存して閉じます。
MFCAnimationWalkthroughView.cpp で、ファイルの先頭にある #include ステートメントの後のクラスメソッドの前に、次のコードを追加します。
```
static int nAnimationGroup = 0;
static int nInfoAreaHeight = 40;
```

CMFCAnimationWalkthroughView のコンストラクターの末尾に、次のコードを追加します。

    m_animationController.EnableAnimationTimerEventHandler();
    m_animationController.EnablePriorityComparisonHandler(UI_ANIMATION_PHT_TRIM);

    m_animationColor = RGB(255, 255, 255);
    m_animationRect = CRect(0, 0, 0, 0);

    m_animationColor.SetID(-1, nAnimationGroup);
    m_animationRect.SetID(-1, nAnimationGroup);

    m_animationController.AddAnimationObject(&m_animationColor);
    m_animationController.AddAnimationObject(&m_animationRect);

CAnimationWalthroughView::PreCreateWindow メソッドを見つけ、このメソッドを次のコードで置き換えます。

BOOL CMFCAnimationWalkthroughView::PreCreateWindow(CREATESTRUCT& cs)
{
    // TODO: Modify the Window class or styles here by modifying
    //  the CREATESTRUCT cs

    m_animationController.SetRelatedWnd(this);
    return CView::PreCreateWindow(cs);
}

CAnimationWalkthroughView::OnDraw メソッドを見つけ、このメソッドを次のコードで置き換えます。

void CMFCAnimationWalkthroughView::OnDraw(CDC* pDC)
{
    CMFCAnimationWalkthroughDoc* pDoc = GetDocument();
    ASSERT_VALID(pDoc);
    if (!pDoc)
        return;

    // TODO: add draw code for native data here
    CMemDC dcMem(*pDC, this);
    CDC& dc = dcMem.GetDC();

    CRect rect;
    GetClientRect(rect);

    dc.FillSolidRect(rect, GetSysColor(COLOR_WINDOW));

    CString strRGB;
    strRGB.Format(_T("Fill Color is: %d; %d; %d"), GetRValue(m_animationColor), GetGValue(m_animationColor), GetBValue(m_animationColor));

    dc.DrawText(strRGB, rect, DT_CENTER);
    rect.top += nInfoAreaHeight;

    CBrush br;

    br.CreateSolidBrush(m_animationColor);
    CBrush* pBrushOld = dc.SelectObject(&br);

    dc.Rectangle((CRect)m_animationRect);
    dc.SelectObject(pBrushOld);
}

ファイルの末尾に、次のコードを追加します。

void CMFCAnimationWalkthroughView::Animate(BOOL bDirection)
{
    static UI_ANIMATION_SECONDS duration = 3;
    static DOUBLE dblSpeed = 35.;
    static BYTE nStartColor = 50;
    static BYTE nEndColor = 255;

    BYTE nRedColorFinal = bDirection ? nStartColor : nEndColor;
    BYTE nGreenColorFinal = bDirection ? nStartColor : nEndColor;
    BYTE nBlueColorFinal = bDirection ? nStartColor : nEndColor;

    CLinearTransition* pRedTransition = new CLinearTransition(duration, (DOUBLE)nRedColorFinal);
    CSmoothStopTransition* pGreenTransition = new CSmoothStopTransition(duration, (DOUBLE)nGreenColorFinal);
    CLinearTransitionFromSpeed* pBlueTransition = new CLinearTransitionFromSpeed(dblSpeed, (DOUBLE)nBlueColorFinal);

    m_animationColor.AddTransition(pRedTransition, pGreenTransition, pBlueTransition);

    CRect rectClient;
    GetClientRect(rectClient);
    rectClient.top += nInfoAreaHeight;

    int nLeftFinal = bDirection ? rectClient.left : rectClient.CenterPoint().x;
    int nTopFinal = bDirection ? rectClient.top : rectClient.CenterPoint().y;
    int nRightFinal = bDirection ? rectClient.right : rectClient.CenterPoint().x;
    int nBottomFinal = bDirection ? rectClient.bottom : rectClient.CenterPoint().y;

    CLinearTransition* pLeftTransition = new CLinearTransition(duration, nLeftFinal);
    CLinearTransition* pTopTransition = new CLinearTransition(duration, nTopFinal);
    CLinearTransition* pRightTransition = new CLinearTransition(duration, nRightFinal);
    CLinearTransition* pBottomTransition = new CLinearTransition(duration, nBottomFinal);

    m_animationRect.AddTransition(pLeftTransition, pTopTransition, pRightTransition, pBottomTransition);

    CBaseKeyFrame* pKeyframeStart = CAnimationController::GetKeyframeStoryboardStart();
    CKeyFrame* pKeyFrameEnd = m_animationController.CreateKeyframe(nAnimationGroup, pBlueTransition);

    pLeftTransition->SetKeyframes(pKeyframeStart, pKeyFrameEnd);
    pTopTransition->SetKeyframes(pKeyframeStart, pKeyFrameEnd);
    pRightTransition->SetKeyframes(pKeyframeStart, pKeyFrameEnd);
    pBottomTransition->SetKeyframes(pKeyframeStart, pKeyFrameEnd);

    m_animationController.AnimateGroup(nAnimationGroup);
}

[プロジェクト] メニューの [クラスウィザード] をクリックします。
MFC クラスウィザードで、[クラス名] の下の [CMFCAnimationWalkthroughView] を選択します。
[メッセージ] タブで、[メッセージ] ボックスの [WM_ERASEBKGND] を選択し、[ハンドラーの追加] をクリックして、[OK] をクリックします。
MFCAnimationWalkthroughView.cpp で、アニメーションオブジェクトが再描画されたときのちらつきを減らすために、OnEraseBkgnd の実装を次のコードで置き換えます。
```
BOOL CMFCAnimationWalkthroughView::OnEraseBkgnd(CDC* /*pDC*/)
{
    return TRUE;
}
```

CMFCAnimationWalkthroughView::OnAnimationStartforward、CMFCAnimationWalkthroughView::OnAnimationStartbackward、および CMFCAnimationWalkthroughView::OnAnimationStop の各実装を次のコードで置き換えます。

void CMFCAnimationWalkthroughView::OnAnimationStartforward()
{
    Animate(TRUE);
}

void CMFCAnimationWalkthroughView::OnAnimationStartbackward()
{
    Animate(FALSE);
}

void CMFCAnimationWalkthroughView::OnAnimationStop()
{
    IUIAnimationManager* pManager = m_animationController.GetUIAnimationManager();
    if (pManager != NULL)
    {
        pManager->AbandonAllStoryboards();
    }
}

ファイルを保存して閉じます。

アニメーションオブジェクトをウィンドウの中央に配置するには

ソリューションエクスプローラーで、変更対象の MFCAnimationWalkthroughView.h をダブルクリックして開きます。 CMFCAnimationWalkthroughView クラスの末尾にある m_animationRect の定義の直後に、次のコードを追加します。
```
    BOOL m_bCurrentDirection;
```
ファイルを保存して閉じます。
[プロジェクト] メニューの [クラスウィザード] をクリックします。
MFC クラスウィザードで、[クラス名] の下の [CMFCAnimationWalkthroughView] を選択します。
[メッセージ] タブで、[メッセージ] ボックスの [WM_SIZE] を選択し、[ハンドラーの追加] をクリックして、[OK] をクリックします。

MFCAnimationWalkthroughView.cpp で、CMFCAnimationWalkthroughView::OnSize のコードを次のコードで置き換えます。

void CMFCAnimationWalkthroughView::OnSize(UINT nType, int cx, int cy)
{
    CView::OnSize(nType, cx, cy);

    CRect rect;
    GetClientRect(rect);
    rect.top += nInfoAreaHeight;

    CRect rectAnim = m_animationRect;
    m_animationRect = CRect(CPoint(rect.CenterPoint().x - rectAnim.Width() / 2, 
                            rect.CenterPoint().y - rectAnim.Height() / 2), 
                            rectAnim.Size());

    if (m_animationController.IsAnimationInProgress())
    {
        Animate(m_bCurrentDirection);
    }
}

CMFCAnimationWalkthroughView のコンストラクターの先頭に、次のコードを追加します。
```
    m_bCurrentDirection = TRUE;
```
CMFCAnimationWalkthroughView::Animate メソッドの先頭に、次のコードを追加します。
```
    m_bCurrentDirection = bDirection;
```
ファイルを保存して閉じます。

結果を確認するには

アプリケーションをビルドして実行します。 [Animation] メニューの [Start Forward] をクリックします。四角形が表示された後、中央の領域が塗りつぶされます。 [Start Backward] をクリックするとアニメーションが逆転再生され、[Stop] をクリックするとアニメーションが停止します。アニメーションの進行に伴って四角形の塗りつぶしの色が変化し、現在の色がアニメーションウィンドウの上部に表示されます。

参照

その他の技術情報

チュートリアル (MFC)

履歴の変更

日付	履歴	理由
2011 年 3 月	このコンテンツを追加。	SP1 機能変更

2011 年 3 月

このコンテンツを追加。

SP1 機能変更