[플러터 게임] 2D 게임 개발의 기초 / 애니메이션 기초 / AnimationController와 Tween 사용법

 

Flutter에서 AnimationController와 Tween 쉽게 배우기: 사용법 및 옵션 설명

Flutter에서 애니메이션을 만들 때 가장 중요한 두 가지 도구는 AnimationController와 Tween입니다.

이 두 가지 도구를 잘 이해하면 다양한 애니메이션을 손쉽게 구현할 수 있습니다.

이번 블로그에서는 초보자가 쉽게 이해할 수 있도록 AnimationController와 Tween의 사용법과 각 옵션을 자세히 설명하겠습니다.

1. AnimationController란?

AnimationController는 애니메이션의 진행을 제어하는 도구로, 애니메이션의 시작, 중지, 속도 조절 등을 할 수 있습니다. AnimationController는 주로 AnimationBuilder와 함께 사용되며, 애니메이션의 상태를 화면에 반영할 수 있습니다.

1) AnimationController 기본 사용법

AnimationController는 애니메이션의 지속 시간과 애니메이션이 어느 화면 프레임에서 업데이트될지 설정할 수 있습니다.

다음 코드를 통해 기본적인 AnimationController 사용법을 알아보겠습니다.

class MyAnimation extends StatefulWidget {
  @override
  _MyAnimationState createState() => _MyAnimationState();
}

class _MyAnimationState extends State<MyAnimation> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),  // 애니메이션 지속 시간
      vsync: this,  // 화면이 업데이트될 때만 애니메이션 실행
    )..forward();  // 애니메이션을 바로 시작
  }

  @override
  void dispose() {
    _controller.dispose();  // 리소스 해제
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return Transform.scale(
            scale: _controller.value,  // _controller.value는 0.0에서 1.0 사이 값을 가짐
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          );
        },
      ),
    );
  }
}

코드 설명

1. AnimationController는 2초 동안 실행됩니다. duration 매개변수를 통해 시간을 설정할 수 있습니다.
2. vsync: this는 애니메이션이 화면에 그려질 때만 실행되도록 해줍니다. 이를 통해 불필요한 리소스 낭비를 줄일 수 있습니다.
3. ..forward()를 통해 애니메이션이 바로 시작됩니다.

2. AnimationController의 주요 옵션과 메서드

1) duration: 애니메이션의 지속 시간을 설정합니다.

• 사용법

duration: const Duration(seconds: 2)

• 애니메이션이 2초 동안 진행되도록 설정합니다.

2) vsync: 애니메이션이 실행될 때 화면이 업데이트되는지 여부를 제어합니다.

• 사용법

vsync: this

• SingleTickerProviderStateMixin을 사용해 성능을 최적화합니다.

3) forward(): 애니메이션을 시작합니다.

• 사용법

_controller.forward()

 

• 애니메이션이 앞으로 진행되며 끝까지 도달하면 멈춥니다.

4) reverse(): 애니메이션을 역방향으로 실행합니다.

• 사용법

_controller.reverse()

 

• 애니메이션이 끝에서 시작점으로 돌아갑니다.

5) repeat(): 애니메이션을 반복 실행합니다.

• 사용법

_controller.repeat()

• 애니메이션이 끝나면 다시 처음부터 시작하며 무한 반복됩니다.

6) stop(): 애니메이션을 멈춥니다.

• 사용법

_controller.stop()

• 애니메이션 진행을 중지시킵니다.

3. Tween이란?

Tween은 애니메이션에서 값을 변화시키는 도구입니다.

Tween은 애니메이션 시작 값과 끝 값을 설정하고, 애니메이션이 진행되는 동안 이 값을 변화시킵니다.

AnimationController는 애니메이션의 시간만 관리하지만, 실제로 값이 어떻게 변화하는지는 Tween이 결정합니다.

1) Tween 기본 사용법

class MyAnimation extends StatefulWidget {
  @override
  _MyAnimationState createState() => _MyAnimationState();
}

class _MyAnimationState extends State<MyAnimation> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

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

    _animation = Tween<double>(begin: 0, end: 200).animate(_controller);  // 0에서 200까지 변화
    _controller.forward();  // 애니메이션 시작
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedBuilder(
        animation: _animation,
        builder: (context, child) {
          return Container(
            width: _animation.value,  // Tween에 의해 변화하는 값 적용
            height: _animation.value,
            color: Colors.red,
          );
        },
      ),
    );
  }
}

코드 설명

1. Tween을 사용해 애니메이션의 시작 값 begin: 0과 끝 값 end: 200을 설정합니다.
2. animate() 메서드를 통해 Tween과 AnimationController를 연결하여 애니메이션을 실행합니다.
3. _animation.value는 0에서 200까지 값을 변경하며, 해당 값을 위젯의 크기에 적용합니다.

4. Tween의 다양한 옵션

1) Tween: 기본적으로 숫자 값을 변화시키는 데 사용됩니다.

• 사용법

Tween<double>(begin: 0, end: 100)

• 0에서 100까지의 값을 변화시킵니다.

2) ColorTween: 색상을 변화시킵니다.

• 사용법

ColorTween(begin: Colors.red, end: Colors.blue)

• 빨간색에서 파란색으로 색상이 변화합니다.

3) SizeTween: 크기를 변화시킵니다.

• 사용법

SizeTween(begin: Size(100, 100), end: Size(200, 200))

• 크기가 (100, 100)에서 (200, 200)으로 변합니다.

4) RectTween: 사각형의 위치나 크기를 변화시킵니다.

• 사용법

RectTween(begin: Rect.fromLTWH(0, 0, 100, 100), end: Rect.fromLTWH(50, 50, 200, 200))

• 사각형의 위치와 크기를 변화시킵니다.

5. CurvedAnimation으로 애니메이션의 속도 조절

Flutter는 CurvedAnimation을 통해 애니메이션의 속도를 제어할 수 있습니다.

애니메이션이 일정한 속도로 진행되지 않고, 천천히 시작하거나 빠르게 끝나는 등 다양한 속도 곡선을 적용할 수 있습니다.

var curvedAnimation = CurvedAnimation(
  parent: _controller,
  curve: Curves.easeInOut,  // 천천히 시작하고 빠르게 끝나는 애니메이션
);

주요 곡선 옵션

• Curves.linear: 일정한 속도로 진행
• Curves.easeIn: 천천히 시작하고 빠르게 끝남
• Curves.easeOut: 빠르게 시작하고 천천히 끝남
• Curves.bounceIn: 튕기는 듯한 효과로 시작
• Curves.elasticOut: 탄력적인 효과로 끝남

AnimationController와 Tween은 Flutter에서 애니메이션을 구현하는 기본 도구입니다.

AnimationController는 애니메이션의 시간을 제어하고, Tween은 애니메이션에서 값이 어떻게 변화할지를 결정합니다.

다양한 Tween 옵션과 CurvedAnimation을 활용하면 더욱 복잡하고 자연스러운 애니메이션을 구현할 수 있습니다.

이제 이 개념을 바탕으로 Flutter에서 멋진 애니메이션을 만들어 보세요!

 

 

구독!! 공감과 댓글은 저에게 큰 힘이 됩니다.

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