[flutter] 플러터(Flutter)의 애니메이션(Animation) 이해하기

플러터(Flutter)는 Google에서 개발한 모바일 앱 개발 프레임워크로, 다양한 애니메이션 기능을 제공합니다. 애니메이션은 사용자 경험을 향상시키고 앱에 생동감을 불어넣는 데 중요한 역할을 합니다. 이번 글에서는 플러터의 애니메이션 개념과 사용법에 대해 알아보겠습니다.

애니메이션 개요

애니메이션은 영상, 그래픽, UI 등에서 움직임을 만들어내는 기술입니다. 플러터에서 애니메이션은 Animation 클래스를 사용하여 정의됩니다. 이 클래스는 애니메이션의 상태와 구성 요소를 관리하며, 시작 값과 끝 값, 애니메이션의 진행률 등을 제어합니다.

애니메이션 타입

플러터에서는 다양한 종류의 애니메이션을 지원합니다. 일반적으로 사용되는 애니메이션은 다음과 같습니다.

애니메이션 제어

플러터에서 애니메이션은 AnimationController 클래스를 사용하여 제어됩니다. 이 클래스는 애니메이션의 시작, 정지, 반복 등을 관리합니다. 다음은 AnimationController를 사용하여 애니메이션을 제어하는 예시입니다.

AnimationController controller = AnimationController(
  duration: const Duration(seconds: 2),
  vsync: this,
);

애니메이션을 실행하고 정지하는 방법은 다음과 같습니다.

controller.forward(); // 애니메이션을 시작합니다.
controller.reverse(); // 애니메이션을 역방향으로 실행합니다.
controller.stop(); // 애니메이션을 정지합니다.

애니메이션 사용 예시

다음은 플러터에서 애니메이션을 사용하는 간단한 예시입니다. 버튼을 클릭할 때마다 로고 이미지가 부드럽게 확대/축소되는 애니메이션을 실행합니다.

class AnimatedLogo extends AnimatedWidget {
  AnimatedLogo({Key key, Animation<double> animation})
      : super(key: key, listenable: animation);

  @override
  Widget build(BuildContext context) {
    final Animation<double> animation = listenable;
    return Container(
      height: animation.value,
      width: animation.value,
      child: FlutterLogo(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(duration: const Duration(seconds: 1), vsync: this);
    animation = Tween(begin: 0.0, end: 200.0).animate(controller);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("플러터 애니메이션 예시")),
      body: Center(
        child: GestureDetector(
          child: AnimatedLogo(animation: animation),
          onTap: () {
            if (controller.isCompleted) {
              controller.reverse();
            } else {
              controller.forward();
            }
          },
        ),
      ),
    );
  }
}

결론

플러터에서 애니메이션을 사용하여 앱에 생동감을 불어넣을 수 있습니다. 애니메이션 클래스와 컨트롤러를 사용하여 애니메이션을 정의하고 제어할 수 있습니다. 다양한 애니메이션 타입을 활용하여 사용자 경험을 향상시킬 수 있습니다. 정확한 애니메이션 효과를 위해 플러터의 애니메이션 기능을 자세히 학습하고 활용해보세요.