次の方法で共有


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

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

このチュートリアルでは、次のタスクを実行する方法について説明します。

  • MFC アプリケーションを作成する。

  • メニューを追加し、コマンドを水化して、アニメーションを開始および停止する。

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

  • アニメーション化されたオブジェクトをプロジェクトに追加する。

  • アニメーション化されたオブジェクトをウィンドウの中央に移動する。

  • 結果を確認しましょう。

Note

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

前提条件

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

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

  1. MFC アプリケーション ウィザードを使用して、MFC アプリケーションを作成します。 お使いのバージョンの Visual Studio のウィザードを開く方法については、「チュートリアル: 新しい MFC シェル コントロールの使用」を参照してください。

  2. [名前] ボックスに「MFCAnimationWalkthrough」と入力します。 OK をクリックします。

  3. [MFC アプリケーション ウィザード] ダイアログ ボックスで、[アプリケーションの種類][複数のドキュメント] であり、[Project スタイル][Visual Studio] であり、[ドキュメント/ビュー アーキテクチャ サポート] オプションが選択されていることを確認します。 [完了] をクリックします。

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

  1. [表示] メニューの [その他のウィンドウ] をポイントし、[リソース ビュー] をクリックします。

  2. [リソース ビュー][メニュー] フォルダーに移動して開きます。 IDR_MFCAnimationWalkthroughTYPE リソースをダブルクリックして開き、修正を加えます。

  3. メニュー バーの [ここに入力] ボックスに「A>」と入力して、アニメーション メニューを作成します。

  4. [アニメーション] の [ここに入力] ボックスに「開始」&「進む」と入力して、前方開始コマンドを作成します。

  5. [前方に開始] の [ここに入力] ボックスに「Start & Back」と入力します。

  6. [戻る] の [ここに入力] ボックスに「S>top」と入力して Stop コマンドを作成します。

  7. MFCAnimationWalkthrough.rc を保存して、閉じます。

  8. ソリューション エクスプローラーで、MainFrm.cpp をダブルクリックして開き、修正します。 CMainFrame::OnCreate メソッドで、lstBasicCommands.AddTail への呼び出しが複数あるセクションを見つけます。 そのセクションの直後に、次のコードを追加します。

    lstBasicCommands.AddTail(ID_ANIMATION_STARTFORWARD);
    lstBasicCommands.AddTail(ID_ANIMATION_STARTBACKWARD);
    lstBasicCommands.AddTail(ID_ANIMATION_STOP);
    
  9. ファイルを保存して閉じます。

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

  1. [プロジェクト] メニューの [クラス ウィザード] をクリックします。

  2. [MFC クラス ウィザード][クラス名] の下から [CMFCAnimationWalkthroughView] を選択します。

  3. [コマンド] タブの [オブジェクト ID] ボックスで [ID_ANIMATION_STARTFORWARD] を選択し、[メッセージ] ボックスで [COMMAND] を選択します。 [ハンドラーの追加] をクリックします。

  4. [メンバー関数の追加] ダイアログ ボックスで、[OK] をクリックします。

  5. [オブジェクト ID] ボックスで [ID_ANIMATION_STARTBACKWARD] を選択し、[メッセージ] ボックスで [COMMAND] を選択します。 [ハンドラーの追加] をクリックします。

  6. [メンバー関数の追加] ダイアログ ボックスで、[OK] をクリックします。

  7. [オブジェクト ID] ボックスで [ID_ANIMATION_STOP] を選択し、[メッセージ] ボックスで [COMMAND] を選択します。 [ハンドラーの追加] をクリックし、[OK] をクリックします。

  8. [メンバー関数の追加] ダイアログ ボックスで、[OK] をクリックします。

  9. [MFC クラス ウィザード][OK] をクリックします。

  10. MFCAnimationWalkthroughView.cpp を保存します。これはエディターで開きますが、閉じないでください。

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

  1. [ソリューション エクスプローラー] で MFCAnimationWalkthroughView.h をダブルクリックして開き、修正します。 CMFCAnimationWalkthroughView クラスの定義の直前に次のコードを追加して、アニメーション オブジェクトとのスケジュール競合を処理するカスタム アニメーション コントローラーを作成します。

    class CCustomAnimationController : public CAnimationController
    {
    public:
        CCustomAnimationController()
        {
        }
    
        virtual BOOL OnHasPriorityTrim(CAnimationGroup* pGroupScheduled,
            CAnimationGroup* pGroupNew,
            UI_ANIMATION_PRIORITY_EFFECT priorityEffect)
        {
            return TRUE;
        }
    };
    
  2. CMFCAnimationWalkthroughView クラスの末尾に、次のコードを追加します。

    CCustomAnimationController m_animationController;
    CAnimationColor m_animationColor;
    CAnimationRect m_animationRect;
    
  3. DECLARE_MESSAGE_MAP() 行の後に、次のコードを追加します。

    void Animate(BOOL bDirection);
    
  4. ファイルを保存して閉じます。

  5. MFCAnimationWalkthroughView.cpp のファイルの上部で、#include ステートメントの後、かつ、クラス メソッドの前に、次のコードを追加します。

    static int nAnimationGroup = 0;
    static int nInfoAreaHeight = 40;
    
  6. 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);
    
  7. 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);
    }
    
  8. 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);
    }
    
  9. ファイルの末尾に次のコードを追加します。

    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);
    }
    
  10. [プロジェクト] メニューの [クラス ウィザード] をクリックします。

  11. [MFC クラス ウィザード][クラス名] の下から [CMFCAnimationWalkthroughView] を選択します。

  12. [メッセージ] タブの [メッセージ] ボックスで [WM_ERASEBKGND] を選択し、[ハンドラーの追加] をクリックして、[OK] をクリックします。

  13. MFCAnimationWalkthroughView.cpp で、OnEraseBkgnd の一掃を次のコードに置き換えて、再描画時のアニメーション オブジェクトのちらつきを軽減します。

    BOOL CMFCAnimationWalkthroughView::OnEraseBkgnd(CDC* /*pDC*/)
    {
        return TRUE;
    }
    
  14. CMFCAnimationWalkthroughView::OnAnimationStartforwardCMFCAnimationWalkthroughView::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();
    
        }
    }
    
  15. ファイルを保存して閉じます。

アニメーション化されたオブジェクトをウィンドウの中央に移動するには

  1. [ソリューション エクスプローラー] で MFCAnimationWalkthroughView.h をダブルクリックして開き、修正します。 CMFCAnimationWalkthroughView クラスの末尾の m_animationRect の定義の直後に、次のコードを追加します。

    BOOL m_bCurrentDirection;
    
  2. ファイルを保存して閉じます。

  3. [プロジェクト] メニューの [クラス ウィザード] をクリックします。

  4. [MFC クラス ウィザード][クラス名] の下から [CMFCAnimationWalkthroughView] を選択します。

  5. [メッセージ] タブの [メッセージ] ボックスで [WM_SIZE] を選択し、[ハンドラーの追加] をクリックして、[OK] をクリックします。

  6. 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);
        }
    }
    
  7. CMFCAnimationWalkthroughView のコンストラクターの先頭に、次のコードを追加します。

    m_bCurrentDirection = TRUE;
    
  8. CMFCAnimationWalkthroughView::Animate メソッドの先頭に、次のコードを追加します。

    m_bCurrentDirection = bDirection;
    
  9. ファイルを保存して閉じます。

結果を確認するには

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

関連項目

チュートリアル