Compartilhar via


Passo a passo: adicionando animação a um projeto MFC

Este passo a passo ensina como adicionar um objeto animado básico a um projeto da Biblioteca de Classes do Microsoft Foundation (MFC) do Visual C++.

O passo a passo mostra como realizar essas tarefas:

  • Crie um aplicativo MFC.

  • Adicione um menu e adicione comandos para iniciar e parar uma animação.

  • Crie manipuladores para os comandos iniciar e parar.

  • Adicione um objeto animado ao projeto.

  • Centralize o objeto animado na janela.

  • Verifique os resultados.

Observação

Seu computador pode mostrar nomes ou locais diferentes 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ê tem e as configurações que você usa determinam esses elementos. Para obter mais informações, consulte Personalizando o IDE.

Pré-requisitos

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

Para criar um aplicativo MFC

  1. Use o Assistente de Aplicativo MFC para criar um aplicativo MFC. Consulte Passo a passo: usando os novos controles de shell do MFC para obter instruções sobre como abrir o assistente para sua versão do Visual Studio.

  2. Na caixa Nome , digite MFCAnimationWalkthrough. Clique em OK.

  3. 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 de suporte à arquitetura de Documento/Exibição está selecionada. Clique em Concluir.

Para adicionar um menu e, em seguida, adicionar comandos para iniciar e parar uma animação

  1. No menu Exibir , aponte para Outras Janelas e clique em Modo de Exibição de Recurso.

  2. No Modo de Exibição de Recurso, navegue até a pasta Menu e abra-a. Clique duas vezes no recurso IDR_MFCAnimationWalkthroughTYPE para abri-lo para modificação.

  3. Na barra de menus, na caixa Digite Aqui , digite A&nimation para criar um menu Animação.

  4. Em Animação, na caixa Digite Aqui , digite Iniciar &Encaminhar para criar um comando Start Forward.

  5. Em Start Forward, na caixa Digite Aqui , digite Iniciar & Voltar.

  6. Em Iniciar para Trás, na caixa Digite Aqui , digite S&top para criar um comando Stop.

  7. Salve MFCAnimationWalkthrough.rc e feche-o.

  8. No Gerenciador de Soluções, clique duas vezes MainFrm.cpp para abri-lo para modificação. CMainFrame::OnCreate No método, 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);
    
  9. Salve o arquivo e feche-o.

Para criar manipuladores para os comandos iniciar e parar

  1. No menu Projeto , clique em Assistente de Classe.

  2. No Assistente de Classe MFC, em Nome da Classe, selecione CMFCAnimationWalkthroughView.

  3. Na guia Comandos , na caixa IDs de Objeto , selecione ID_ANIMATION_STARTFORWARD e, na caixa Mensagens , selecione COMMAND. Clique em Adicionar Manipulador.

  4. Na caixa de diálogo Adicionar Função Membro , clique em OK.

  5. Na caixa IDs de Objeto , selecione ID_ANIMATION_STARTBACKWARD e, na caixa Mensagens , selecione COMMAND. Clique em Adicionar Manipulador.

  6. Na caixa de diálogo Adicionar Função Membro , clique em OK.

  7. Na caixa IDs de Objeto , selecione ID_ANIMATION_STOP e, na caixa Mensagens , selecione COMMAND. Clique em Adicionar Manipulador e clique em OK.

  8. Na caixa de diálogo Adicionar Função Membro , clique em OK.

  9. No Assistente de Classe MFC, clique em OK.

  10. Salve MFCAnimationWalkthroughView.cpp, que está aberto no editor, mas não feche-o.

Para adicionar um objeto animado ao projeto

  1. No Gerenciador de Soluções, clique duas vezes em MFCAnimationWalkthroughView.h para abri-lo para modificação. Pouco antes da definição da classe, adicione o código a CMFCAnimationWalkthroughView 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;
        }
    };
    
  2. No final da CMFCAnimationWalkthroughView classe, adicione o código a seguir.

    CCustomAnimationController m_animationController;
    CAnimationColor m_animationColor;
    CAnimationRect m_animationRect;
    
  3. Após a DECLARE_MESSAGE_MAP() linha, adicione o código a seguir.

    void Animate(BOOL bDirection);
    
  4. Salve o arquivo e feche-o.

  5. Em MFCAnimationWalkthroughView.cpp, na parte superior do arquivo após as #include instruções, mas antes de qualquer método de classe, adicione o código a seguir.

    static int nAnimationGroup = 0;
    static int nInfoAreaHeight = 40;
    
  6. 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);
    
  7. Localize o CAnimationWalthroughView::PreCreateWindow método e, em seguida, 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);
    }
    
  8. Localize o CAnimationWalkthroughView::OnDraw método e, em seguida, 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);
    }
    
  9. No 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);
    }
    
  10. No menu Projeto , clique em Assistente de Classe.

  11. No Assistente de Classe MFC, em Nome da Classe, selecione CMFCAnimationWalkthroughView.

  12. Na guia Mensagens , na caixa Mensagens , selecione WM_ERASEBKGND, clique em Adicionar Manipulador e clique em OK.

  13. Em MFCAnimationWalkthroughView.cpp, substitua a implementação pelo OnEraseBkgnd código a seguir para reduzir a cintilação no objeto animado quando for redesenhado.

    BOOL CMFCAnimationWalkthroughView::OnEraseBkgnd(CDC* /*pDC*/)
    {
        return TRUE;
    }
    
  14. Substitua as implementações de CMFCAnimationWalkthroughView::OnAnimationStartforward, CMFCAnimationWalkthroughView::OnAnimationStartbackwarde CMFCAnimationWalkthroughView::OnAnimationStop pelo 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. No Gerenciador de Soluções, clique duas vezes em MFCAnimationWalkthroughView.h para abri-lo para modificação. No final da CMFCAnimationWalkthroughView classe, logo após a definição de m_animationRect, adicione o código a seguir.

    BOOL m_bCurrentDirection;
    
  2. Salve o arquivo e feche-o.

  3. No menu Projeto , clique em Assistente de Classe.

  4. No Assistente de Classe MFC, em Nome da Classe, selecione CMFCAnimationWalkthroughView.

  5. Na guia Mensagens , na caixa Mensagens , selecione WM_SIZE, clique em Adicionar Manipulador e clique em OK.

  6. Em MFCAnimationWalkthroughView.cpp, substitua o código pelo CMFCAnimationWalkthroughView::OnSize 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 código a seguir.

    m_bCurrentDirection = TRUE;
    
  8. No início do CMFCAnimationWalkthroughView::Animate método, adicione o código a seguir.

    m_bCurrentDirection = bDirection;
    
  9. Salve o arquivo e feche-o.

Para verificar os resultados

  1. Crie e execute o aplicativo. No menu Animação , clique em Iniciar Para Frente. Um retângulo deve aparecer e preencher a área central. Quando você clicar em Iniciar Para Trás, a animação deverá ser revertida e, quando você clicar em Parar, ela deverá parar. A cor de preenchimento do retângulo deve ser alterada à medida que a animação progride e a cor atual deve ser exibida na parte superior da janela de animação.

Consulte também

Instruções passo a passo