[flutter] 애니메이션을 위한 애니메이션 컨트롤러 사용하기

11 Dec 2023

flutter

애니메이션 컨트롤러는 Flutter에서 애니메이션을 컨트롤하고 관리하는 데 사용됩니다. 이를 사용하여 애니메이션의 상태와 시간을 제어할 수 있습니다. 이 포스트에서는 Flutter 애니메이션 컨트롤러를 어떻게 사용하는지에 대해 살펴보겠습니다.

애니메이션 컨트롤러 생성

먼저, SingleTickerProviderStateMixin을 상속하는 StatefulWidget 클래스를 생성하여 애니메이션을 위한 컨트롤러를 초기화할 수 있습니다.

class MyAnimatedWidget extends StatefulWidget {
  @override
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

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

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

  // 나머지 코드
}

애니메이션 제어

애니메이션 컨트롤러를 사용하여 애니메이션의 상태와 시간을 제어할 수 있습니다. 예를 들어, 다음과 같이 forward 및 reverse 메서드를 사용하여 애니메이션을 시작하고 멈출 수 있습니다.

_controller.forward(); // 애니메이션 시작
_controller.reverse(); // 애니메이션 역방향으로 실행

애니메이션 제어와 동작 연결

애니메이션 컨트롤러의 값과 애니메이션을 어떻게 동작시킬지를 Tween을 사용하여 지정할 수 있습니다. 예를 들어, 컨트롤러의 값을 ColorTween에 연결하여 배경색을 애니메이션화할 수 있습니다.

ColorTween _colorTween = ColorTween(begin: Colors.red, end: Colors.blue);
Animation<Color?> _colorAnimation = _colorTween.animate(_controller);

요약

Flutter에서 애니메이션 컨트롤러를 사용하여 애니메이션을 제어하는 방법을 살펴보았습니다. 이를 사용하면 다양한 움직임과 상태 전환이 포함된 애니메이션을 쉽게 구현할 수 있습니다. Flutter의 공식 문서에서 더 많은 정보를 확인할 수 있습니다.

이것으로 Flutter에서 애니메이션 컨트롤러를 사용하는 방법에 대한 간략한 안내를 마칩니다. 감사합니다!