Share via

Пошаговое руководство. Добавление анимации в проект MFC

  • Статья

В этом пошаговом руководстве показано, как добавить базовый анимированный объект в проект Visual C++, библиотеки классов Microsoft Foundation (MFC).

В пошаговом руководстве показано, как выполнить следующие задачи:

  • Создайте приложение MFC.

  • Добавьте меню и добавьте команды для запуска и остановки анимации.

  • Создайте обработчики для команд запуска и остановки.

  • Добавьте в проект анимированный объект.

  • Центр анимированного объекта в окне.

  • Проверьте результаты.

Примечание.

Отображаемые на компьютере имена или расположения некоторых элементов пользовательского интерфейса Visual Studio могут отличаться от указанных в следующих инструкциях. Это зависит от имеющегося выпуска Visual Studio и используемых параметров. Дополнительные сведения см. в разделе Персонализация среды IDE.

Необходимые компоненты

Чтобы выполнить это пошаговое руководство, необходимо иметь Visual Studio.

Создание приложения MFC

  1. Используйте мастер приложений MFC для создания приложения MFC. См . пошаговое руководство. Использование новых элементов управления оболочки MFC для инструкций по открытию мастера для вашей версии Visual Studio.

  2. В поле "Имя" введите MFCAnimationWalkthrough. Щелкните OK.

  3. В диалоговом окне мастера приложений MFC убедитесь, что тип приложения — несколько документов, стиль проекта — Visual Studio, а выбран параметр поддержки архитектуры document/View. Нажмите кнопку Готово.

Добавление меню и добавление команд для запуска и остановки анимации

  1. В меню "Вид" наведите указатель мыши на другие окна и выберите пункт "Представление ресурсов".

  2. В представлении ресурсов перейдите в папку меню и откройте ее. Дважды щелкните ресурс IDR_MFCAnimationWalkthroughTYPE , чтобы открыть его для изменения.

  3. В строке меню в поле "Тип здесь" введите A&nimation, чтобы создать меню анимации.

  4. В разделе "Анимация" в поле "Тип здесь" введите "Пуск и вперед", чтобы создать команду "Пуск вперед".

  5. В разделе "Пуск вперед" в поле "Тип здесь" введите "Пуск назад".

  6. В разделе "Назад" в поле "Тип здесь" введите "S&top", чтобы создать команду Stop.

  7. Сохраните MFCAnimationWalkthrough.rc и закройте его.

  8. В Обозреватель решений дважды щелкните MainFrm.cpp, чтобы открыть его для изменения. В методе CMainFrame::OnCreate найдите раздел с несколькими вызовами lstBasicCommands.AddTail. Сразу после этого раздела добавьте следующий код.

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

  9. Сохраните файл и закройте его.

Создание обработчиков для команд запуска и остановки

  1. В меню "Проект" выберите мастер классов.

  2. В мастере классов MFC в разделе "Имя класса" выберите CMFCAnimationWalkthroughView.

  3. На вкладке "Команды" в поле "Идентификаторы объектов" выберите ID_ANIMATION_STARTFORWARD, а затем в поле "Сообщения" выберите COMMAND. Нажмите кнопку "Добавить обработчик".

  4. В диалоговом окне "Добавить функцию-член" нажмите кнопку "ОК".

  5. В поле идентификаторов объектов выберите ID_ANIMATION_STARТБ ACKWARD, а затем в поле "Сообщения" выберите COMMAND. Нажмите кнопку "Добавить обработчик".

  6. В диалоговом окне "Добавить функцию-член" нажмите кнопку "ОК".

  7. В поле идентификаторов объектов выберите ID_ANIMATION_STOP, а затем в поле "Сообщения" выберите COMMAND. Нажмите кнопку "Добавить обработчик" и нажмите кнопку "ОК".

  8. В диалоговом окне "Добавить функцию-член" нажмите кнопку "ОК".

  9. В мастере классов MFC нажмите кнопку "ОК".

  10. Сохраните MFCAnimationWalkthroughView.cpp, который открыт в редакторе, но не закрывайте его.

