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

Artigo
06/10/2015

Este passo a passo ensina como adicionar um objeto animado básico do Visual C++, projeto de biblioteca de classes do Microsoft (MFC).

O passo a passo mostra como executar essas tarefas:

Crie um aplicativo MFC.
Adicionar um menu e adicione comandos iniciar e interromper uma animação.
Criar manipuladores para os comandos de início e de parada.
Adicionar um objeto animado ao projeto.
Centralize o objeto animado na janela.
Verificar os resultados.

Dica

Seu computador pode mostrar nomes ou locais diferentes para alguns dos elementos da 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 configurações de desenvolvimento no Visual Studio.

Pré-requisitos

Para concluir este passo a passo, você deve ter o Visual Studio.

Para criar um aplicativo de MFC

No menu Arquivo, aponte para Novo e clique em Projeto.
Na caixa de diálogo de Novo Projeto , no painel esquerdo em Modelos Instalados, expanda Visual C++ e selecione MFC. No painel central, Aplicativo do MFCselecione. Na caixa de Nome , digite MFCAnimationWalkthrough. Clique em OK.
Na caixa de diálogo de Assistente para Aplicativo do MFC , verifique se Tipo de Aplicativo é Vários documentos, Estilo de projeto é Visual Studio, e a opção de Suporte à arquitetura do documento/exibição é selecionada. Clique em Concluir.

No menu de Exibir , aponte para Outras Janelas e clique em Modo de Exibição de Recurso.
Em Modo de Exibição de Recurso, navegue até a pasta de Menu e abra. Clique duas vezes no recurso de IDR_MFCAnimationWalTYPE para abri-la da alteração.
Na barra de menus, na caixa de Digite Aqui , tipo A&nimation para criar um menu de animação.
Em Animação, na caixa de Digite Aqui , tipo Início &Avançar para criar um comando para iniciar.
Em Início para frente, na caixa de Digite Aqui , tipo Início &Para trás.
Em Início para trás, na caixa de Digite Aqui , tipo S&parte superior para criar um comando de parada.
Salvar MFCAnimationWalkthrough.rc e feche-o.
Em Gerenciador de Soluções, clique duas vezes em para abri-lo MainFrm.cpp da alteração. No método de CMainFrame::OnCreate , localize a seção que tem várias chamadas a lstBasicCommands.AddTail. Imediatamente depois que 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 de início e término

No menu de Projeto , clique em Assistente de classe.
Em Assistente de Classe MFC, em Nome da classe, CMFCAnimationWalkthroughViewselecione.
Na guia de Comandos , na caixa de IDs de objeto , em ID_ANIMATION_STARTFORWARDselecione e, na caixa de Mensagens , COMMANDselecione. Clique Adicionar Manipulador.
Na caixa de diálogo de Adicionar a Função de Membro , clique OK.
Na caixa de IDs de objeto , em ID_ANIMATION_STARTBACKWARDselecione e, na caixa de Mensagens , COMMANDselecione. Clique Adicionar Manipulador.
Na caixa de diálogo de Adicionar a Função de Membro , clique OK.
Na caixa de IDs de objeto , em ID_ANIMATION_STOPselecione e, na caixa de Mensagens , COMMANDselecione. Clique em Adicionar Manipulador e clique em OK.
Na caixa de diálogo de Adicionar a Função de Membro , clique OK.
Em Assistente de Classe MFC, clique OK.
Salvar MFCAnimationWalkthroughView.cpp, que está aberto no editor, mas não feche o.

Para adicionar um objeto ao projeto animado

No Solution Explorer, clique duas vezes em para abri-lo MFCAnimationWalkthroughView.h da alteração. Imediatamente antes da definição da classe de CMFCAnimationWalkthroughView , adicione o seguinte código para criar um controlador de animação personalizado que trata conflitos de programar 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 de CMFCAnimationWalkthroughView , adicione o seguinte código.

    CCustomAnimationController m_animationController;
    CAnimationColor m_animationColor; 
    CAnimationRect m_animationRect;

Depois da linha de 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 depois que as instruções de #include mas antes de classificação de alguns métodos, adicione o seguinte código.
```
static int nAnimationGroup = 0;
static int nInfoAreaHeight = 40;
```

No final do construtor para CMFCAnimationWalkthroughView, adicione o seguinte 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);

Localize o método de CAnimationWalthroughView::PreCreateWindow e substitua-o com o 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 de CAnimationWalkthroughView::OnDraw e substitua-o com o 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);
}

No final do arquivo, adicione o seguinte 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);
}

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

Substituir as implementações de CMFCAnimationWalkthroughView::OnAnimationStartforward, de CMFCAnimationWalkthroughView::OnAnimationStartbackward, e de CMFCAnimationWalkthroughView::OnAnimationStop com o código a seguir.

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 para abri-lo MFCAnimationWalkthroughView.h da alteração. No final da classe de CMFCAnimationWalkthroughView , imediatamente depois da definição de m_animationRect, adicione o seguinte código.
```
    BOOL m_bCurrentDirection;
```
Salve o arquivo e feche-o.
No menu de Projeto , clique em Assistente de classe.
Em Assistente de Classe MFC, em Nome da classe, CMFCAnimationWalkthroughViewselecione.
Na guia de Mensagens , na caixa de Mensagens , WM_SIZEselecione, clique em Adicionar Manipulador, e clique em OK.

Em MFCAnimationWalkthroughView.cpp, substitua o código para CMFCAnimationWalkthroughView::OnSize com o 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 seguinte código.
```
    m_bCurrentDirection = TRUE;
```
No início do método de CMFCAnimationWalkthroughView::Animate , adicione o seguinte código.
```
    m_bCurrentDirection = bDirection;
```
Salve o arquivo e feche-o.

Para verificar os resultados

Criar e executar o aplicativo. No menu de Animação , clique em Início para frente. Um retângulo deve aparecer e depois preencher a área do centro. Quando você clicar em, a Início para trásanimação deve reverter e, quando você clicar em Parar, deve parar. A cor de preenchimento do retângulo deve ser alterada desde que a animação progride, e a cor atual deve ser exibida na parte superior da janela de animação.

Consulte também

Outros recursos

Explicações passo a passo (MFC)

Compartilhar via