Instruções passo a passo: adicionando animação a um projeto MFC

Artigo
01/10/2024

Este passo a passo ensina como adicionar um objeto animado básico a um projeto da biblioteca Microsoft Foundation Class (MFC) no Visual C++.

Este guia passo a passo mostra como realizar essas tarefas:

Criar um aplicativo MFC.
Adicionar um menu e, em seguida, adicionar comandos para iniciar e parar uma animação.
Criar manipuladores para os comandos iniciar e parar.
Adicionar um objeto animado ao projeto.
Centralizar o objeto animado na janela.
Verifique os resultados.

Observação

Seu computador pode mostrar diferentes nomes ou locais para alguns dos elementos de interface do usuário do Visual Studio nas instruções a seguir. A edição do Visual Studio que você possui e as configurações que você usa determinam esses elementos. Para obter mais informações, consulte Personalizando o IDE.

Pré-requisitos

Para concluir esta instrução passo a passo, você precisará do Visual Studio.

Para criar um aplicativo MFC

Use o Assistente de Aplicativo MFC para criar um aplicativo MFC. Confira Guia passo a passo: usar os novos controles de shell do MFC para instruções sobre como abrir o assistente em sua versão do Visual Studio.
Na caixa Nome, digite MFCAnimationWalkthrough. Clique em OK.
Na caixa de diálogo Assistente de Aplicativo MFC, verifique se o Tipo de Aplicativo é Vários Documentos, o Estilo do Projeto é Visual Studio e se a opção Suporte à arquitetura de Documento/Exibição está selecionada. Clique em Concluir.

No menu Exibir, aponte para Outras Janelas e, em seguida, clique em Modo de Exibição de Recursos.
No Modo de Exibição de Recursos, navegue até a pasta Menu e abra-a. Clique duas vezes no recurso IDR_MFCAnimationWalkthroughTYPE para abri-lo para modificação.
Na barra de menus, na caixa Digitar aqui , digite A&nimation para criar um menu Animação.
Em Animação, na caixa Tipo Aqui , digite Iniciar e Encaminhar para criar um comando Iniciar Avançar.
Em Iniciar para a frente, na caixa Tipo aqui, digite Iniciar e retroceder.
Em Iniciar para trás, na caixa Digite aqui, digite S&top para criar um comando Parar.
Salve MFCAnimationWalkthrough.rc e feche-o.
Em Gerenciador de Soluções, clique duas vezes em MainFrm.cpp para abri-lo para modificação. No método CMainFrame::OnCreate, localize a seção que tem várias chamadas para lstBasicCommands.AddTail. Logo após essa seção, adicione o código a seguir.
```
lstBasicCommands.AddTail(ID_ANIMATION_STARTFORWARD);
lstBasicCommands.AddTail(ID_ANIMATION_STARTBACKWARD);
lstBasicCommands.AddTail(ID_ANIMATION_STOP);
```
Salve o arquivo e feche-o.

Para criar manipuladores para os comandos iniciar e parar

No menu Projeto, clique em Assistente de classe.
No Assistente de Classe MFC, em Nome da Classe, selecione CMFCAnimationWalkthroughView.
Na guia Comandos, na caixa IDs de Objeto, selecione ID_ANIMATION_STARTFORWARD e, na caixa Mensagens, selecione COMMAND. Clique em Adicionar manipulador.
Na caixa de diálogo Adicionar função membro, clique em OK.
Na caixa IDs de Objeto, selecione ID_ANIMATION_STARTBACKWARD e, na caixa Mensagens, selecione COMMAND. Clique em Adicionar manipulador.
Na caixa de diálogo Adicionar função membro, clique em OK.
Na caixa IDs de Objeto, selecione ID_ANIMATION_STOP e, na caixa Mensagens, selecione COMMAND. Clique em Adicionar identificador e, em seguida, OK.
Na caixa de diálogo Adicionar função membro, clique em OK.
No Assistente de Classe MFC, clique em OK.
Salve MFCAnimationWalkthroughView.cpp, que está aberto no editor, mas não o feche.

