연습: MFC 프로젝트에 애니메이션 추가

아티클
10/12/2023

이 연습에서는 Visual C++, MFC(Microsoft Foundation Class Library) 프로젝트에 기본 애니메이션 개체를 추가하는 방법을 설명합니다.

연습에서는 다음 작업을 수행하는 방법을 보여 줍니다.

MFC 애플리케이션을 만듭니다.
메뉴를 추가한 다음, 애니메이션을 시작하고 중지하는 명령을 추가합니다.
시작 및 중지 명령에 대한 처리기를 만듭니다.
프로젝트에 애니메이션 개체를 추가합니다.
애니메이션 효과를 준 개체를 창에 가운데에 배치합니다.
결과를 확인합니다.

참고 항목

일부 Visual Studio 사용자 인터페이스 요소의 경우 다음 지침에 설명된 것과 다른 이름 또는 위치가 시스템에 표시될 수 있습니다. 이러한 요소는 사용하는 Visual Studio 버전 및 설정에 따라 결정됩니다. 자세한 내용은 IDE 개인 설정을 참조하세요.

필수 조건

이 연습을 완료하려면 Visual Studio가 필요합니다.

MFC 애플리케이션을 만들려면

MFC 애플리케이션 마법사를 사용하여 MFC 애플리케이션을 만듭니다. 연습: 새 MFC 셸 컨트롤을 사용하여 Visual Studio 버전에 대한 마법사를 여는 방법에 대한 지침을 참조하세요.
이름 상자에 MFCAnimationWalkthrough를 입력합니다. 확인을 클릭합니다.
MFC 애플리케이션 마법사 대화 상자에서 애플리케이션 유형이 여러 문서이고, 프로젝트 스타일이 Visual Studio이고, 문서/보기 아키텍처 지원 옵션이 선택되어 있는지 확인합니다. Finish를 클릭합니다.

보기 메뉴에서 다른 창을 가리킨 다음 리소스 보기를 클릭합니다.
리소스 뷰에서 메뉴 폴더로 이동하여 엽니다. IDR_MFCAnimationWalkthroughTYPE 리소스를 두 번 클릭하여 수정할 수 있도록 엽니다.
메뉴 모음의 [여기 입력] 상자에 A&nimation을 입력하여 애니메이션 메뉴를 만듭니다.
애니메이션 아래의 [입력] 상자에 [시작]을 입력하고 [앞으로 시작] 명령을 만듭니다.
[앞으로 시작]의 [여기 입력] 상자에 [시작](뒤로)을 입력합니다.
뒤로 시작 아래의 [여기 입력] 상자에 S&top을 입력하여 중지 명령을 만듭니다.
MFCAnimationWalkthrough.rc를 저장하고 닫습니다.
솔루션 탐색기 MainFrm.cpp를 두 번 클릭하여 수정할 수 있도록 엽니다. 메서드에서 CMainFrame::OnCreate 여러 호출이 있는 섹션을 찾습니다 lstBasicCommands.AddTail. 해당 섹션 바로 다음에 다음 코드를 추가합니다.
```
lstBasicCommands.AddTail(ID_ANIMATION_STARTFORWARD);
lstBasicCommands.AddTail(ID_ANIMATION_STARTBACKWARD);
lstBasicCommands.AddTail(ID_ANIMATION_STOP);
```
파일을 저장하고 닫습니다.

시작 및 중지 명령에 대한 처리기를 만들려면

프로젝트 메뉴에서 클래스 마법사를 클릭합니다.
MFC 클래스 마법사의 클래스 이름 아래에서 CMFCAnimationWalkthroughView를 선택합니다.
명령 탭의 개체 ID 상자에서 ID_ANIMATION_STARTFORWARD 선택한 다음 메시지 상자에서 명령을 선택합니다. 처리기 추가를 클릭합니다.
멤버 함수 추가 대화 상자에서 확인을 클릭합니다.
개체 ID 상자에서 ID_ANIMATION_STARTBACKWARD 선택한 다음 메시지 상자에서 COMMAND를 선택합니다. 처리기 추가를 클릭합니다.
멤버 함수 추가 대화 상자에서 확인을 클릭합니다.
개체 ID 상자에서 ID_ANIMATION_STOP 선택한 다음 메시지 상자에서 COMMAND를 선택합니다. 처리기 추가를 클릭한 다음 확인을 클릭합니다.
멤버 함수 추가 대화 상자에서 확인을 클릭합니다.
MFC 클래스 마법사에서 확인을 클릭합니다.
편집기에서 열려 있지만 닫지 않는 MFCAnimationWalkthroughView.cpp를 저장합니다.

