Tutorial: Agregar animación a un proyecto de MFC

Artículo
01/10/2024

En este tutorial se explica cómo agregar un objeto animado básico a un proyecto de la biblioteca MFC (Microsoft Foundation Class) y Visual C++.

En el tutorial se muestra cómo realizar estas tareas:

Cree una aplicación MFC.
Agregue un menú y, a continuación, agregue comandos para iniciar y detener una animación.
Cree controladores para los comandos iniciar y detener.
Agregue un objeto animado al proyecto.
Centre el objeto animado en la ventana.
Verifique los resultados.

Nota:

Es posible que tu equipo muestre nombres o ubicaciones diferentes para algunos de los elementos de la interfaz de usuario de Visual Studio en las siguientes instrucciones. La edición de Visual Studio que se tenga y la configuración que se utilice determinan estos elementos. Para obtener más información, vea Personalizar el IDE.

Requisitos previos

Para completar este tutorial, debe tener Visual Studio.

Para crear una aplicación MFC

Use el Asistente para aplicaciones MFC para crear una aplicación MFC. Consulte Tutorial: Uso de los nuevos controles de shell de MFC para obtener instrucciones sobre cómo abrir el asistente para su versión de Visual Studio.
En el cuadro nombre, escriba MFCAnimationWalkthrough. Haga clic en OK.
En el cuadro de diálogo Asistente para aplicaciones MFC, compruebe que el tipo de aplicación es Varios documentos, el estilo del proyecto es Visual Studio y la opción Admisibilidad de la arquitectura de documento/vista está seleccionada. Haga clic en Finalizar

En el menú Ver, apunte a Otras ventanas y luego haga clic en Vista de recursos.
En Vista de recursos, vaya a la carpeta Menú y ábrala. Haga doble clic en el recurso IDR_MFCAnimationWalkthroughTYPE para abrirlo para su modificación.
En la barra de menús, en el cuadro Escribir aquí , escriba A&nimation para crear un menú Animación.
En Animación, en el cuadro Escribir aquí , escriba Start &Forward para crear un comando Start Forward.
En Iniciar avance, en el cuadro Escribir aquí , escriba Start &Backward.
En Iniciar atrás, en el cuadro Escribir aquí , escriba S&top para crear un comando Stop.
Guarde MFCAnimationWalkthrough.rc y ciérrelo.
En el Explorador de soluciones, haga doble clic en MainFrm.cpp para abrirlo para su modificación. En el método CMainFrame::OnCreate, busque la sección que tiene varias llamadas a lstBasicCommands.AddTail. Justo después de esa sección, agregue el código siguiente.
```
lstBasicCommands.AddTail(ID_ANIMATION_STARTFORWARD);
lstBasicCommands.AddTail(ID_ANIMATION_STARTBACKWARD);
lstBasicCommands.AddTail(ID_ANIMATION_STOP);
```
Guarde el archivo y ciérrelo.

Para crear controladores de los comandos iniciar y detener

En el menú Proyecto, elija Asistente para clases.
En el Asistente para clases MFC, en Nombre de clase, seleccione CMFCAnimationWalkthroughView.
En la pestaña Comandos, en el cuadro Id. de objeto, seleccione ID_ANIMATION_STARTFORWARD y, a continuación, en el cuadro Mensajes, seleccione COMANDO. Haga clic en Agregar controlador.
En el cuadro de diálogo Agregar función miembro, haga clic en Aceptar.
En el cuadro Id. de objeto, seleccione ID_ANIMATION_STARTBACKWARD y, a continuación, en el cuadro Mensajes, seleccione COMMAND. Haga clic en Agregar controlador.
En el cuadro de diálogo Agregar función miembro, haga clic en Aceptar.
En el cuadro ID de objeto, seleccione ID_ANIMATION_STOP y, a continuación, en el cuadro Mensajes, seleccione COMMAND. Haga clic en Agregar controlador y, a continuación, en Aceptar.
En el cuadro de diálogo Agregar función miembro, haga clic en Aceptar.
En el Asistente para clases MFC, haga clic en Aceptar.
Guarde MFCAnimationWalkthroughView.cpp, que está abierto en el editor, pero no lo cierre.

Para agregar un objeto animado al proyecto

