Partage via

Procédure pas à pas : ajout d'une animation à un projet MFC

  • Article

Cette procédure pas à pas explique comment ajouter un objet animé de base à un projet MFC (Visual C++, Microsoft Foundation Class Library).

La procédure pas à pas montre comment effectuer ces tâches :

  • Créez une application MFC.

  • Ajoutez un menu, puis ajoutez des commandes pour démarrer et arrêter une animation.

  • Créez des gestionnaires pour les commandes de démarrage et d’arrêt.

  • Ajoutez un objet animé au projet.

  • Centrer l’objet animé dans la fenêtre.

  • Vérifier les résultats.

Remarque

Il est possible que pour certains des éléments de l'interface utilisateur de Visual Studio, votre ordinateur affiche des noms ou des emplacements différents de ceux indiqués dans les instructions suivantes. L'édition de Visual Studio dont vous disposez et les paramètres que vous utilisez déterminent ces éléments. Pour plus d’informations, consultez Personnalisation de l’IDE.

Prérequis

Pour effectuer cette procédure pas à pas, vous devez disposer de Visual Studio.

Pour créer une application MFC

  1. Utilisez l’Assistant Application MFC pour créer une application MFC. Consultez la procédure pas à pas : utilisation des nouveaux contrôles Shell MFC pour obtenir des instructions sur l’ouverture de l’Assistant pour votre version de Visual Studio.

  2. Dans la zone Nom , tapez MFCAnimationWalkthrough. Cliquez sur OK.

  3. Dans la boîte de dialogue Assistant Application MFC, vérifiez que le type d’application est plusieurs documents, que le style de projet est Visual Studio et que l’option de prise en charge de l’architecture document/vue est sélectionnée. Cliquez sur Terminer.

Pour ajouter un menu, puis ajouter des commandes pour démarrer et arrêter une animation

  1. Dans le menu Affichage , pointez sur Autres fenêtres , puis cliquez sur Affichage des ressources.

  2. Dans l’affichage des ressources, accédez au dossier Menu et ouvrez-le. Double-cliquez sur la ressource IDR_MFCAnimationWalkthroughTYPE pour l’ouvrir pour modification.

  3. Dans la barre de menus, dans la zone Type Here , tapez A&nimation pour créer un menu Animation.

  4. Sous Animation, dans la zone Type Here , tapez Start &Forward pour créer une commande Start Forward.

  5. Sous Démarrer vers l’avant, dans la zone Type Here , tapez Start &Backward.

  6. Sous Démarrer vers l’arrière, dans la zone Type Here , tapez S&top pour créer une commande Stop.

  7. Enregistrez MFCAnimationWalkthrough.rc et fermez-le.

  8. Dans Explorateur de solutions, double-cliquez sur MainFrm.cpp pour l’ouvrir pour modification. Dans la CMainFrame::OnCreate méthode, recherchez la section qui a plusieurs appels à lstBasicCommands.AddTail. Juste après cette section, ajoutez le code suivant.

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

  9. Enregistrez le fichier et fermez-le.

Pour créer des gestionnaires pour les commandes start et stop

  1. Dans le menu Projet , cliquez sur Assistant Classe.

  2. Dans l’Assistant Classe MFC, sous Nom de classe, sélectionnez CMFCAnimationWalkthroughView.

  3. Sous l’onglet Commandes , dans la zone ID d’objet, sélectionnez ID_ANIMATION_STARTFORWARD, puis, dans la zone Messages , sélectionnez COMMAND. Cliquez sur Ajouter un gestionnaire.

  4. Dans la boîte de dialogue Ajouter une fonction membre, cliquez sur OK.

  5. Dans la zone ID d’objet, sélectionnez ID_ANIMATION_STARTo ACKWARD, puis, dans la zone Messages, sélectionnez COMMAND. Cliquez sur Ajouter un gestionnaire.

  6. Dans la boîte de dialogue Ajouter une fonction membre, cliquez sur OK.

  7. Dans la zone ID d’objet, sélectionnez ID_ANIMATION_STOP, puis, dans la zone Messages , sélectionnez COMMAND. Cliquez sur Ajouter un gestionnaire , puis sur OK.

  8. Dans la boîte de dialogue Ajouter une fonction membre, cliquez sur OK.

  9. Dans l’Assistant Classe MFC, cliquez sur OK.

  10. Enregistrez MFCAnimationWalkthroughView.cpp, qui est ouvert dans l’éditeur, mais ne le fermez pas.

Pour ajouter un objet animé au projet

  1. Dans Explorateur de solutions, double-cliquez sur MFCAnimationWalkthroughView.h pour l’ouvrir pour modification. Juste avant la définition de la CMFCAnimationWalkthroughView classe, ajoutez le code suivant pour créer un contrôleur d’animation personnalisé qui gère les conflits de planification avec l’objet d’animation.

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

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

  2. À la fin de la CMFCAnimationWalkthroughView classe, ajoutez le code suivant.

    CCustomAnimationController m_animationController;
CAnimationColor m_animationColor;
CAnimationRect m_animationRect;

  3. Après la DECLARE_MESSAGE_MAP() ligne, ajoutez le code suivant.

    void Animate(BOOL bDirection);

  4. Enregistrez le fichier et fermez-le.

  5. Dans MFCAnimationWalkthroughView.cpp, en haut du fichier après les #include instructions, mais avant toutes les méthodes de classe, ajoutez le code suivant.

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

  6. À la fin du constructeur pour CMFCAnimationWalkthroughView, ajoutez le code suivant.

    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. Recherchez la méthode, puis remplacez-la CAnimationWalthroughView::PreCreateWindow par le code suivant.

    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. Recherchez la méthode, puis remplacez-la CAnimationWalkthroughView::OnDraw par le code suivant.

    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. À la fin du fichier, ajoutez le code suivant.

    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. Dans le menu Projet , cliquez sur Assistant Classe.

  11. Dans l’Assistant Classe MFC, sous Nom de classe, sélectionnez CMFCAnimationWalkthroughView.

  12. Sous l’onglet Messages, dans la zone Messages, sélectionnez WM_ERASEBKGND, cliquez sur Ajouter un gestionnaire, puis sur OK.

  13. Dans MFCAnimationWalkthroughView.cpp, remplacez l’implémentation par OnEraseBkgnd le code suivant pour réduire le scintillement dans l’objet animé lorsqu’il est redessiné.

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

  14. Remplacez les implémentations de CMFCAnimationWalkthroughView::OnAnimationStartforward, CMFCAnimationWalkthroughView::OnAnimationStartbackwardet CMFCAnimationWalkthroughView::OnAnimationStop par le code suivant.

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

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

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

    }
}

  15. Enregistrez le fichier et fermez-le.

Pour centrer l’objet animé dans la fenêtre

  1. Dans Explorateur de solutions, double-cliquez sur MFCAnimationWalkthroughView.h pour l’ouvrir pour modification. À la fin de la CMFCAnimationWalkthroughView classe, juste après la définition de m_animationRect, ajoutez le code suivant.

    BOOL m_bCurrentDirection;

  2. Enregistrez le fichier et fermez-le.

  3. Dans le menu Projet , cliquez sur Assistant Classe.

  4. Dans l’Assistant Classe MFC, sous Nom de classe, sélectionnez CMFCAnimationWalkthroughView.

  5. Sous l’onglet Messages, dans la zone Messages, sélectionnez WM_SIZE, cliquez sur Ajouter un gestionnaire, puis sur OK.

  6. Dans MFCAnimationWalkthroughView.cpp, remplacez le code par CMFCAnimationWalkthroughView::OnSize le code suivant.

    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. Au début du constructeur pour CMFCAnimationWalkthroughView, ajoutez le code suivant.

    m_bCurrentDirection = TRUE;

  8. Au début de la CMFCAnimationWalkthroughView::Animate méthode, ajoutez le code suivant.

    m_bCurrentDirection = bDirection;

  9. Enregistrez le fichier et fermez-le.

Pour vérifier les résultats

  1. Générez et exécutez l’application. Dans le menu Animation, cliquez sur Démarrer vers l’avant. Un rectangle doit apparaître, puis remplir la zone centrale. Lorsque vous cliquez sur Démarrer vers l’arrière, l’animation doit être inversée et quand vous cliquez sur Arrêter, elle doit s’arrêter. La couleur de remplissage du rectangle doit changer à mesure que l’animation progresse, et la couleur actuelle doit être affichée en haut de la fenêtre d’animation.

Voir aussi

Procédures pas à pas