[flutter] 플러터에서 애니메이션을 구현하는 방법

11 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 UI 프레임워크로, 강력한 기능과 사용하기 쉬운 문법을 가지고 있습니다. 여기에서는 플러터에서 애니메이션을 만드는 여러 가지 방법에 대해 알아보겠습니다.

애니메이션을 위한 기본 클래스 이해

플러터에서 애니메이션을 구현하기 위해서는 Animation 및 AnimationController 클래스를 사용해야 합니다. Animation 클래스는 애니메이션의 값을 제어하고, AnimationController는 애니메이션을 제어하는 컨트롤러 역할을 합니다.

AnimationController _controller;
Animation<double> _animation;

void initState() {
  super.initState();
  _controller = AnimationController(
    duration: const Duration(milliseconds: 500),
    vsync: this,
  );
  _animation = Tween(begin: 0.0, end: 1.0).animate(_controller)
    ..addListener(() {
      setState(() {
        // 애니메이션 값을 갱신하기 위한 화면 갱신
      });
    });
}

애니메이션 효과 적용

애니메이션 효과를 적용하기 위해서는 위에서 생성한 Animation 객체를 활용하여 화면을 업데이트해야합니다. 이를 위해 다양한 위젯과 메소드를 활용할 수 있습니다. 예를 들어, AnimatedBuilder 위젯을 사용하여 애니메이션 값을 직접 전달할 수 있습니다.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: AnimatedBuilder(
        animation: _animation,
        builder: (context, child) {
          return Transform.scale(
            scale: _animation.value,
            child: FlutterLogo(size: 200),
          );
        },
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        _controller.forward();
      },
      child: Icon(Icons.play_arrow),
    ),
  );
}

커스텀 애니메이션 생성

플러터에서는 사용자가 직접 애니메이션을 커스텀할 수 있습니다. Tween 클래스를 활용하여 시작 값과 끝 값을 지정하고, Curve 클래스를 사용하여 원하는 애니메이션 곡선을 지정할 수 있습니다.

_animation = Tween(begin: 0.0, end: 1.0).chain(CurveTween(curve: Curves.easeIn)).animate(_controller);

앞으로 플러터로 다양한 애니메이션을 구현하는 방법에 대해 자세히 다루어볼 예정입니다. 애니메이션을 구현할 때 주의할 점이나 플러터에서 제공하는 다양한 애니메이션 관련 클래스에 대해 더 배우고 싶다면 공식 flutter.dev 사이트를 참고하시기 바랍니다.