Compartilhar via

Passo a passo: Adicionando animação para um projeto MFC

  • Artigo

Esta explicação passo a passo ensina como adicionar um objeto animado basic para Visual C++, projeto Microsoft Foundation Class Library (MFC).

O passo a passo mostra como realizar estas tarefas:

  • Crie um aplicativo do MFC.

  • Adicionar um menu e, em seguida, adicionar comandos para iniciar e interromper uma animação.

  • Crie manipuladores de comandos start e stop.

  • Adicione um objeto animado para o projeto.

  • O objeto animado na janela do centro.

  • Verificar os resultados.

ObservaçãoObservação

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 Configurações de Visual Studio.

Pré-requisitos

Para concluir esta explicação passo a passo, você deve ter Visual Studio.

Para criar um aplicativo MFC

  1. No menu File, aponte para New e clique Project.

  2. No Novo projeto caixa de diálogo, no painel esquerdo, em Modelos instalados, expanda Visual C++ e selecione MFC.No painel central, selecione Aplicativo MFC.No nome , digite MFCAnimationWalkthrough.Clique em OK.

  3. No MFC Application Wizard diálogo Verifique Tipo de aplicativo é Vários documentos, Projeto estilo é Visual Studioe o suporte a arquitetura de exibição do documento opção é selecionada.Clique em Concluir.

Para adicionar um menu e adicionar comandos para iniciar e interromper uma animação

  1. No modo , aponte para Other Windows e clique em Exibição de recurso.

  2. Em Exibição de recurso, navegue até o Menu pasta e abra-o.Clique duas vezes o IDR_MFCAnimationWalTYPE recurso para abri-lo para modificação.

  3. Na barra de menus na Digite aqui , digite a & nimation para criar um animação menu.

  4. Em animação, no Digite aqui , digite Forward & início para criar um comando Iniciar para frente.

  5. Em Iniciar frente, o Digite aqui , digite Iniciar & para trás.

  6. Em Iniciar com versões anteriores, o Digite aqui , digite I & nterromper para criar um comando de parada.

  7. Salve MFCAnimationWalkthrough.rc e fechá-lo.

  8. Em Solution Explorer, clique duas vezes em MainFrm.cpp para abri-lo para modificação.No CMainFrame::OnCreate método, localize a seção que tem várias chamadas para lstBasicCommands.AddTail.Depois dessa seção, adicione o seguinte código.

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

  9. Salve o arquivo e feche-o.

Para criar manipuladores para iniciar e parar comandos

  1. Sobre o projeto menu, clique em Assistente de classe.

  2. No Assistente de classe do MFC, em o nome da classe, selecione CMFCAnimationWalkthroughView.

  3. No comandos guia, o Identificações de objeto caixa, selecione ID_ANIMATION_STARTFORWARDe na mensagens caixa, selecione COMMAND.Clique em Adicionar manipulador.

  4. No Adicionar função de membro caixa de diálogo, clique em OK.

  5. No Identificações de objeto caixa, selecione ID_ANIMATION_STARTBACKWARDe na mensagens caixa, selecione COMMAND.Clique em Adicionar manipulador.

  6. No Adicionar função de membro caixa de diálogo, clique em OK.

  7. No Identificações de objeto caixa, selecione ID_ANIMATION_STOPe na mensagens caixa, selecione COMMAND.Clique em Adicionar manipulador e clique em OK.

  8. No Adicionar função de membro caixa de diálogo, clique em OK.

  9. No Assistente de classe do MFC, clique OK.

  10. Salvar MFCAnimationWalkthroughView.cpp, que é aberto no editor, mas não a feche.

Para adicionar um objeto animado para o projeto

  1. No Solution Explorer, clique duas vezes em MFCAnimationWalkthroughView.h para abri-lo para modificação.Antes da definição de CMFCAnimationWalkthroughView da classe, adicione o seguinte código para criar um controlador de animação personalizada que manipulará 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;
    }
};

  2. No final de CMFCAnimationWalkthroughView da classe, adicione o seguinte código.

        CCustomAnimationController m_animationController;
    CAnimationColor m_animationColor; 
    CAnimationRect m_animationRect;

  3. Após o DECLARE_MESSAGE_MAP() linha, adicione o seguinte código.

        void Animate(BOOL bDirection);

  4. Salve o arquivo e feche-o.

  5. Em MFCAnimationWalkthroughView.cpp, na parte superior do arquivo após o #include declarações, mas antes de qualquer classe métodos, adicione o seguinte código.

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

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

  7. Localize o CAnimationWalthroughView::PreCreateWindow método e substituí-lo 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);
}

  8. Localize o CAnimationWalkthroughView::OnDraw método e substituí-lo 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);
}

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

  10. Sobre o projeto menu, clique em Assistente de classe.

  11. No Assistente de classe do MFC, em o nome da classe, selecione CMFCAnimationWalkthroughView.

  12. No mensagens guia, o mensagens caixa, selecione WM_ERASEBKGND, clique Adicionar manipuladore clique em OK.

  13. MFCAnimationWalkthroughView.cpp, substitua a implementação de OnEraseBkgnd com o seguinte código para reduzir oscilação no objeto animado quando é redesenhado.

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

  14. Substituir as implementações do CMFCAnimationWalkthroughView::OnAnimationStartforward, CMFCAnimationWalkthroughView::OnAnimationStartbackward, e 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();
    }
}

  15. Salve o arquivo e feche-o.

Para centralizar o objeto animado na janela

  1. Em Solution Explorer, clique duas vezes em MFCAnimationWalkthroughView.h para abri-lo para modificação.No final de CMFCAnimationWalkthroughView classe, logo após a definição de m_animationRect, adicione o seguinte código.

        BOOL m_bCurrentDirection;

  2. Salve o arquivo e feche-o.

  3. Sobre o projeto menu, clique em Assistente de classe.

  4. No Assistente de classe do MFC, em o nome da classe, selecione CMFCAnimationWalkthroughView.

  5. No mensagens guia, o mensagens caixa, selecione WM_SIZE, clique Adicionar manipuladore clique em OK.

  6. Na 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);
    }
}

  7. No início do construtor para CMFCAnimationWalkthroughView, adicione o seguinte código.

        m_bCurrentDirection = TRUE;

  8. No início do CMFCAnimationWalkthroughView::Animate método, adicione o seguinte código.

        m_bCurrentDirection = bDirection;

  9. Salve o arquivo e feche-o.

Para verificar os resultados

  • Criar e executar o aplicativo.Sobre o animação menu, clique em Iniciar frente.Um retângulo deve aparecer e preencher a área central.Quando você clica em Iniciar para trás, a animação deve reverter e quando você clica em Parar, deve parar.A cor de preenchimento do retângulo deve alterar conforme o andamento da animação 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)