Добавление анимированного объекта в проект

  1. В Обозреватель решений дважды щелкните MFCAnimationWalkthroughView.h, чтобы открыть его для изменения. Непосредственно перед определением CMFCAnimationWalkthroughView класса добавьте следующий код, чтобы создать пользовательский контроллер анимации, который будет обрабатывать конфликты планирования с объектом анимации.

    class CCustomAnimationController : public CAnimationController
{
public:
    CCustomAnimationController()
    {
    }

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

  2. В конце CMFCAnimationWalkthroughView класса добавьте следующий код.

    CCustomAnimationController m_animationController;
CAnimationColor m_animationColor;
CAnimationRect m_animationRect;

  3. DECLARE_MESSAGE_MAP() После строки добавьте следующий код.

    void Animate(BOOL bDirection);

  4. Сохраните файл и закройте его.

  5. В MFCAnimationWalkthroughView.cpp в верхней части файла после #include инструкций, но перед любыми методами класса добавьте следующий код.

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

  6. В конце конструктора CMFCAnimationWalkthroughViewдобавьте следующий код.

    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. CAnimationWalthroughView::PreCreateWindow Найдите метод и замените его следующим кодом.

    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. CAnimationWalkthroughView::OnDraw Найдите метод и замените его следующим кодом.

    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. В конце файла добавьте следующий код.

    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. В меню "Проект" выберите мастер классов.

  11. В мастере классов MFC в разделе "Имя класса" выберите CMFCAnimationWalkthroughView.

  12. На вкладке "Сообщения" в поле "Сообщения" выберите WM_ERASEBKGND, нажмите кнопку "Добавить обработчик" и нажмите кнопку "ОК".

  13. В MFCAnimationWalkthroughView.cpp замените реализацию следующего OnEraseBkgnd кода, чтобы уменьшить мерцание в анимированном объекте при повторном удалении.

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

  14. Замените реализации CMFCAnimationWalkthroughView::OnAnimationStartforward, CMFCAnimationWalkthroughView::OnAnimationStartbackwardа CMFCAnimationWalkthroughView::OnAnimationStop также следующим кодом.

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

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

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

    }
}

  15. Сохраните файл и закройте его.

Центр анимированного объекта в окне

  1. В Обозреватель решений дважды щелкните MFCAnimationWalkthroughView.h, чтобы открыть его для изменения. В конце CMFCAnimationWalkthroughView класса сразу после определения m_animationRectдобавьте следующий код.

    BOOL m_bCurrentDirection;

  2. Сохраните файл и закройте его.

  3. В меню "Проект" выберите мастер классов.

  4. В мастере классов MFC в разделе "Имя класса" выберите CMFCAnimationWalkthroughView.

  5. На вкладке "Сообщения" в поле "Сообщения" выберите WM_SIZE, нажмите кнопку "Добавить обработчик" и нажмите кнопку "ОК".

  6. В MFCAnimationWalkthroughView.cpp замените код CMFCAnimationWalkthroughView::OnSize следующим кодом.

    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. В начале конструктора CMFCAnimationWalkthroughViewдобавьте следующий код.

    m_bCurrentDirection = TRUE;

  8. В начале CMFCAnimationWalkthroughView::Animate метода добавьте следующий код.

    m_bCurrentDirection = bDirection;

  9. Сохраните файл и закройте его.

Проверка результатов

  1. Выполните сборку приложения и запустите его. В меню "Анимация" нажмите кнопку "Пуск вперед". Прямоугольник должен появиться, а затем заполнить центральную область. При нажатии кнопки "Пуск назад" анимация должна измениться и при нажатии кнопки "Остановить", она должна остановиться. Цвет заливки прямоугольника должен изменяться по мере выполнения анимации, а текущий цвет должен отображаться в верхней части окна анимации.

См. также

Пошаговые руководства