Para adicionar um objeto animado ao projeto

Em Gerenciador de Soluções, clique duas vezes em MFCAnimationWalkthroughView.h para abri-lo para modificação. Pouco antes da definição da classe CMFCAnimationWalkthroughView, adicione o código a seguir para criar um controlador de animação personalizado que lidará com conflitos de agendamento com o objeto de animação.
```
class CCustomAnimationController : public CAnimationController
{
public:
    CCustomAnimationController()
    {
    }

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

No final da classe CMFCAnimationWalkthroughView, adicione o código a seguir.

CCustomAnimationController m_animationController;
CAnimationColor m_animationColor;
CAnimationRect m_animationRect;

Após a linha DECLARE_MESSAGE_MAP(), adicione o seguinte código.
```
void Animate(BOOL bDirection);
```
Salve o arquivo e feche-o.
Em MFCAnimationWalkthroughView.cpp, na parte superior do arquivo após as instruções #include, mas antes de qualquer método de classe, adicione o código a seguir.
```
static int nAnimationGroup = 0;
static int nInfoAreaHeight = 40;
```

No final do construtor para CMFCAnimationWalkthroughView, adicione o código a seguir.

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

Localize o método CAnimationWalthroughView::PreCreateWindow e substitua-o pelo código a seguir.

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

Localize o método CAnimationWalkthroughView::OnDraw e substitua-o pelo código a seguir.

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

Ao final do arquivo, adicione o código a seguir.

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

No menu Projeto, clique em Assistente de classe.
No Assistente de Classe MFC, em Nome da Classe, selecione CMFCAnimationWalkthroughView.
Na guia Mensagens, na caixa Mensagens, selecione WM_ERASEBKGND, clique em Adicionar manipulador e clique em OK.
Em MFCAnimationWalkthroughView.cpp, substitua a implementação de OnEraseBkgnd pelo código a seguir para reduzir a tremulação no objeto animado quando for redesenhado.
```
BOOL CMFCAnimationWalkthroughView::OnEraseBkgnd(CDC* /*pDC*/)
{
    return TRUE;
}
```

Substitua a implementação de CMFCAnimationWalkthroughView::OnAnimationStartforward, CMFCAnimationWalkthroughView::OnAnimationStartbackward e CMFCAnimationWalkthroughView::OnAnimationStop pelo seguinte 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();

    }
}

Salve o arquivo e feche-o.

Para centralizar o objeto animado na janela

Em Gerenciador de Soluções, clique duas vezes em MFCAnimationWalkthroughView.h para abri-lo para modificação. No final da classe CMFCAnimationWalkthroughView, logo após a definição de m_animationRect, adicione o código a seguir.
```
BOOL m_bCurrentDirection;
```
Salve o arquivo e feche-o.
No menu Projeto, clique em Assistente de classe.
No Assistente de Classe MFC, em Nome da Classe, selecione CMFCAnimationWalkthroughView.
Na guia Mensagens, na caixa Mensagens, selecione WM_SIZE, clique em Adicionar manipulador e clique em OK.

Em MFCAnimationWalkthroughView.cpp, substitua o código de CMFCAnimationWalkthroughView::OnSize pelo código a seguir.

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

No início do construtor para CMFCAnimationWalkthroughView, adicione o código a seguir.
```
m_bCurrentDirection = TRUE;
```
No início do método CMFCAnimationWalkthroughView::Animate, adicione o código a seguir.
```
m_bCurrentDirection = bDirection;
```
Salve o arquivo e feche-o.

Para verificar os resultados

Compile e execute o aplicativo. No menu Animação, clique em Iniciar regularmente. Um retângulo deverá aparecer e, em seguida, preencher a área central. Ao clicar em Iniciar em retrocesso, a animação deverá ser revertida e, quando você clicar em Parar, ela deverá parar. A cor de preenchimento do retângulo deve mudar conforme a animação progride e a cor atual deve ser exibida na parte superior da janela de animação.

Confira também

Passo a passo

Compartilhar via