Freigeben über

Exemplarische Vorgehensweise: Hinzufügen von Animationen zu einem MFC-Projekt

  • Artikel

In dieser exemplarischen Vorgehensweise erfahren Sie, wie Sie einem Visual C++-, Microsoft Foundation Class Library (MFC)-Projekt ein einfaches animiertes Objekt hinzufügen.

Die exemplarische Vorgehensweise zeigt, wie Sie diese Aufgaben ausführen:

  • Erstellen Sie eine MFC-Anwendung.

  • Fügen Sie ein Menü hinzu, und fügen Sie dann Befehle hinzu, um eine Animation zu starten und zu beenden.

  • Erstellen Sie Handler für die Start- und Stoppbefehle.

  • Fügen Sie dem Projekt ein animiertes Objekt hinzu.

  • Zentrieren Sie das animierte Objekt im Fenster.

  • Überprüfen Sie die Ergebnisse.

Hinweis

Auf Ihrem Computer werden möglicherweise andere Namen oder Speicherorte für die Benutzeroberflächenelemente von Visual Studio angezeigt als die in den folgenden Anweisungen aufgeführten. Diese Elemente sind von der jeweiligen Visual Studio-Version und den verwendeten Einstellungen abhängig. Weitere Informationen finden Sie unter Personalisieren der IDE.

Voraussetzungen

Um diese exemplarische Vorgehensweise abzuschließen, müssen Sie über Visual Studio verfügen.

So erstellen Sie eine MFC-Anwendung

  1. Verwenden Sie den MFC-Anwendungs-Assistenten , um eine MFC-Anwendung zu erstellen. Siehe Exemplarische Vorgehensweise: Verwenden der neuen MFC-Shellsteuerelemente für Anweisungen zum Öffnen des Assistenten für Ihre Version von Visual Studio.

  2. Geben Sie im Feld "Name " den Namen "MFCAnimationWalkthrough" ein. Klicken Sie auf OK.

  3. Überprüfen Sie im Dialogfeld "MFC-Anwendungs-Assistent", ob der Anwendungstyp "Mehrere Dokumente", "Projektformat" Visual Studio ist und die Option "Dokument-/Ansichtsarchitektur" ausgewählt ist. Klicken Sie auf Fertig stellen.

So fügen Sie ein Menü hinzu, und fügen Sie dann Befehle hinzu, um eine Animation zu starten und zu beenden

  1. Zeigen Sie im Menü "Ansicht" auf "Andere Fenster" , und klicken Sie dann auf "Ressourcenansicht".

  2. Navigieren Sie in der Ressourcenansicht zum Menüordner, und öffnen Sie ihn. Doppelklicken Sie auf die IDR_MFCAnimationWalkthroughTYPE Ressource, um sie zur Änderung zu öffnen.

  3. Geben Sie in der Menüleiste im Feld "Hier eingeben " A&nimation ein, um ein Animationsmenü zu erstellen.

  4. Geben Sie unter "Animation" im Feld "Hier eingeben" den Befehl "Start" und "Weiterleiten" ein, um einen Befehl "Vorwärts starten" zu erstellen.

  5. Geben Sie unter "Vorwärts starten" im Feld "Hier eingeben" "Start" & "Rückwärts" ein.

  6. Geben Sie unter "Zurück starten" im Feld "Hier eingeben" S&top ein, um einen Stoppbefehl zu erstellen.

  7. Speichern Sie MFCAnimationWalkthrough.rc, und schließen Sie es.

  8. Doppelklicken Sie in Projektmappen-Explorer auf "MainFrm.cpp", um sie zur Änderung zu öffnen. Suchen Sie in der CMainFrame::OnCreate Methode den Abschnitt, der mehrere Aufrufe enthält lstBasicCommands.AddTail. Fügen Sie direkt hinter diesem Abschnitt den folgenden Code hinzu.

    lstBasicCommands.AddTail(ID_ANIMATION_STARTFORWARD);
lstBasicCommands.AddTail(ID_ANIMATION_STARTBACKWARD);
lstBasicCommands.AddTail(ID_ANIMATION_STOP);

  9. Speichern Sie die Datei, und schließen Sie sie.

So erstellen Sie Handler für die Start- und Stoppbefehle

  1. Klicken Sie im Menü "Projekt " auf " Kurs-Assistent".

  2. Wählen Sie im MFC-Klassen-Assistenten unter Dem Klassennamen CMFCAnimationWalkthroughView aus.

  3. Wählen Sie auf der Registerkarte "Befehle" im Feld "Objekt-IDs" ID_ANIMATION_STARTFORWARD und dann im Feld "Nachrichten" die Option BEFEHL aus. Klicken Sie auf "Handler hinzufügen".

  4. Klicken Sie im Dialogfeld "Memberfunktion hinzufügen" auf "OK".

  5. Wählen Sie im Feld "Objekt-IDs" ID_ANIMATION_STARTBACKWARD und dann im Feld "Nachrichten" die Option BEFEHL aus. Klicken Sie auf "Handler hinzufügen".

  6. Klicken Sie im Dialogfeld "Memberfunktion hinzufügen" auf "OK".

  7. Wählen Sie im Feld "Objekt-IDs" ID_ANIMATION_STOP und dann im Feld "Nachrichten" die Option BEFEHL aus. Klicken Sie auf "Handler hinzufügen" und dann auf "OK".

  8. Klicken Sie im Dialogfeld "Memberfunktion hinzufügen" auf "OK".

  9. Klicken Sie im MFC-Klassen-Assistenten auf "OK".

  10. Speichern Sie MFCAnimationWalkthroughView.cpp, das im Editor geöffnet ist, aber schließen Sie es nicht.