En Explorador de soluciones, haga doble clic en MFCAnimationWalkthroughView.h para abrirlo y modificarlo. Justo antes de la definición de la clase CMFCAnimationWalkthroughView, agregue el código siguiente para crear un controlador de animación personalizado que controlará conflictos de programación con el objeto de animación.
```
class CCustomAnimationController : public CAnimationController
{
public:
    CCustomAnimationController()
    {
    }

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

Al final de la clase CMFCAnimationWalkthroughView, agregue el código siguiente.

CCustomAnimationController m_animationController;
CAnimationColor m_animationColor;
CAnimationRect m_animationRect;

Antes de la línea DECLARE_MESSAGE_MAP(), agregue el siguiente código.
```
void Animate(BOOL bDirection);
```
Guarde el archivo y ciérrelo.
En MFCAnimationWalkthroughView.cpp, en la parte superior del archivo después de las instrucciones #include, pero antes de cualquier método de clase, agregue el código siguiente.
```
static int nAnimationGroup = 0;
static int nInfoAreaHeight = 40;
```

Al final del constructor de CMFCAnimationWalkthroughView, agregue el siguiente código.

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);

Busque el método de CAnimationWalthroughView::PreCreateWindow y, a continuación, reemplácelo por el código siguiente.

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);
}

Busque el método de CAnimationWalkthroughView::OnDraw y, a continuación, reemplácelo por el código siguiente.

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);
}

Al final del archivo, agregue el siguiente código.

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);
}

En el menú Proyecto, elija Asistente para clases.
En el Asistente para clases MFC, en Nombre de clase, seleccione CMFCAnimationWalkthroughView.
En la pestaña Mensajes, en el cuadro Mensajes, seleccione WM_ERASEBKGND, haga clic en Agregar controlador y, a continuación, haga clic en Aceptar.
En MFCAnimationWalkthroughView.cpp, reemplace la implementación de OnEraseBkgnd por el código siguiente para reducir el parpadeo en el objeto animado cuando se vuelva a dibujar.
```
BOOL CMFCAnimationWalkthroughView::OnEraseBkgnd(CDC* /*pDC*/)
{
    return TRUE;
}
```

Reemplace las implementaciones de CMFCAnimationWalkthroughView::OnAnimationStartforward, CMFCAnimationWalkthroughView::OnAnimationStartbackward y CMFCAnimationWalkthroughView::OnAnimationStop por el siguiente código.

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

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

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

    }
}

Guarde el archivo y ciérrelo.

Para centrar el objeto animado en la ventana

En Explorador de soluciones, haga doble clic en MFCAnimationWalkthroughView.h para abrirlo y modificarlo. Al final de la clase CMFCAnimationWalkthroughView, justo después de la definición de m_animationRect, agregue el código siguiente.
```
BOOL m_bCurrentDirection;
```
Guarde el archivo y ciérrelo.
En el menú Proyecto, elija Asistente para clases.
En el Asistente para clases MFC, en Nombre de clase, seleccione CMFCAnimationWalkthroughView.
En la pestaña Mensajes, en el cuadro Mensajes, seleccione WM_SIZE, haga clic en Agregar controlador y, a continuación, haga clic en Aceptar.

En MFCAnimationWalkthroughView.cpp, reemplace el código de CMFCAnimationWalkthroughView::OnSize por el código siguiente.

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);
    }
}

Al comienzo del constructor de CMFCAnimationWalkthroughView, agregue el siguiente código.
```
m_bCurrentDirection = TRUE;
```
Al principio del método CMFCAnimationWalkthroughView::Animate, agregue el código siguiente.
```
m_bCurrentDirection = bDirection;
```
Guarde el archivo y ciérrelo.

Para comprobar los resultados

Compile y ejecute la aplicación. En el menú Animación, haga clic en Iniciar hacia adelante. Debe aparecer un rectángulo y, a continuación, llenar el área central. Al hacer clic en Iniciar hacia atrás, la animación debe invertirse y, al hacer clic en Detener, debe detenerse. El color de relleno del rectángulo debe cambiar a medida que avanza la animación y el color actual debe mostrarse en la parte superior de la ventana de animación.

Consulte también

Tutoriales

Compartir a través de