Panduan: Menambahkan Animasi ke Proyek MFC

Artikel
10/12/2023

Panduan ini mengajarkan cara menambahkan objek animasi dasar ke proyek Visual C++, Microsoft Foundation Class Library (MFC).

Panduan menunjukkan cara menyelesaikan tugas-tugas ini:

Membuat aplikasi MFC.
Tambahkan menu lalu tambahkan perintah untuk memulai dan menghentikan animasi.
Buat handler untuk perintah mulai dan hentikan.
Tambahkan objek animasi ke proyek.
Tengahkan objek animasi di jendela.
Verifikasi hasil.

Catatan

Komputer Anda mungkin memperlihatkan nama atau lokasi yang berbeda untuk beberapa elemen antarmuka pengguna Visual Studio dalam petunjuk berikut. Edisi Visual Studio yang Anda miliki dan setelan yang Anda gunakan menentukan elemen-elemen ini. Untuk informasi selengkapnya, lihat Mempersonalisasi IDE.

Prasyarat

Untuk menyelesaikan panduan ini, Anda harus memiliki Visual Studio.

Untuk membuat aplikasi MFC

Gunakan Wizard Aplikasi MFC untuk membuat aplikasi MFC. Lihat Panduan: Menggunakan Kontrol Shell MFC Baru untuk petunjuk tentang cara membuka wizard untuk versi Visual Studio Anda.
Dalam kotak Nama , ketik MFCAnimationWalkthrough. Klik OK.
Dalam kotak dialog Wizard Aplikasi MFC, verifikasi bahwa Jenis Aplikasi adalah Beberapa Dokumen, Gaya Proyek adalah Visual Studio, dan opsi dukungan arsitektur Dokumen/Tampilan dipilih. Klik Selesai.

Pada menu Tampilan , arahkan ke Windows Lain lalu klik Tampilan Sumber Daya.
Di Tampilan Sumber Daya, navigasikan ke folder Menu dan buka. Klik dua kali sumber daya IDR_MFCAnimationWalkthroughTYPE untuk membukanya untuk modifikasi.
Pada bilah menu, dalam kotak Ketik Di Sini , ketik A&nimation untuk membuat menu Animasi.
Di bawah Animasi, dalam kotak Ketik Di Sini , ketik Mulai &Teruskan untuk membuat perintah Mulai Teruskan.
Di bawah Mulai Maju, dalam kotak Ketik Di Sini, ketik Mulai &Mundur.
Di bawah Mulai Mundur, dalam kotak Ketik Di Sini , ketik S&top untuk membuat perintah Hentikan.
Simpan MFCAnimationWalkthrough.rc dan tutup.
Di Penjelajah Solusi, klik dua kali MainFrm.cpp untuk membukanya untuk modifikasi. Dalam metode , CMainFrame::OnCreate temukan bagian yang memiliki beberapa panggilan ke lstBasicCommands.AddTail. Tepat setelah bagian itu, tambahkan kode berikut.
```
lstBasicCommands.AddTail(ID_ANIMATION_STARTFORWARD);
lstBasicCommands.AddTail(ID_ANIMATION_STARTBACKWARD);
lstBasicCommands.AddTail(ID_ANIMATION_STOP);
```
Simpan file dan tutup.

Untuk membuat handler untuk perintah mulai dan hentikan

Pada menu Proyek , klik Panduan Kelas.
Di Wizard Kelas MFC, di bawah Nama kelas, pilih CMFCAnimationWalkthroughView.
Pada tab Perintah , dalam kotak ID Objek, pilih ID_ANIMATION_STARTFORWARD, lalu di kotak Pesan , pilih PERINTAH. Klik Tambahkan Handler.
Dalam kotak dialog Tambahkan Fungsi Anggota, klik OK.
Dalam kotak ID Objek, pilih ID_ANIMATION_STARTBACKWARD, lalu di kotak Pesan , pilih PERINTAH. Klik Tambahkan Handler.
Dalam kotak dialog Tambahkan Fungsi Anggota, klik OK.
Dalam kotak ID Objek, pilih ID_ANIMATION_STOP, lalu di kotak Pesan , pilih PERINTAH. Klik Tambahkan Handler lalu klik OK.
Dalam kotak dialog Tambahkan Fungsi Anggota, klik OK.
Di Wizard Kelas MFC, klik OK.
Simpan MFCAnimationWalkthroughView.cpp, yang terbuka di editor, tetapi jangan tutup.

