[내배캠 앱창업] Day 46 - Flutter 애니메이션

1. 오늘 학습한 내용

[Flutter 심화] 애니메이션 강의 수강

애니메이션을 크게 암시적 애니메이션(Implicit) 과
명시적 애니메이션(Explicit) 으로 나눠서 이해

2. 암시적 애니메이션 (Implicit Animations)

위젯의 속성 값이 바뀌면 자동으로 애니메이션이 적용되는 방식

복잡한 제어 없이도 자연스러운 UX를 만들 수 있음

공통적으로 자주 쓰는 속성

duration : 애니메이션이 진행되는 시간

curve : 애니메이션 속도 변화 방식 (easeIn, easeOut 등)

학습한 대표 위젯들

AnimatedAlign : 위치 변경 시 애니메이션

AnimatedContainer : 크기, 색상, 패딩, 정렬 등 여러 속성 변화

AnimatedOpacity : 투명도 변화

AnimatedPositioned : Stack 안에서 위치 변화

Hero : 화면 전환 시 같은 요소를 자연스럽게 이어주는 애니메이션

3. 명시적 애니메이션 (Explicit Animations)

애니메이션의 시작, 중지, 역방향, 초기화까지 직접 제어하는 방식

AnimationController를 중심으로 동작

핵심 개념 정리

AnimationController : 애니메이션 진행 상태(0~1) 관리

vsync : 화면 프레임과 애니메이션을 동기화

TickerProviderStateMixin : vsync 제공을 위해 필요

Tween : 시작값 ~ 끝값 정의

AnimatedBuilder : 애니메이션 값 변화 감지 후 UI 업데이트

내일도 화이팅!