프로젝트에 애니메이션 개체를 추가하려면

솔루션 탐색기 MFCAnimationWalkthroughView.h를 두 번 클릭하여 수정할 수 있도록 엽니다. 클래스 정의 CMFCAnimationWalkthroughView 바로 앞에 다음 코드를 추가하여 애니메이션 개체와의 일정 충돌을 처리하는 사용자 지정 애니메이션 컨트롤러를 만듭니다.
```
class CCustomAnimationController : public CAnimationController
{
public:
    CCustomAnimationController()
    {
    }

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

클래스의 CMFCAnimationWalkthroughView 끝에 다음 코드를 추가합니다.

CCustomAnimationController m_animationController;
CAnimationColor m_animationColor;
CAnimationRect m_animationRect;

줄 다음에 DECLARE_MESSAGE_MAP() 다음 코드를 추가합니다.
```
void Animate(BOOL bDirection);
```
파일을 저장하고 닫습니다.
MFCAnimationWalkthroughView.cpp에서 문 뒤 #include 의 파일 맨 위에 있지만 클래스 메서드 앞에 다음 코드를 추가합니다.
```
static int nAnimationGroup = 0;
static int nInfoAreaHeight = 40;
```

생성자의 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);

메서드를 찾은 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);
}

메서드를 찾은 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);
}

파일의 끝에 다음 코드를 추가합니다.

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

프로젝트 메뉴에서 클래스 마법사를 클릭합니다.
MFC 클래스 마법사의 클래스 이름 아래에서 CMFCAnimationWalkthroughView를 선택합니다.
메시지 탭의 메시지 상자에서 WM_ERASEBKGND 선택하고 처리기 추가를 클릭한 다음 확인을 클릭합니다.
MFCAnimationWalkthroughView.cpp에서 구현 OnEraseBkgnd 을 다음 코드로 바꿔 애니메이션 개체가 다시 그려지면 깜박이는 것을 줄입니다.
```
BOOL CMFCAnimationWalkthroughView::OnEraseBkgnd(CDC* /*pDC*/)
{
    return TRUE;
}
```

의 구현을 다음 코드로 바꿉니다CMFCAnimationWalkthroughView::OnAnimationStartforwardCMFCAnimationWalkthroughView::OnAnimationStartbackwardCMFCAnimationWalkthroughView::OnAnimationStop.

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

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

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

    }
}

파일을 저장하고 닫습니다.

애니메이션된 개체를 창에 가운데에 배치하려면

솔루션 탐색기 MFCAnimationWalkthroughView.h를 두 번 클릭하여 수정할 수 있도록 엽니다. 클래스의 CMFCAnimationWalkthroughView 끝에서 정의 m_animationRect바로 다음에 다음 코드를 추가합니다.
```
BOOL m_bCurrentDirection;
```
파일을 저장하고 닫습니다.
프로젝트 메뉴에서 클래스 마법사를 클릭합니다.
MFC 클래스 마법사의 클래스 이름 아래에서 CMFCAnimationWalkthroughView를 선택합니다.
메시지 탭의 메시지 상자에서 WM_SIZE 선택하고 처리기 추가를 클릭한 다음 확인을 클릭합니다.

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

생성자의 CMFCAnimationWalkthroughView시작 부분에서 다음 코드를 추가합니다.
```
m_bCurrentDirection = TRUE;
```
메서드의 CMFCAnimationWalkthroughView::Animate 시작 부분에 다음 코드를 추가합니다.
```
m_bCurrentDirection = bDirection;
```
파일을 저장하고 닫습니다.

결과를 확인하려면

애플리케이션을 빌드 및 실행합니다. 애니메이션 메뉴에서 앞으로 시작을 클릭합니다. 사각형이 표시되고 가운데 영역을 채워야 합니다. 뒤로 시작을 클릭하면 애니메이션이 반전되고 중지를 클릭하면 중지되어야 합니다. 애니메이션이 진행됨에 따라 사각형의 채우기 색이 변경되고 애니메이션 창의 맨 위에 현재 색이 표시되어야 합니다.

참고 항목

연습

다음을 통해 공유

연습: MFC 프로젝트에 애니메이션 추가

필수 조건

MFC 애플리케이션을 만들려면

메뉴를 추가한 다음, 애니메이션을 시작하고 중지하는 명령을 추가하려면

시작 및 중지 명령에 대한 처리기를 만들려면

프로젝트에 애니메이션 개체를 추가하려면

애니메이션된 개체를 창에 가운데에 배치하려면

결과를 확인하려면

참고 항목

피드백

추가 리소스