Animation Physics & Easing

1. Overview

애니메이션 물리학 및 이징(Animation Physics & Easing, APE)은 화면상에서 이동하는 픽셀 수치가 현실 세계의 물리 법칙(뉴턴 역학)을 따르도록 모델링하여, 사용자가 시각적 개체를 '무생물'이 아닌 '물리적 실체'로 인지하게 만드는 '시각 추적 안정성 물리학'입니다.

학습자는 등속도의 부자연스러움을 수리적으로 탈피하는 **이징 함수(Easing Functions)**의 수학적 원리와, 개체의 질량 수치에 따른 **관성(Inertia)**의 물리적 표현법을 배웁니다. 특히, 목표 지점에 도달할 때의 수치적 반동인 **탄성(Elasticity)**과 **마찰(Friction)**의 감쇠 수순을 익힙니다. 이를 통해 단순히 예쁜 움직임이 아닌, 사용자의 시선 수치가 물리적으로 가장 편안하게 따라올 수 있는 하이엔드 모션 거버넌스 역량을 확보합니다.

2. Scope & Boundaries

In-Scope

• Temporal Interpolation Math: $t(0~1)$ 값을 출력 위치 수치로 변환하는 선형/비선형 보간 기술
• Easing Function Dynamics: Linear, Ease-in, Ease-out, Bezier Curve의 수리적 특성 분석
• Physical Property Simulation: 질량, 중력, 공기 저항 수치를 반영한 동적 애니메이션 제어
• Frame Rate Optimization: 60FPS/120FPS 환경에서의 수치적 부드러움($Smoothness$) 확보
• Motion Persistence Logic: 빠른 물리 이동 시 망막에 남는 수리적 잔상(Motion Blur) 처리

Out-of-Scope

• GPU 가속을 위한 저수준 셰이더 프로그래밍 (12-05-03 영역에서 분담)
• 3D 캐릭터의 리깅(Rigging) 및 뼈대 물리 (12-07-01 영역에서 분담)

Boundaries

• APE vs. Video Editing: 영상 편집이 '고정된 프레임 수치'를 편집한다면, APE는 '사용자 환경의 시간 수치($t$)'를 변수로 입력받아 실시간으로 결과 물리 위치를 수리 연산하는 데 집중하여 구분합니다.

3. Counterexample

• 단순히 "빠르게 움직이기"라 설명하는 것은 APE 학습이 아닙니다. 왜 등속도($Linear$) 애니메이션이 인간의 뇌 하드웨어에는 기계적 불쾌함($Mechanical$ $Jarring$)을 유발하며, 시작 시 가속 수치를 주는 Ease-in보다 도착 시 감속 수치를 주는 Ease-out이 왜 사용자의 수리적 인지 완료 시점을 물리적으로 더 명확히 하는지 논증하지 못한다면 애니메이션 물리학의 본질을 이해하지 못한 것입니다.

4. Prerequisites

• Visual Perception & Gestalt Principles (Basic): 12-01-01의 시각적 연속성 이해가 필수입니다.
• Machine Learning Basics (Recommended): 11-01-01의 수치적 함수 보간(Interpolation) 기초 이해가 권장됩니다.

5. Learning Map

1. Escape from Linear: 기계적인 등속 수치를 버리고 가속도가 붙은 물리적 움직임의 기초를 배웁니다.
2. The Geometry of Time: 베지에 곡선(Bezier Curve) 수치를 통해 시간 대비 위치 변화의 미적/공학적 곡선을 설계합니다.
3. Physical Forces: 개체에 가상의 무게와 마찰 수치를 주입하여 질량감이 느껴지는 모션을 구현합니다.
4. Organic Motion: 디지털 수치가 생명체처럼 유연하게 물리 전이되는 하이엔드 동역학을 완성합니다.

6. Learning Topics

Basic

Core: 이징 함수의 수리적 원리와 종류 (Easing Physics)

• Why to Learn: 현실의 모든 물체는 정지 상태에서 즉각 최대 속도 수치에 도달하지 않으므로, 이를 모사하여 인지적 거부감을 없애기 위해서입니다.
• What to Learn:
  • Linear vs Non-linear: 시간의 흐름과 위치 변화 수치의 비례 관계
  • Standard Easing: Ease-in(가속), Ease-out(감속), Ease-in-out(혼합)의 수리적 수순
  • $f(t)$ Transformation: 0에서 1 사이의 시간 수치를 물리적 변위 수치로 매핑하는 함수
• How to Learn:
  • 동일한 물리 거리를 이동하는 3개 요소에 각각 다른 이징 수치를 부여하고, 어떤 것이 가장 '자연스러운 물리'로 느껴지는지 투표 실습
  • 애니메이션 지속 시간($Duration$) 수치가 짧을 때와 길 때 각각 적합한 이징 함수의 수리적 선택 기준 연구
• Implement: 시간 수치를 입력받아 Quadratic Ease-out 위치 수치를 반환하는 기초 Easing_Generator

Recommended

Core: 베지에 곡선과 타이밍 커브 (Curvature Dynamics)