Untuk menambahkan objek animasi ke proyek

Di Penjelajah Solusi, klik dua kali MFCAnimationWalkthroughView.h untuk membukanya untuk modifikasi. Tepat sebelum definisi CMFCAnimationWalkthroughView kelas, tambahkan kode berikut untuk membuat pengontrol animasi kustom yang akan menangani konflik penjadwalan dengan objek animasi.

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

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

Di akhir CMFCAnimationWalkthroughView kelas, tambahkan kode berikut.

CCustomAnimationController m_animationController;
CAnimationColor m_animationColor;
CAnimationRect m_animationRect;

DECLARE_MESSAGE_MAP() Setelah baris, tambahkan kode berikut.
```
void Animate(BOOL bDirection);
```
Simpan file dan tutup.
Di MFCAnimationWalkthroughView.cpp, di bagian atas file setelah #include pernyataan tetapi sebelum metode kelas apa pun, tambahkan kode berikut.
```
static int nAnimationGroup = 0;
static int nInfoAreaHeight = 40;
```

Di akhir konstruktor untuk CMFCAnimationWalkthroughView, tambahkan kode berikut.

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 Temukan metode lalu ganti dengan kode berikut.

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 Temukan metode lalu ganti dengan kode berikut.

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

Di akhir file, tambahkan kode berikut.

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

Pada menu Proyek , klik Panduan Kelas.
Di Wizard Kelas MFC, di bawah Nama kelas, pilih CMFCAnimationWalkthroughView.
Pada tab Pesan , dalam kotak Pesan , pilih WM_ERASEBKGND, klik Tambahkan Handler, lalu klik OK.
Dalam MFCAnimationWalkthroughView.cpp, ganti implementasi OnEraseBkgnd dengan kode berikut untuk mengurangi kedip di objek animasi saat digambar ulang.
```
BOOL CMFCAnimationWalkthroughView::OnEraseBkgnd(CDC* /*pDC*/)
{
    return TRUE;
}
```

Ganti implementasi CMFCAnimationWalkthroughView::OnAnimationStartforward, CMFCAnimationWalkthroughView::OnAnimationStartbackward, dan CMFCAnimationWalkthroughView::OnAnimationStop dengan kode berikut.

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

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

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

    }
}

Simpan file dan tutup.

Untuk mempusatkan objek animasi di jendela

Di Penjelajah Solusi, klik dua kali MFCAnimationWalkthroughView.h untuk membukanya untuk modifikasi. Di akhir CMFCAnimationWalkthroughView kelas, tepat setelah definisi m_animationRect, tambahkan kode berikut.
```
BOOL m_bCurrentDirection;
```
Simpan file dan tutup.
Pada menu Proyek , klik Panduan Kelas.
Di Wizard Kelas MFC, di bawah Nama kelas, pilih CMFCAnimationWalkthroughView.
Pada tab Pesan , dalam kotak Pesan , pilih WM_SIZE, klik Tambahkan Handler, lalu klik OK.

Di MFCAnimationWalkthroughView.cpp, ganti kode untuk CMFCAnimationWalkthroughView::OnSize dengan kode berikut.

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

Di awal konstruktor untuk CMFCAnimationWalkthroughView, tambahkan kode berikut.
```
m_bCurrentDirection = TRUE;
```
Di awal CMFCAnimationWalkthroughView::Animate metode, tambahkan kode berikut.
```
m_bCurrentDirection = bDirection;
```
Simpan file dan tutup.

Untuk memverifikasi hasil

Membuat dan menjalankan aplikasi. Pada menu Animasi , klik Mulai Teruskan. Persegi panjang akan muncul lalu mengisi area tengah. Saat Anda mengklik Mulai Mundur, animasi akan terbalik, dan ketika Anda mengklik Hentikan, animasi akan berhenti. Warna isian persegi panjang harus berubah saat animasi berlangsung, dan warna saat ini harus ditampilkan di bagian atas jendela animasi.

Panduan: Menambahkan Animasi ke Proyek MFC

Prasyarat

Untuk membuat aplikasi MFC

Untuk menambahkan menu lalu menambahkan perintah untuk memulai dan menghentikan animasi

Untuk membuat handler untuk perintah mulai dan hentikan

Untuk menambahkan objek animasi ke proyek

Untuk mempusatkan objek animasi di jendela

Untuk memverifikasi hasil

Baca juga

Saran dan Komentar

Saran dan Komentar

Sumber Daya Tambahan: