Page History
...
| Tip |
|---|
RPG 보너스: Case P와 Case W를 연속 실행하면 양쪽 모두 60점 이상일 때 XP 1.3배 파이프라인 보너스가 적용됩니다. |
...
4. 완성된 37개 애니메이션 템플릿 — 11개 카테고리 갤러리
두 차례의 조사→구현 사이클을 통해 11개 카테고리, 37개 WPF 애니메이션 컴포넌트를 Pencil 디자인 카드로 완성했습니다.
카테고리 전체 목록
...
#
...
카테고리
...
컴포넌트 수
...
대표 기법
아래는 Pencil에서 익스포트한 각 카테고리의 프레임 이미지와 컴포넌트 소개입니다.
원본 —
...
원본
WPF Blend Animation Ideas (5개)
...
5
...
Glass Button, Sidebar, Spinner, Panel, Color Control
...
⊕1
...
Data Input Controls
...
3
...
Floating Label, ComboBox, Toggle Switch
...
⊕2
...
Feedback & Notification
...
3
...
Toast, Progress Bar, Badge Pop
...
⊕3
...
Navigation & Transitions
...
3
...
Page Transition, Tab Slide, Hamburger Menu
...
⊕4
...
Decorative & Background
...
3
...
Gradient BG, Particles, Pulsing Glow
...
⊕5
...
3D Transform & Shape Morph
...
3
...
Flip Card 3D, Morphing Shape, Elastic/Spring
...
⊕6
...
Path & Trajectory
...
3
...
Path Follower, Parallax, Drag & Drop
...
⊕7
...
Text & Sequential
...
3
...
Typewriter, Marquee Ticker, Staggered List
...
⊕8
...
Interactive UI Controls
...
3
...
Ripple Button, Accordion, Animated Tooltip
...
⊕9
...
Data Visualization & Loading
...
3
...
Skeleton Shimmer, Circular Progress, Bar Chart
...
⊕10
...
Ambient & Decorative FX
...
3
...
Wave Ripple, Breathing Pulse, Marching Ants
...
⊕11
...
Celebration & Advanced
...
3
...
Confetti Burst, Zoom/Pinch, Animated Tooltip
최초 조사에서 확보한 5개 핵심 애니메이션 패턴입니다. Glass Effect Button(MouseEnter 시 투명 오버레이 페이드인), Animated Sidebar Menu(ToggleButton으로 Width 65→230px 전환), Rotating Loading Spinner(RotateTransform 무한 회전), Sliding Expandable Panel(TranslateTransform 슬라이드), Color-Animated Content Control(ColorAnimation으로 상태별 색상 전환). 이 5개가 전체 라이브러리의 출발점이 되었습니다.
CAT1 — Data Input Controls 데이터 입력 컨트롤 (3개)
사용자 입력 시 발생하는 마이크로 인터랙션입니다. Floating Label TextBox(포커스 시 라벨이 위로 올라가며 축소 + 색상 변화), Animated ComboBox(드롭다운 ScaleY 0→1 펼침 + Opacity 페이드), Material Toggle Switch(노브 TranslateX 이동 + 트랙 색상 전환). 폼 UI의 완성도를 높이는 필수 애니메이션들입니다.
CAT2 — Feedback & Notification 피드백 & 알림 (3개)
시스템 상태를 사용자에게 전달하는 패턴입니다. Snackbar/Toast(하단에서 슬라이드 업 + 3초 후 자동 퇴장), Animated Progress Bar(Indeterminate 슬라이딩 + Value 기반 스무스 필), Badge Counter Pop(값 변경 시 Scale 1→1.3→1.0 ElasticEase 바운스). 사용자 피드백 UX의 기본기입니다.
CAT3 — Navigation & Transitions 네비게이션 & 전환 (3개)
화면 간 이동의 자연스러움을 담당합니다. Page/Content Transition(Old=왼쪽 슬라이드아웃+페이드, New=오른쪽 슬라이드인), Tab Control Slide(방향에 따른 좌/우 슬라이드 + Opacity 0.3→1), Hamburger→X Morph(3줄 아이콘의 RotateTransform + TranslateTransform으로 X자 변환). SPA 네비게이션에 직접 적용 가능합니다.
CAT4 — Decorative & Background 장식 & 배경 (3개)
페이지의 분위기를 결정하는 배경 효과입니다. Animated Gradient BG(GradientStop 색상/오프셋 순환 + AutoReverse), Particle/Floating Dots(다수 Ellipse의 staggered 부유 애니메이션), Pulsing Glow Effect(DropShadowEffect BlurRadius/Opacity 호흡 펄스). 랜딩페이지의 시각적 임팩트를 크게 높입니다.
CAT5 — 3D Transform & Shape Morph (3개)
2차 조사에서 새로 도입한 3D 변환 패러다임입니다. Flip Card 3D(ScaleTransform.ScaleX 1→-1 + 90° 지점에서 Visibility 교체), Morphing Shape(BezierSegment의 PointAnimation으로 사각형→원형 보간), Elastic/Spring(ElasticEase Oscillations=3으로 오버슈트 바운스). 기존 카테고리에 없던 완전히 새로운 차원의 애니메이션입니다.
CAT6 — Path & Trajectory 경로 & 궤적 (3개)
오브젝트의 이동 궤적을 다루는 패턴입니다. Path Follower(DoubleAnimationUsingPath로 베지어 곡선 따라 이동 + DoesRotateWithTangent), Parallax Scrolling(배경/중경/전경 3개 레이어에 각각 0.2x/0.5x/1.0x 속도 적용), Drag & Drop(마우스 추적 TranslateTransform + 놓을 때 BounceEase 스냅백). 공간감과 인터랙션 깊이를 더합니다.
CAT7 — Text & Sequential 텍스트 & 순차 (3개)
텍스트와 리스트의 등장 연출입니다. Typewriter Text(StringAnimationUsingKeyFrames로 한 글자씩 타이핑 + 깜빡이는 커서), Marquee Ticker(TranslateTransform.X를 캔버스 너비만큼 무한 루프), Staggered List Entrance(ItemContainerStyle에서 BeginTime을 인덱스×0.05s로 오프셋하여 순차 등장). 콘텐츠 발견 경험을 극적으로 개선합니다.
CAT8 — Interactive UI Controls 인터랙티브 컨트롤 (3개)
사용자 조작에 즉각 반응하는 컨트롤입니다. Ripple Effect Button(클릭 지점에 Ellipse 스폰 + ScaleTransform 0→50 확산 + Opacity 페이드), Accordion Sections(LayoutTransform ScaleY로 레이아웃 리플로우 + 화살표 RotateTransform 180°), Animated Tooltip(Opened 이벤트 시 Opacity+TranslateY 슬라이드인 + DropShadowEffect). Material Design 느낌의 풍부한 피드백을 제공합니다.
CAT9 — Data Visualization & Loading 데이터 시각화 (3개)
데이터를 시각적으로 전달하는 패턴입니다. Skeleton Shimmer(LinearGradientBrush의 GradientStop.Offset을 -1→2로 스위핑하는 로딩 플레이스홀더), Circular Progress(Ellipse의 StrokeDashOffset으로 원형 진행률 표시 + RotateTransform -90°로 12시 시작), Animated Bar Chart(Rectangle.Height를 0→목표값까지 staggered BeginTime으로 캐스케이드). 대시보드 UI에 필수적인 데이터 애니메이션입니다.
CAT10 — Ambient & Decorative FX 앰비언트 효과 (3개)
배경의 생동감을 더하는 고급 효과입니다. Wave Ripple BG(ShaderEffect HLSL로 sin(X×Frequency)×Amplitude 물결 + Phase 애니메이션), Breathing Pulse(ScaleTransform 1.0→1.15 AutoReverse + SineEase로 유기적 호흡), Marching Ants Border(StrokeDashOffset 0→6 무한 애니메이션으로 선택 영역 표시). 섬세한 디테일이 전문성을 보여줍니다.
CAT11 — Celebration & Advanced 축하 & 고급 (3개)
특수 상황의 연출 효과입니다. Confetti Burst(Canvas에 다수 Rectangle 스폰 + 랜덤 색상/회전/속도 + 중력 KeyFrames), Zoom/Pinch(MouseWheel.Delta로 ScaleTransform 스무스 줌 + CubicEase 300ms), Animated Tooltip(ToolTip.Opened 이벤트 기반 Opacity+TranslateY 진입 + DropShadow). 사용자 경험의 감성적 완성도를 높이는 고급 기법입니다.
...
디자인 카드 구조
각 컴포넌트는 동일한 카드 형식으로 설계되어 있습니다:
번호 + 제목 (JetBrains Mono, cyan 악센트)
WPF 속성 설명 (핵심 Animation/Transform/Easing 정보)
시각적 미리보기 (Before → After 상태 전환)
XAML 코드 스니펫 (핵심 속성 2줄)
| Note |
|---|
다운로드: 전체 37개 컴포넌트가 포함된 Pencil 디자인 파일을 파일(디자인아이디어.pen)을 첨부했습니다. Pencil 앱에서 열어 각 카드를 확인하고, 필요한 컴포넌트를 자신의 프로젝트에 복사하여 사용할 수 있습니다. 이 스킬은 모던하고 심플한 애니메이션 효과를 지원합니다. |
...