• Why to Learn: 표준 함수를 넘어 브랜드 고유의 물리적 리듬 수치를 수리적으로 정교하게 튜닝하기 위함입니다.
• What to Learn:
  • Cubic Bezier Math: 4개의 조절점 수치($(P0, P1, P2, P3)$)로 곡선을 정의하는 원리
  • Timing Function Syntax: cubic-bezier(x1, y1, x2, y2) 수치 명세법
  • Anticipation & Follow-through: 동작 전후에 미세한 수리적 반동을 주어 물리적 활력을 부여하는 법
• How to Learn:
  • Bezier Tool을 사용하여 커브 수치를 직접 드래그하며, 물리적 '긴장감'이 수리적으로 어떻게 조절되는지 실습
  • 화면 전환 애니메이션에서 Anticipation (살짝 뒤로 갔다 앞으로 튀어 나가는 수치) 적용 전후의 박진감 수치 대조
• Implement: 수치 좌표를 입력받아 CSS Timing Function 문자열을 수리 생성하는 Bezier_Editor

Practical

Core: 힘의 시뮬레이션: 중력과 마찰 (Force Mechanics)

• Why to Learn: 개체가 튕기거나 멈출 때 물리적 질량 수치가 느껴지게 하여 조작의 '손맛'을 수치적으로 구현하기 위해서입니다.
• What to Learn:
  • Friction & Drag: 이동 중인 수치가 매 프레임마다 일정 비율로 물리 감쇠하는 역학
  • Gravity & Bounce: 수직 하강 수치와 바닥 충돌 시의 에너지 수리 보존(반발 계수)
  • Spring Physics: $F = -kx$ (훅의 법칙) 수식을 이용한 탄성 기반의 수치 보간
• How to Learn:
  • 스크롤 리스트의 끝단 수치에 도달했을 때의 Rubber-banding (고무줄 효과) 물리 수치를 수리적으로 재현하는 실습
  • 질량 수치를 다르게 설정한 두 개체가 동일한 힘 수치를 받았을 때의 물리적 가속도 차이 시뮬레이션 훈련
• Implement: 질량, 탄성, 마찰 수치를 변수로 받아 개체의 물리 좌표를 프레임별로 수리 산출하는 Physics_Animator

Advanced

Core: 성능 최적화와 가변 프레임 (Advanced Governance)

• Why to Learn: 하드웨어 성능 부족으로 인한 프레임 드롭 수치를 수리적으로 보정하여 끊김 없는 물리 경험을 유지하기 위함입니다.
• What to Learn:
  • Frame-rate Independence: FPS 수치에 상관없이 물리적 전이 속도를 수치적으로 고정하는 delta_time 법칙
  • 120Hz Animation Strategy: 고주사율 하드웨어에서의 수리적 정밀도 상향 기술
  • Layout Thrashing Prevention: 애니메이션 수치 변경이 전체 물리 레이아웃 재계산을 일으키지 않도록 격리(Layering)
• How to Learn:
  • 저성능 기기에서의 Jank Analysis (끊김 분석) 수치를 측정하고, 이를 수리적으로 해결하는 하이엔드 최적화 실습
  • GPU Compositing 수치를 확인하며 CPU 연산 수치를 최소화하는 물리적 렌더링 수순 프로젝트
• Implement: 기기 FPS 수치를 실시간 감지하여 애니메이션 수치 보정값을 계산하는 Fluid_Frame_Stabilizer

7. Terminology

8. References

Primary

• [P1] CS2023 - Graphics & Interactive Techniques - Animation Concepts — Academic curricula.
• [Foundation HTML5 Animation with JavaScript] Billy Lamberta — The physics bible for web motion.

Secondary

• [Designing with Ease] various - Practical application of easing in UX.
• [Linear: Ease-in-out-Animation] technical documentation on timing curves.

Industry

• [Framer Motion: Physics Principles] — Advanced industrial spring physics implementation.
• [Apple: Designing Fluid Interfaces] — Physicality in gesture and animation.

9. Final Checklist

Primary

• '베지에 곡선'의 제어점 수치를 조정하여 물리적 '박진감'과 '우아함'을 수리적으로 구분해 낼 수 있는가? (P1)
• 'Delta Time' 수치를 사용하지 않았을 때 FPS가 다른 두 하드웨어에서 발생하는 물리 전이 속도 차이를 논증할 수 있는 가? (P1)

Secondary

• 'Ease-out' 수치가 사용자의 물리적 '시선 정착'에 왜 유리한지 수리적 근거로 소통 가능한가?
• Spring Physics를 활용하여 고정된 애니메이션 수치보다 더 '살아있는' 물리적 반응을 수치적으로 제안할 수 있는 가?

Industry

• 실무 서비스에서 대형 팝업 노출 시 물리적 '질량감' 수치를 부여하기 위해 어떤 이징 수순을 밟아야 하는지 제안할 수 있는 가? (SFIA)
• Performance Profile 수치 분석을 통해 애니메이션이 물리적 '레이아웃 스래싱($Thrashing$)'을 일으키는지 수리 진단할 수 있는 가?