Udostępnij za pośrednictwem


Wskazówki: dodawanie animacji do projektu MFC

W tym przewodniku przedstawiono sposób dodawania podstawowego animowanego obiektu do projektu Visual C++, Microsoft Foundation Class Library (MFC).

W przewodniku pokazano, jak wykonać następujące zadania:

  • Tworzenie aplikacji MFC.

  • Dodaj menu, a następnie dodaj polecenia, aby uruchomić i zatrzymać animację.

  • Utwórz programy obsługi dla poleceń uruchamiania i zatrzymywania.

  • Dodaj animowany obiekt do projektu.

  • Wyśrodkowanie animowanego obiektu w oknie.

  • Sprawdź wyniki.

Uwaga

Na komputerze w poniższych instrukcjach mogą być wyświetlane inne nazwy i lokalizacje niektórych elementów interfejsu użytkownika programu Visual Studio. Te elementy są określane przez numer wersji Visual Studio oraz twoje ustawienia. Aby uzyskać więcej informacji, zobacz Personalizowanie środowiska IDE.

Wymagania wstępne

Aby ukończyć ten przewodnik, musisz mieć program Visual Studio.

Aby utworzyć aplikację MFC

  1. Użyj Kreatora aplikacji MFC, aby utworzyć aplikację MFC. Zobacz Przewodnik: używanie nowych kontrolek powłoki MFC, aby uzyskać instrukcje dotyczące otwierania kreatora dla używanej wersji programu Visual Studio.

  2. W polu Nazwa wpisz MFCAnimationWalkthrough. Kliknij przycisk OK.

  3. W oknie dialogowym Kreator aplikacji MFC sprawdź, czy typ aplikacji to Wiele dokumentów, styl projektu to Visual Studio, a opcja Obsługa architektury dokumentu/widoku jest wybrana. Kliknij przycisk Zakończ.

Aby dodać menu, a następnie dodać polecenia do uruchamiania i zatrzymywania animacji

  1. W menu Widok wskaż pozycję Inne okna, a następnie kliknij pozycję Widok zasobów.

  2. W widoku zasobu przejdź do folderu Menu i otwórz go. Kliknij dwukrotnie zasób IDR_MFCAnimationWalkthroughTYPE, aby otworzyć go w celu modyfikacji.

  3. Na pasku menu w polu Wpisz tutaj wpisz A&nimation , aby utworzyć menu Animacja.

  4. W obszarze Animacja w polu Wpisz tutaj wpisz Start &Forward, aby utworzyć polecenie Rozpocznij do przodu.

  5. W obszarze Rozpocznij do przodu w polu Wpisz tutaj wpisz Start &Wstecz.

  6. W obszarze Rozpocznij do tyłu w polu Wpisz tutaj wpisz S&top, aby utworzyć polecenie Zatrzymaj.

  7. Zapisz plik MFCAnimationWalkthrough.rc i zamknij go.

  8. W Eksplorator rozwiązań kliknij dwukrotnie plik MainFrm.cpp, aby otworzyć go w celu modyfikacji. W metodzie CMainFrame::OnCreate znajdź sekcję zawierającą kilka wywołań metody lstBasicCommands.AddTail. Tuż po tej sekcji dodaj następujący kod.

    lstBasicCommands.AddTail(ID_ANIMATION_STARTFORWARD);
    lstBasicCommands.AddTail(ID_ANIMATION_STARTBACKWARD);
    lstBasicCommands.AddTail(ID_ANIMATION_STOP);
    
  9. Zapisz plik i zamknij go.

Aby utworzyć programy obsługi dla poleceń uruchamiania i zatrzymywania

  1. W menu Projekt kliknij pozycję Kreator klas.

  2. W Kreatorze klas MFC w obszarze Nazwa klasy wybierz pozycję CMFCAnimationWalkthroughView.

  3. Na karcie Polecenia w polu Identyfikatory obiektów wybierz pozycję ID_ANIMATION_STARTFORWARD, a następnie w polu Komunikaty wybierz pozycję POLECENIE. Kliknij pozycję Dodaj procedurę obsługi.

  4. W oknie dialogowym Dodawanie funkcji składowej kliknij przycisk OK.

  5. W polu Identyfikatory obiektów wybierz pozycję ID_ANIMATION_STARTBACKWARD, a następnie w polu Komunikaty wybierz pozycję POLECENIE. Kliknij pozycję Dodaj procedurę obsługi.

  6. W oknie dialogowym Dodawanie funkcji składowej kliknij przycisk OK.

  7. W polu Identyfikatory obiektów wybierz pozycję ID_ANIMATION_STOP, a następnie w polu Komunikaty wybierz pozycję POLECENIE. Kliknij przycisk Dodaj program obsługi , a następnie kliknij przycisk OK.

  8. W oknie dialogowym Dodawanie funkcji składowej kliknij przycisk OK.

  9. W Kreatorze klas MFC kliknij przycisk OK.

  10. Zapisz plik MFCAnimationWalkthroughView.cpp, który jest otwarty w edytorze, ale nie zamykaj go.

Aby dodać animowany obiekt do projektu

  1. W Eksplorator rozwiązań kliknij dwukrotnie MFCAnimationWalkthroughView.h, aby otworzyć go w celu modyfikacji. Tuż przed definicją CMFCAnimationWalkthroughView klasy dodaj następujący kod, aby utworzyć niestandardowy kontroler animacji, który będzie obsługiwać konflikty planowania z obiektem animacji.

    class CCustomAnimationController : public CAnimationController
    {
    public:
        CCustomAnimationController()
        {
        }
    
        virtual BOOL OnHasPriorityTrim(CAnimationGroup* pGroupScheduled,
            CAnimationGroup* pGroupNew,
            UI_ANIMATION_PRIORITY_EFFECT priorityEffect)
        {
            return TRUE;
        }
    };
    
  2. Na końcu CMFCAnimationWalkthroughView klasy dodaj następujący kod.

    CCustomAnimationController m_animationController;
    CAnimationColor m_animationColor;
    CAnimationRect m_animationRect;
    
  3. DECLARE_MESSAGE_MAP() Po wierszu dodaj następujący kod.

    void Animate(BOOL bDirection);
    
  4. Zapisz plik i zamknij go.

  5. W pliku MFCAnimationWalkthroughView.cpp w górnej części pliku po #include instrukcjach, ale przed wszelkimi metodami klasy dodaj następujący kod.

    static int nAnimationGroup = 0;
    static int nInfoAreaHeight = 40;
    
  6. Na końcu konstruktora dla CMFCAnimationWalkthroughViewpolecenia dodaj następujący kod.

    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. Znajdź metodę CAnimationWalthroughView::PreCreateWindow , a następnie zastąp ją poniższym kodem.

    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. Znajdź metodę CAnimationWalkthroughView::OnDraw , a następnie zastąp ją poniższym kodem.

    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. Na końcu pliku dodaj następujący kod.

    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. W menu Projekt kliknij pozycję Kreator klas.

  11. W Kreatorze klas MFC w obszarze Nazwa klasy wybierz pozycję CMFCAnimationWalkthroughView.

  12. Na karcie Komunikaty w polu Komunikaty wybierz pozycję WM_ERASEBKGND, kliknij pozycję Dodaj program obsługi, a następnie kliknij przycisk OK.

  13. W pliku MFCAnimationWalkthroughView.cpp zastąp implementację OnEraseBkgnd poniższym kodem, aby zmniejszyć migotanie w animowanym obiekcie podczas ponownego rysowania.

    BOOL CMFCAnimationWalkthroughView::OnEraseBkgnd(CDC* /*pDC*/)
    {
        return TRUE;
    }
    
  14. Zastąp implementacje , CMFCAnimationWalkthroughView::OnAnimationStartforwardCMFCAnimationWalkthroughView::OnAnimationStartbackwardi CMFCAnimationWalkthroughView::OnAnimationStop następującym kodem.

    void CMFCAnimationWalkthroughView::OnAnimationStartforward()
    {
        Animate(TRUE);
    }
    
    void CMFCAnimationWalkthroughView::OnAnimationStartbackward()
    {
        Animate(FALSE);
    }
    
    void CMFCAnimationWalkthroughView::OnAnimationStop()
    {
        IUIAnimationManager* pManager = m_animationController.GetUIAnimationManager();
        if (pManager != NULL)
        {
            pManager->AbandonAllStoryboards();
    
        }
    }
    
  15. Zapisz plik i zamknij go.

Aby wyśrodkować animowany obiekt w oknie

  1. W Eksplorator rozwiązań kliknij dwukrotnie MFCAnimationWalkthroughView.h, aby otworzyć go w celu modyfikacji. Na końcu CMFCAnimationWalkthroughView klasy tuż po definicji m_animationRectdodaj następujący kod.

    BOOL m_bCurrentDirection;
    
  2. Zapisz plik i zamknij go.

  3. W menu Projekt kliknij pozycję Kreator klas.

  4. W Kreatorze klas MFC w obszarze Nazwa klasy wybierz pozycję CMFCAnimationWalkthroughView.

  5. Na karcie Komunikaty w polu Komunikaty wybierz pozycję WM_SIZE, kliknij pozycję Dodaj procedurę obsługi, a następnie kliknij przycisk OK.

  6. W pliku MFCAnimationWalkthroughView.cpp zastąp kod poniższym CMFCAnimationWalkthroughView::OnSize kodem.

    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. Na początku konstruktora dla CMFCAnimationWalkthroughViewpolecenia dodaj następujący kod.

    m_bCurrentDirection = TRUE;
    
  8. Na początku CMFCAnimationWalkthroughView::Animate metody dodaj następujący kod.

    m_bCurrentDirection = bDirection;
    
  9. Zapisz plik i zamknij go.

Aby zweryfikować wyniki

  1. Skompiluj i uruchom aplikację. W menu Animacja kliknij przycisk Start Forward (Rozpocznij do przodu). Powinien zostać wyświetlony prostokąt, a następnie wypełnić obszar środkowy. Po kliknięciu przycisku Rozpocznij do tyłu animacja powinna się odwrócić, a po kliknięciu przycisku Zatrzymaj powinna zostać zatrzymana. Kolor wypełnienia prostokąta powinien ulec zmianie w miarę postępu animacji, a bieżący kolor powinien być wyświetlany w górnej części okna animacji.

Zobacz też

Przewodniki