Flutter 튜토리얼 28편: 애니메이션 API 심화

요약#

핵심 요지#

문제 정의: 단순한 애니메이션은 쉽지만, 복잡한 시퀀스나 커스텀 효과를 만들려면 애니메이션 API를 깊이 이해해야 한다.
핵심 주장: AnimationController, Tween, Curve를 조합하면 어떤 애니메이션이든 구현할 수 있다.
주요 근거: Flutter의 애니메이션 시스템은 컴포지션¹ 패턴으로 설계되어 각 부품을 자유롭게 조합할 수 있다.
실무 기준: 스태거드 애니메이션, 다중 속성 애니메이션, 커스텀 커브 등 실제 앱에서 자주 사용하는 패턴을 다룬다.
한계: 매우 복잡한 애니메이션은 코드가 길어지므로 패키지 사용을 고려해야 한다.

문서가 설명하는 범위#

AnimationController의 생명주기와 제어
Tween으로 값 보간하기
Curve로 애니메이션 느낌 조절하기
AnimatedBuilder로 성능 최적화하기
스태거드 애니메이션으로 시퀀스 만들기
다중 속성 동시 애니메이션

읽는 시간: 18분 | 난이도: 중급~고급

참고 자료#

Animations tutorial - 애니메이션 공식 튜토리얼
Animations API overview - 애니메이션 API 개요
AnimationController class - AnimationController API
Tween class - Tween API
Curves class - 내장 커브 목록

문제 상황#

AnimatedContainer나 TweenAnimationBuilder로 간단한 애니메이션은 쉽게 만들 수 있습니다.
하지만 실제 앱에서는 더 복잡한 요구사항이 있습니다.

복잡한 애니메이션 요구사항#

1
요구사항 1: 버튼을 탭하면 카드가 위로 올라오면서 페이드인
2
요구사항 2: 첫 번째 카드가 끝나면 두 번째 카드 시작
3
요구사항 3: 모든 애니메이션이 끝나면 콜백 실행
4
요구사항 4: 중간에 취소하거나 역재생 가능

문제는 다음과 같습니다.

여러 애니메이션을 순서대로 실행해야 한다.
애니메이션 상태(진행 중, 완료, 취소)를 추적해야 한다.
성능을 위해 불필요한 위젯 리빌드를 피해야 한다.

이런 요구사항을 충족하려면 애니메이션 API를 직접 다뤄야 합니다.

해결 방법#

Flutter 애니메이션은 세 가지 핵심 컴포넌트로 구성됩니다.
AnimationController(시간), Tween(값), Curve(느낌)를 조합하면 어떤 애니메이션이든 만들 수 있습니다.

graph LR A[AnimationController 0.0 ~ 1.0] --> B[Curve easing 적용] B --> C[Tween 값 변환] C --> D[Animation 최종 값] D --> E[Widget 화면 반영]

챕터 1: AnimationController 이해하기#

Why#

NOTE
애니메이션은 시간에 따라 값이 변하는 것입니다.
AnimationController는 이 “시간”을 관리합니다.

언제 시작할지

얼마나 오래 실행할지

정방향으로 갈지 역방향으로 갈지

이것이 모든 애니메이션의 기반입니다.

What#

NOTE
AnimationController²는 0.0에서 1.0 사이의 값을 시간에 따라 생성합니다.
핵심 속성과 메서드:

속성/메서드 설명
value 현재 애니메이션 값 (0.0 ~ 1.0)
status 현재 상태 (forward, reverse, completed, dismissed)
forward() 정방향 재생 (0→1)
reverse() 역방향 재생 (1→0)
stop() 애니메이션 중지
repeat() 반복 재생
reset() 값을 0으로 리셋

속성/메서드	설명
`value`	현재 애니메이션 값 (0.0 ~ 1.0)
`status`	현재 상태 (forward, reverse, completed, dismissed)
`forward()`	정방향 재생 (0→1)
`reverse()`	역방향 재생 (1→0)
`stop()`	애니메이션 중지
`repeat()`	반복 재생
`reset()`	값을 0으로 리셋

How#

TIP

기본 사용법

