C# Windows Forms 강의 101편: 애니메이션 효과와 트랜지션 구현

 

1. 강의 개요

이번 강의에서는 Windows Forms에서 애니메이션 효과와 트랜지션을 구현하는 방법을 학습합니다.
Windows Forms은 기본적으로 애니메이션 기능이 부족하지만, Timer와 **GDI+**를 활용하여
부드러운 시각적 효과를 적용할 수 있습니다.

이 강의에서는 버튼을 클릭하면 패널이 부드럽게 슬라이드되거나 색상이 점진적으로 변경되는
애니메이션을 구현합니다.

---

2. 학습 목표

✅ Timer를 활용한 애니메이션 구현
✅ 패널 슬라이딩 효과 추가
✅ 배경 색상 트랜지션 구현
✅ UI 응답성을 유지하며 부드러운 애니메이션 적용

---

3. 기능 요구사항

🟢 필수 기능

1️⃣ 슬라이딩 패널 애니메이션

• 버튼 클릭 시 패널이 좌우로 슬라이딩

2️⃣ 배경 색상 변경 애니메이션

• 특정 버튼을 클릭하면 배경 색상이 점진적으로 변경

3️⃣ UI 응답성 유지

• 애니메이션 실행 중에도 다른 UI 요소 사용 가능

---

4. 실습: 애니메이션 효과 구현

1️⃣ 폼 구성

• 폼(Form) 이름: Form1
• 컨트롤 배치:

컨트롤 타입 이름 위치 크기

Panel	pnlSlide	좌측	(150 x 300)
Button	btnSlide	우측 상단	(100 x 30)
Button	btnColor	우측 하단	(100 x 30)
Timer	tmrAnimation	(코드에서 추가)

📌 폼 디자인 예시:

------------------------------------------------
| [pnlSlide]      |             [btnSlide] [btnColor]  |
| (슬라이드 패널) |                                     |
------------------------------------------------

---

2️⃣ 코드 작성

(1) 패널 슬라이딩 애니메이션 구현

using System;
using System.Drawing;
using System.Windows.Forms;

namespace WindowsFormsApp_Animation
{
    public partial class Form1 : Form
    {
        private bool isPanelExpanded = true;
        private Timer slideTimer;

        public Form1()
        {
            InitializeComponent();
            InitializeAnimation();
        }

        private void InitializeAnimation()
        {
            slideTimer = new Timer();
            slideTimer.Interval = 10; // 10ms마다 애니메이션 실행
            slideTimer.Tick += SlidePanel;
        }

        private void btnSlide_Click(object sender, EventArgs e)
        {
            slideTimer.Start();
        }

        private void SlidePanel(object sender, EventArgs e)
        {
            if (isPanelExpanded)
            {
                pnlSlide.Width -= 10; // 패널을 왼쪽으로 줄이기
                if (pnlSlide.Width <= 0)
                {
                    slideTimer.Stop();
                    isPanelExpanded = false;
                }
            }
            else
            {
                pnlSlide.Width += 10; // 패널을 다시 확장
                if (pnlSlide.Width >= 150)
                {
                    slideTimer.Stop();
                    isPanelExpanded = true;
                }
            }
        }
    }
}

---

(2) 배경 색상 변경 애니메이션 구현

        private Timer colorTimer;
        private int colorStep = 0;

        private void btnColor_Click(object sender, EventArgs e)
        {
            colorTimer = new Timer();
            colorTimer.Interval = 50;
            colorTimer.Tick += ChangeBackgroundColor;
            colorTimer.Start();
        }

        private void ChangeBackgroundColor(object sender, EventArgs e)
        {
            if (colorStep >= 100)
            {
                colorTimer.Stop();
                return;
            }

            int red = Math.Min(255, this.BackColor.R + 2);
            int green = Math.Min(255, this.BackColor.G + 1);
            int blue = Math.Min(255, this.BackColor.B + 3);

            this.BackColor = Color.FromArgb(red, green, blue);
            colorStep++;
        }

---

(3) Designer 코드

        private void InitializeComponent()
        {
            this.pnlSlide = new Panel();
            this.btnSlide = new Button();
            this.btnColor = new Button();

            // 패널 설정
            this.pnlSlide.Location = new Point(0, 0);
            this.pnlSlide.Size = new Size(150, 300);
            this.pnlSlide.BackColor = Color.LightBlue;

            // 슬라이드 버튼 설정
            this.btnSlide.Location = new Point(160, 10);
            this.btnSlide.Size = new Size(100, 30);
            this.btnSlide.Text = "Slide";
            this.btnSlide.Click += new EventHandler(this.btnSlide_Click);

            // 색상 변경 버튼 설정
            this.btnColor.Location = new Point(160, 50);
            this.btnColor.Size = new Size(100, 30);
            this.btnColor.Text = "Change Color";
            this.btnColor.Click += new EventHandler(this.btnColor_Click);

            // 폼 설정
            this.ClientSize = new Size(300, 300);
            this.Controls.Add(this.pnlSlide);
            this.Controls.Add(this.btnSlide);
            this.Controls.Add(this.btnColor);
            this.Text = "애니메이션 효과 구현";
        }

---

3️⃣ 실행 결과

✅ 패널 슬라이딩 효과

• "Slide" 버튼을 누르면 패널이 부드럽게 왼쪽으로 사라졌다가 다시 나타남.

✅ 배경 색상 트랜지션

• "Change Color" 버튼을 누르면 배경 색상이 점진적으로 변경됨.

---

5. 주요 개념 요약

• Timer: 일정 간격으로 코드를 실행하여 애니메이션 구현
• 패널 슬라이딩: Width 속성을 조정하여 패널 이동 효과 적용
• 색상 변경 애니메이션: RGB 값을 점진적으로 변경하여 부드러운 효과 제공
• UI 응답성 유지: Timer를 사용하여 UI가 멈추지 않도록 구현

 #CSharp #WindowsForms #Settings #사용자설정 #DataPersistence