So fügen Sie dem Projekt ein animiertes Objekt hinzu

  1. Doppelklicken Sie in Projektmappen-Explorer auf MFCAnimationWalkthroughView.h, um sie zur Änderung zu öffnen. Fügen Sie unmittelbar vor der Definition der CMFCAnimationWalkthroughView Klasse den folgenden Code hinzu, um einen benutzerdefinierten Animationscontroller zu erstellen, der Terminplanungskonflikte mit dem Animationsobjekt behandelt.

    class CCustomAnimationController : public CAnimationController
{
public:
    CCustomAnimationController()
    {
    }

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

  2. Fügen Sie am Ende der CMFCAnimationWalkthroughView Klasse den folgenden Code hinzu.

    CCustomAnimationController m_animationController;
CAnimationColor m_animationColor;
CAnimationRect m_animationRect;

  3. Fügen Sie nach der DECLARE_MESSAGE_MAP() Zeile den folgenden Code hinzu.

    void Animate(BOOL bDirection);

  4. Speichern Sie die Datei, und schließen Sie sie.

  5. Fügen Sie in MFCAnimationWalkthroughView.cpp am Anfang der Datei nach den #include Anweisungen, aber vor klassenmethoden den folgenden Code hinzu.

    static int nAnimationGroup = 0;
static int nInfoAreaHeight = 40;

  6. Fügen Sie am Ende des Konstruktors den CMFCAnimationWalkthroughViewfolgenden Code hinzu.

    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. Suchen Sie die CAnimationWalthroughView::PreCreateWindow Methode, und ersetzen Sie sie dann durch den folgenden Code.

    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. Suchen Sie die CAnimationWalkthroughView::OnDraw Methode, und ersetzen Sie sie dann durch den folgenden Code.

    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. Fügen Sie am Ende der Datei den folgenden Code hinzu.

    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. Klicken Sie im Menü "Projekt " auf " Kurs-Assistent".

  11. Wählen Sie im MFC-Klassen-Assistenten unter Dem Klassennamen CMFCAnimationWalkthroughView aus.

  12. Wählen Sie auf der Registerkarte "Nachrichten" im Feld "Nachrichten" WM_ERASEBKGND aus, klicken Sie auf "Handler hinzufügen", und klicken Sie dann auf "OK".

  13. Ersetzen Sie in MFCAnimationWalkthroughView.cpp die Implementierung OnEraseBkgnd durch den folgenden Code, um das Flackern im animierten Objekt zu reduzieren, wenn es neu gezeichnet wird.

    BOOL CMFCAnimationWalkthroughView::OnEraseBkgnd(CDC* /*pDC*/)
{
    return TRUE;
}

  14. Ersetzen Sie die Implementierungen von CMFCAnimationWalkthroughView::OnAnimationStartforward, CMFCAnimationWalkthroughView::OnAnimationStartbackwardund CMFCAnimationWalkthroughView::OnAnimationStop durch den folgenden Code.

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

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

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

    }
}

  15. Speichern Sie die Datei, und schließen Sie sie.

So zentrieren Sie das animierte Objekt im Fenster

  1. Doppelklicken Sie in Projektmappen-Explorer auf MFCAnimationWalkthroughView.h, um sie zur Änderung zu öffnen. Fügen Sie am Ende der CMFCAnimationWalkthroughView Klasse unmittelbar nach der Definition des m_animationRectCodes den folgenden Code hinzu.

    BOOL m_bCurrentDirection;

  2. Speichern Sie die Datei, und schließen Sie sie.

  3. Klicken Sie im Menü "Projekt " auf " Kurs-Assistent".

  4. Wählen Sie im MFC-Klassen-Assistenten unter Dem Klassennamen CMFCAnimationWalkthroughView aus.

  5. Wählen Sie auf der Registerkarte "Nachrichten" im Feld "Nachrichten" WM_SIZE aus, klicken Sie auf "Handler hinzufügen", und klicken Sie dann auf "OK".

  6. Ersetzen Sie in MFCAnimationWalkthroughView.cpp den Code für CMFCAnimationWalkthroughView::OnSize den folgenden Code.

    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. Fügen Sie am Anfang des Konstruktors für CMFCAnimationWalkthroughViewden folgenden Code hinzu.

    m_bCurrentDirection = TRUE;

  8. Fügen Sie am Anfang der CMFCAnimationWalkthroughView::Animate Methode den folgenden Code hinzu.

    m_bCurrentDirection = bDirection;

  9. Speichern Sie die Datei, und schließen Sie sie.

So überprüfen Sie die Ergebnisse

  1. Erstellen Sie die Anwendung, und führen Sie sie aus. Klicken Sie im Menü "Animation" auf "Vorwärts starten". Ein Rechteck sollte angezeigt werden und dann den mittleren Bereich ausfüllen. Wenn Sie auf "Rückwärts starten" klicken, sollte die Animation umgekehrt werden, und wenn Sie auf "Beenden" klicken, sollte sie beendet werden. Die Füllfarbe des Rechtecks sollte sich ändern, wenn die Animation fortschreitet, und die aktuelle Farbe sollte oben im Animationsfenster angezeigt werden.

Siehe auch

Exemplarische Vorgehensweisen