1
class _MyWidgetState extends State<MyWidget>
2
    with SingleTickerProviderStateMixin {  // 필수!
3
  late AnimationController _controller;
4

5
  @override
6
  void initState() {
7
    super.initState();
8
    _controller = AnimationController(
9
      duration: Duration(milliseconds: 500),  // 애니메이션 길이
10
      vsync: this,  // 화면 새로고침과 동기화
11
    );
12
  }
13

14
  @override
15
  void dispose() {
16
    _controller.dispose();  // 메모리 누수 방지
17
    super.dispose();
18
  }
19

20
  void _playAnimation() {
21
    _controller.forward();  // 재생
22
  }
23

24
  void _reverseAnimation() {
25
    _controller.reverse();  // 역재생
26
  }
27
}

vsync란?

vsync는 화면 새로고침 주기(보통 60fps)와 애니메이션을 동기화합니다.
화면이 보이지 않을 때는 애니메이션을 멈춰서 배터리를 절약합니다.

SingleTickerProviderStateMixin은 이 기능을 제공합니다.
애니메이션이 여러 개면 TickerProviderStateMixin을 사용합니다.

Watch out#

WARNING
dispose()를 꼭 호출하세요
AnimationController는 dispose()하지 않으면 메모리 누수가 발생합니다.
위젯이 제거될 때 반드시 정리해야 합니다.
1
@override
2
void dispose() {
3
  _controller.dispose();  // 필수!
4
  super.dispose();
5
}

결론: AnimationController는 애니메이션의 시간축을 관리하며, 반드시 dispose()해야 합니다.

챕터 2: Tween으로 값 변환하기#

Why#

NOTE
AnimationController는 항상 0.0에서 1.0 사이의 값만 생성합니다.
하지만 실제로는 “0픽셀에서 300픽셀”, “빨간색에서 파란색” 같은 변환이 필요합니다.
Tween이 이 변환을 담당합니다.

What#

NOTE
Tween³은 begin과 end 사이의 값을 **보간(interpolation)**합니다.
1
AnimationController: 0.0 → 0.5 → 1.0
2
Tween(0, 300): 0 → 150 → 300
자주 쓰는 Tween 타입:

Tween 용도 예시
Tween<double> 숫자 크기, 위치, 투명도
ColorTween 색상 배경색 전환
AlignmentTween 정렬 위젯 이동
SizeTween 크기 너비/높이
RectTween 사각형 영역 전환

Tween	용도	예시
`Tween<double>`	숫자	크기, 위치, 투명도
`ColorTween`	색상	배경색 전환
`AlignmentTween`	정렬	위젯 이동
`SizeTween`	크기	너비/높이
`RectTween`	사각형	영역 전환

How#

TIP

Tween 사용법

1
// 1. Tween 생성
2
final sizeTween = Tween<double>(begin: 0, end: 300);
3

4
// 2. Animation과 연결
5
final Animation<double> sizeAnimation = sizeTween.animate(_controller);
6

7
// 3. 값 사용
8
Container(
9
  width: sizeAnimation.value,  // 0 → 300 으로 변함
10
  height: sizeAnimation.value,
11
)

ColorTween 예시:

1
final colorTween = ColorTween(
2
  begin: Colors.red,
3
  end: Colors.blue,
4
);
5

6
final colorAnimation = colorTween.animate(_controller);
7

8
// 사용
9
Container(
10
  color: colorAnimation.value,  // 빨강 → 파랑
11
)

여러 Tween을 하나의 컨트롤러에 연결:

1
// 같은 컨트롤러로 크기와 투명도 동시에 애니메이션
2
final sizeAnimation = Tween<double>(begin: 0, end: 300).animate(_controller);
3
final opacityAnimation = Tween<double>(begin: 0, end: 1).animate(_controller);

Watch out#

WARNING

Tween.animate()는 새 Animation을 반환합니다

1
// ❌ 잘못된 예: 매번 새 Animation 생성
2
Widget build(BuildContext context) {
3
  final anim = Tween<double>(begin: 0, end: 300).animate(_controller);
4
  // build()가 호출될 때마다 새 객체 생성!
5
}
6

7
// ✅ 올바른 예: initState에서 한 번만 생성
8
late Animation<double> _animation;
9

10
@override
11
void initState() {
12
  super.initState();
13
  _animation = Tween<double>(begin: 0, end: 300).animate(_controller);
14
}

결론: Tween은 0~1 범위를 원하는 값 범위로 변환하며, initState에서 한 번만 생성합니다.

챕터 3: Curve로 느낌 조절하기#

Why#

NOTE
일정한 속도의 애니메이션은 기계적으로 느껴집니다.
현실 세계에서는 물체가 천천히 시작해서 빨라지거나, 빠르게 시작해서 느려집니다.
Curve는 이런 자연스러운 가속/감속을 적용합니다.

What#

NOTE
Curve⁴는 0.0~~1.0 입력을 받아 변형된 0.0~~1.0을 출력합니다.
1
Linear (기본):    0.0 → 0.5 → 1.0  (일정한 속도)
2
easeIn:          0.0 → 0.2 → 1.0  (천천히 시작)
3
easeOut:         0.0 → 0.8 → 1.0  (천천히 끝남)
4
easeInOut:       0.0 → 0.5 → 1.0  (양쪽 천천히)
자주 쓰는 Curve:

Curve 효과 사용 예시
Curves.linear 일정한 속도 로딩 바
Curves.easeIn 천천히 시작 화면 나타남
Curves.easeOut 천천히 끝남 화면 사라짐
Curves.easeInOut 부드러운 전환 일반적인 전환
Curves.bounceOut 튕김 효과 드롭 애니메이션
Curves.elasticOut 탄성 효과 강조 효과

Curve	효과	사용 예시
`Curves.linear`	일정한 속도	로딩 바
`Curves.easeIn`	천천히 시작	화면 나타남
`Curves.easeOut`	천천히 끝남	화면 사라짐
`Curves.easeInOut`	부드러운 전환	일반적인 전환
`Curves.bounceOut`	튕김 효과	드롭 애니메이션
`Curves.elasticOut`	탄성 효과	강조 효과

How#

TIP

CurvedAnimation 사용법

1
// 1. CurvedAnimation 생성
2
final curvedAnimation = CurvedAnimation(
3
  parent: _controller,
4
  curve: Curves.easeInOut,
5
);
6

7
// 2. Tween과 연결
8
final animation = Tween<double>(begin: 0, end: 300)
9
    .animate(curvedAnimation);

chain() 메서드로 간결하게:

1
final animation = Tween<double>(begin: 0, end: 300)
2
    .chain(CurveTween(curve: Curves.easeInOut))
3
    .animate(_controller);

정방향/역방향 다른 커브:

1
final curvedAnimation = CurvedAnimation(
2
  parent: _controller,
3
  curve: Curves.easeIn,        // 정방향: 천천히 시작
4
  reverseCurve: Curves.easeOut, // 역방향: 천천히 끝
5
);

Watch out#

WARNING
커브가 범위를 벗어날 수 있습니다
Curves.elasticOut 같은 커브는 1.0을 초과했다가 돌아옵니다.
이런 커브를 색상이나 투명도에 적용하면 오류가 발생할 수 있습니다.
1
// ❌ 위험: elasticOut은 1.0을 초과할 수 있음
2
final opacityAnimation = Tween<double>(begin: 0, end: 1)
3
 .chain(CurveTween(curve: Curves.elasticOut))
4
 .animate(_controller);
5

6
// ✅ 안전: clamp로 범위 제한
7
Opacity(
8
 opacity: opacityAnimation.value.clamp(0.0, 1.0),
9
 child: child,
10
)

결론: Curve로 애니메이션의 가속/감속을 조절하여 자연스러운 느낌을 만듭니다.

챕터 4: AnimatedBuilder로 성능 최적화#

Why#

NOTE
애니메이션이 실행되면 매 프레임(초당 60회)마다 화면을 갱신해야 합니다.
setState()를 호출하면 전체 위젯 트리가 리빌드됩니다.
AnimatedBuilder는 애니메이션에 영향받는 부분만 리빌드합니다.

What#

NOTE
AnimatedBuilder⁵는 애니메이션 값이 변할 때만 builder 함수를 호출합니다.
graph TD A[AnimatedBuilder] --> B[builder 함수] A --> C[child 위젯 리빌드 안함] B --> D[애니메이션 적용 부분]
핵심 포인트:

child 파라미터에 전달된 위젯은 리빌드되지 않습니다

builder 함수 안에서만 animation.value를 사용합니다

How#

TIP

기본 사용법

1
AnimatedBuilder(
2
  animation: _animation,  // 감시할 애니메이션
3
  builder: (context, child) {
4
    // 애니메이션 값 변경될 때마다 호출됨
5
    return Transform.scale(
6
      scale: _animation.value,
7
      child: child,  // 아래의 child가 전달됨
8
    );
9
  },
10
  child: const HeavyWidget(),  // 한 번만 빌드됨!
11
)

여러 애니메이션 동시 적용:

1
AnimatedBuilder(
2
  animation: Listenable.merge([_scaleAnim, _opacityAnim]),
3
  builder: (context, child) {
4
    return Opacity(
5
      opacity: _opacityAnim.value,
6
      child: Transform.scale(
7
        scale: _scaleAnim.value,
8
        child: child,
9
      ),
10
    );
11
  },
12
  child: const MyWidget(),
13
)

vs addListener + setState:

1
// ❌ 비효율: 전체 위젯 트리 리빌드
2
_controller.addListener(() {
3
  setState(() {});  // 전체 build() 재호출
4
});
5

6
// ✅ 효율: AnimatedBuilder 부분만 리빌드
7
AnimatedBuilder(
8
  animation: _controller,
9
  builder: (context, child) => ...,
10
  child: child,  // 리빌드 안 됨
11
)

Watch out#

WARNING

builder 안에서 무거운 위젯을 만들지 마세요

1
// ❌ 비효율: HeavyWidget이 매 프레임 생성됨
2
AnimatedBuilder(
3
  animation: _animation,
4
  builder: (context, child) {
5
    return Transform.scale(
6
      scale: _animation.value,
7
      child: const HeavyWidget(),  // 매번 새로 생성!
8
    );
9
  },
10
)
11

12
// ✅ 효율: child로 분리
13
AnimatedBuilder(
14
  animation: _animation,
15
  builder: (context, child) {
16
    return Transform.scale(
17
      scale: _animation.value,
18
      child: child,  // 재사용
19
    );
20
  },
21
  child: const HeavyWidget(),  // 한 번만 생성
22
)

결론: AnimatedBuilder로 애니메이션 성능을 최적화하고, child로 불변 위젯을 분리합니다.

챕터 5: 애니메이션 상태 추적하기#

Why#

NOTE
애니메이션이 끝나면 다음 애니메이션을 시작하거나, 반복하거나, 콜백을 실행해야 할 때가 있습니다.
AnimationStatus로 애니메이션의 현재 상태를 추적합니다.

What#

NOTE
AnimationStatus⁶는 네 가지 상태를 가집니다.

상태 의미 언제?
dismissed 시작점에 있음 value == 0.0
forward 정방향 진행 중 0.0 → 1.0
reverse 역방향 진행 중 1.0 → 0.0
completed 끝점에 있음 value == 1.0

상태	의미	언제?
`dismissed`	시작점에 있음	value == 0.0
`forward`	정방향 진행 중	0.0 → 1.0
`reverse`	역방향 진행 중	1.0 → 0.0
`completed`	끝점에 있음	value == 1.0

How#

TIP

상태 리스너 등록

1
@override
2
void initState() {
3
  super.initState();
4
  _controller = AnimationController(
5
    duration: Duration(seconds: 1),
6
    vsync: this,
7
  );
8

9
  _controller.addStatusListener((status) {
10
    if (status == AnimationStatus.completed) {
11
      print('애니메이션 완료!');
12
      _controller.reverse();  // 자동 역재생
13
    } else if (status == AnimationStatus.dismissed) {
14
      print('원점 복귀!');
15
      _controller.forward();  // 자동 재생
16
    }
17
  });
18
}

무한 반복 애니메이션:

1
// 방법 1: repeat() 사용
2
_controller.repeat();  // 무한 반복
3

