Flutter 애니메이션: AnimationController vs TweenAnimationBuilder

Flutter 애니메이션: AnimationController vs TweenAnimationBuilder

Flutter는 다양한 애니메이션 기능을 제공하며, 이를 통해 부드럽고 생동감 있는 UI를 구현할 수 있습니다. 그중에서도 AnimationController와 TweenAnimationBuilder는 가장 많이 사용되는 애니메이션 도구입니다. 두 가지 방식은 각각의 특성과 장단점이 있으므로, 상황에 맞는 적절한 선택이 중요합니다.

이 글에서는 AnimationController와 TweenAnimationBuilder의 차이점과 사용 방법을 예제와 함께 살펴보고, 언제 어떤 방식을 사용해야 하는지 안내합니다.

📌 1. AnimationController란?

AnimationController는 Flutter에서 애니메이션을 제어하는 가장 기본적인 도구입니다. 이를 통해 애니메이션의 시작, 중지, 역재생 등을 상세히 조절할 수 있습니다. 기본적으로 TickerProvider를 필요로 하며, 애니메이션의 프레임을 직접 제어합니다.

✅ 주요 특징

• 정밀한 제어: 애니메이션의 시작, 중지, 속도, 방향 변경 가능
• 커스텀 애니메이션 구현: 복잡한 애니메이션에 적합
• 상태 기반: 애니메이션의 진행 상태를 추적하고 반응 가능

📊 기본 사용 예제

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: AnimationControllerExample(),
    );
  }
}

class AnimationControllerExample extends StatefulWidget {
  const AnimationControllerExample({super.key});

  @override
  State<AnimationControllerExample> createState() => _AnimationControllerExampleState();
}

class _AnimationControllerExampleState extends State<AnimationControllerExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AnimationController 예제')),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            return Transform.scale(
              scale: 1 + _controller.value,
              child: const FlutterLogo(size: 100),
            );
          },
        ),
      ),
    );
  }
}

📌 주요 메서드

• forward() : 애니메이션 실행
• reverse() : 역방향 실행
• repeat() : 반복 실행
• stop() : 애니메이션 정지

---

📌 2. TweenAnimationBuilder란?

TweenAnimationBuilder는 Flutter에서 선언형 방식으로 애니메이션을 쉽게 구현할 수 있도록 도와주는 위젯입니다. AnimationController보다 간편한 구현이 가능하며, 상태 관리가 필요하지 않습니다.

✅ 주요 특징

• 간편한 사용: 복잡한 컨트롤 없이 애니메이션 구현 가능
• 상태 불필요: StatefulWidget 없이 애니메이션 적용
• 리소스 관리: AnimationController와 달리 수동 해제가 불필요

📊 기본 사용 예제

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: TweenAnimationExample(),
    );
  }
}

class TweenAnimationExample extends StatelessWidget {
  const TweenAnimationExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('TweenAnimationBuilder 예제')),
      body: Center(
        child: TweenAnimationBuilder<double>(
          tween: Tween(begin: 1.0, end: 2.0),
          duration: const Duration(seconds: 2),
          builder: (context, scale, child) {
            return Transform.scale(
              scale: scale,
              child: const FlutterLogo(size: 100),
            );
          },
        ),
      ),
    );
  }
}

📌 주요 매개변수

• tween : 시작값과 종료값
• duration : 애니메이션 시간
• builder : 애니메이션 값을 UI로 변환

---

📌 3. AnimationController vs TweenAnimationBuilder 비교

항목	AnimationController	TweenAnimationBuilder
제어 수준	상세한 제어 가능	간단한 애니메이션에 적합
사용 난이도	비교적 복잡함	매우 간편함
상태 관리	필요 (StatefulWidget 요구)	불필요 (자동 리소스 관리)
복잡한 애니메이션	가능 (커스텀 애니메이션 구현 가능)	제한적 (단순한 애니메이션 구현)
성능	고성능, 최적화 가능	간단한 경우 적합
예제	정밀한 진행률 추적	단순한 Tween 변화에 적합

---

📌 4. 언제 사용해야 할까?

✅ AnimationController를 선택할 때

• 애니메이션의 진행을 세부적으로 제어해야 할 때
• 반복 애니메이션이나 사용자 입력 기반 애니메이션 구현 시
• 복잡한 동작(역방향, 속도 변경)이 필요한 경우

✅ TweenAnimationBuilder를 선택할 때

• 간단한 애니메이션을 빠르게 구현해야 할 때
• 상태 관리를 최소화하고 싶을 때
• 특정 값의 변화를 부드럽게 처리할 때

---

📌 5. 결론

• AnimationController는 정밀한 제어와 복잡한 애니메이션 구현에 적합합니다.
• TweenAnimationBuilder는 간편함과 자동 리소스 관리가 필요한 경우 유용합니다.

프로젝트의 요구사항에 맞춰 적절한 도구를 선택하여 더 부드럽고 직관적인 사용자 경험을 제공하세요!