✨ Flutter 애니메이션 쉽게 구현하기

Flutter는 UI 애니메이션 구현이 매우 강력한 프레임워크입니다.
이번 글에서는 실무에서 자주 사용하는 3가지 애니메이션 방식을 쉽게 정리해 드릴게요.

---

1️⃣ Implicit Animation (암시적 애니메이션)

기본 위젯에서 간단하게 애니메이션 효과를 주고 싶을 때 사용합니다.
예: AnimatedContainer, AnimatedOpacity, AnimatedAlign 등

AnimatedContainer(
  duration: Duration(milliseconds: 500),
  curve: Curves.easeInOut,
  width: isExpanded ? 200 : 100,
  height: 100,
  color: isExpanded ? Colors.blue : Colors.grey,
)

장점: 복잡한 컨트롤 없이 애니메이션 적용 가능
단점: 커스텀이 어려움

---

2️⃣ Tween Animation (명시적 애니메이션)

값의 변화 범위를 명확하게 지정하고 싶을 때 사용합니다.
AnimationController와 Tween을 함께 사용합니다.

// AnimationController와 Tween
_animation = Tween(begin: 0, end: 300).animate(_controller);

예: 움직이는 박스 만들기

AnimatedBuilder(
  animation: _animation,
  builder: (context, child) {
    return Container(
      width: _animation.value,
      height: 100,
      color: Colors.green,
    );
  },
)

장점: 세밀한 제어 가능
단점: 코드가 상대적으로 길어짐

---

3️⃣ Lottie Animation (디자인된 JSON 애니메이션)

디자이너가 만든 애니메이션을 앱에 쉽게 삽입할 수 있습니다.
lottie 패키지를 사용합니다.

Lottie.asset('assets/animation.json')

또는 URL로도 사용 가능:

Lottie.network('https://assets8.lottiefiles.com/packages/lf20_touohxv0.json')

장점: 고퀄리티 디자인 애니메이션을 빠르게 구현 가능
단점: 파일 사이즈 주의

---

🎯 언제 어떤 애니메이션을 쓸까?

애니메이션 방식	적합한 상황
Implicit	간단한 UI 전환 효과 (색상, 크기 변화 등)
Tween	정밀한 위치/사이즈 제어, 상태 기반 동작
Lottie	디자이너가 만든 JSON 애니메이션 사용

---

💬 정리

• UI 퀄리티 향상을 위한 필수 스킬
• 3가지 방식 모두 사용해보며 비교하는 것 추천
• 애니메이션은 과하면 UX를 해칠 수 있으니 적절히 사용하기

---