4
// 방법 2: 상태 리스너로 구현
5
_controller.addStatusListener((status) {
6
  if (status == AnimationStatus.completed) {
7
    _controller.reverse();
8
  } else if (status == AnimationStatus.dismissed) {
9
    _controller.forward();
10
  }
11
});
12
_controller.forward();

한 번만 실행 후 콜백:

1
void _playOnce(VoidCallback onComplete) {
2
  void listener(AnimationStatus status) {
3
    if (status == AnimationStatus.completed) {
4
      _controller.removeStatusListener(listener);  // 리스너 제거
5
      onComplete();  // 콜백 실행
6
    }
7
  }
8

9
  _controller.addStatusListener(listener);
10
  _controller.forward();
11
}

Watch out#

WARNING

리스너 제거를 잊지 마세요

상태 리스너를 제거하지 않으면 중복 호출될 수 있습니다.

1
// ❌ 위험: 매번 새 리스너 추가
2
void _startAnimation() {
3
  _controller.addStatusListener((status) { ... });  // 누적됨!
4
  _controller.forward();
5
}
6

7
// ✅ 안전: initState에서 한 번만 등록
8
@override
9
void initState() {
10
  super.initState();
11
  _controller.addStatusListener(_onStatusChanged);
12
}

결론: addStatusListener로 애니메이션 완료, 시작 등의 이벤트를 감지합니다.

챕터 6: 스태거드 애니메이션 만들기#

Why#

NOTE
여러 요소가 순서대로 또는 겹쳐서 애니메이션되면 더 세련된 효과를 만들 수 있습니다.
예: 목록 항목이 하나씩 차례로 나타남, 카드가 여러 효과로 변환됨

What#

NOTE
스태거드 애니메이션⁷은 하나의 AnimationController로 여러 애니메이션을 다른 시간에 실행합니다.
1
컨트롤러 진행: 0.0 ──────────────────────→ 1.0
2
애니메이션 1:  [=====]                      (0.0 ~ 0.3)
3
애니메이션 2:        [=====]               (0.3 ~ 0.6)
4
애니메이션 3:              [=====]         (0.6 ~ 1.0)
Interval⁸ 클래스로 각 애니메이션의 시작/끝 시점을 지정합니다.

How#

TIP

Interval로 시간대 나누기

1
late Animation<double> _slideAnimation;
2
late Animation<double> _fadeAnimation;
3
late Animation<double> _scaleAnimation;
4

5
@override
6
void initState() {
7
  super.initState();
8
  _controller = AnimationController(
9
    duration: Duration(milliseconds: 1500),
10
    vsync: this,
11
  );
12

13
  // 0% ~ 40%: 슬라이드
14
  _slideAnimation = Tween<double>(begin: -100, end: 0)
15
      .animate(CurvedAnimation(
16
        parent: _controller,
17
        curve: Interval(0.0, 0.4, curve: Curves.easeOut),
18
      ));
19

20
  // 20% ~ 60%: 페이드 (슬라이드와 겹침)
21
  _fadeAnimation = Tween<double>(begin: 0, end: 1)
22
      .animate(CurvedAnimation(
23
        parent: _controller,
24
        curve: Interval(0.2, 0.6, curve: Curves.easeIn),
25
      ));
26

27
  // 50% ~ 100%: 스케일
28
  _scaleAnimation = Tween<double>(begin: 0.8, end: 1)
29
      .animate(CurvedAnimation(
30
        parent: _controller,
31
        curve: Interval(0.5, 1.0, curve: Curves.elasticOut),
32
      ));
33
}
34

35
@override
36
Widget build(BuildContext context) {
37
  return AnimatedBuilder(
38
    animation: _controller,
39
    builder: (context, child) {
40
      return Transform.translate(
41
        offset: Offset(0, _slideAnimation.value),
42
        child: Opacity(
43
          opacity: _fadeAnimation.value,
44
          child: Transform.scale(
45
            scale: _scaleAnimation.value,
46
            child: child,
47
          ),
48
        ),
49
      );
50
    },
51
    child: const Card(...),
52
  );
53
}

목록 항목 순차 등장:

1
Widget _buildAnimatedItem(int index, int totalItems) {
2
  final startTime = index / totalItems;  // 0.0, 0.25, 0.5, 0.75
3
  final endTime = (index + 1) / totalItems;  // 0.25, 0.5, 0.75, 1.0
4

5
  final animation = Tween<double>(begin: 0, end: 1)
6
      .animate(CurvedAnimation(
7
        parent: _controller,
8
        curve: Interval(startTime, endTime, curve: Curves.easeOut),
9
      ));
10

11
  return FadeTransition(
12
    opacity: animation,
13
    child: SlideTransition(
14
      position: animation.drive(
15
        Tween(begin: Offset(0, 0.3), end: Offset.zero),
16
      ),
17
      child: ListTile(title: Text('Item $index')),
18
    ),
19
  );
20
}

Watch out#

WARNING

Interval 범위는 0.0 ~ 1.0이어야 합니다

1
// ❌ 오류: 범위 초과
2
Interval(0.8, 1.2, ...)  // 1.2는 유효하지 않음
3

4
// ✅ 올바른 예
5
Interval(0.0, 1.0, ...)  // 전체 시간
6
Interval(0.5, 1.0, ...)  // 후반 50%

결론: Interval로 하나의 컨트롤러에서 여러 애니메이션의 시작/끝 시점을 다르게 설정합니다.

한계#

저수준 애니메이션 API는 강력하지만 코드가 복잡해질 수 있습니다.

보일러플레이트: 컨트롤러, Tween, 리스너 등 설정 코드가 많습니다.
복잡한 시퀀스: 매우 복잡한 애니메이션은 flutter_animate 같은 패키지가 더 편리합니다.
디버깅: 여러 애니메이션이 얽히면 디버깅이 어렵습니다.
메모리 관리: 컨트롤러 dispose를 잊으면 메모리 누수가 발생합니다.

컴포지션(Composition): 작은 부품을 조합해서 큰 기능을 만드는 설계 패턴이다. Flutter 애니메이션은 Controller, Tween, Curve를 자유롭게 조합한다. ↩
AnimationController(애니메이션컨트롤러): 애니메이션의 시간과 상태를 관리하는 클래스다. 0.0~1.0 사이의 값을 생성하며, forward(), reverse() 등으로 제어한다. ↩
Tween(트윈): “in-between”의 줄임말로, 시작값과 끝값 사이를 보간하는 클래스다. AnimationController의 0~1 값을 원하는 범위로 변환한다. ↩
Curve(커브): 애니메이션의 진행 속도 곡선을 정의한다. linear(일정), easeIn(천천히 시작), easeOut(천천히 끝남) 등이 있다. ↩
AnimatedBuilder(애니메이티드빌더): 애니메이션 값이 변할 때만 builder 함수를 호출하는 위젯이다. child를 분리해서 성능을 최적화한다. ↩
AnimationStatus(애니메이션스테이터스): 애니메이션의 현재 상태를 나타내는 열거형이다. dismissed, forward, reverse, completed의 네 가지 값이 있다. ↩
스태거드 애니메이션(Staggered Animation): 여러 애니메이션이 시차를 두고 실행되는 패턴이다. Interval로 각 애니메이션의 시작/끝 시점을 지정한다. ↩
Interval(인터벌): 0.0~1.0 범위에서 애니메이션이 활성화되는 구간을 정의하는 Curve 서브클래스다. ↩

Flutter 튜토리얼 28편: 애니메이션 API 심화

요약#

핵심 요지#

문서가 설명하는 범위#

참고 자료#

문제 상황#

복잡한 애니메이션 요구사항#

해결 방법#

챕터 1: AnimationController 이해하기#

Why#

What#

How#

Watch out#

챕터 2: Tween으로 값 변환하기#

Why#

What#

How#

Watch out#

챕터 3: Curve로 느낌 조절하기#

Why#

What#

How#

Watch out#

챕터 4: AnimatedBuilder로 성능 최적화#

Why#

What#

How#

Watch out#

챕터 5: 애니메이션 상태 추적하기#

Why#

What#

How#

Watch out#

챕터 6: 스태거드 애니메이션 만들기#

Why#

What#

How#

Watch out#

한계#

Footnotes#

공유

목차