[flutter] 디자인 트렌드에 맞는 플러터 앱을 위한 클리퍼 애니메이션 구현 방법

05 Dec 2023

flutter

플러터(Flutter)는 크로스 플랫폼 앱 개발을 위한 Google의 프레임워크입니다. 이는 디자인 트렌드에 맞는 애니메이션을 만들고자 하는 개발자들에게 매우 적합한 도구입니다. 클리퍼 애니메이션은 최근 화면 전환, 위젯 이동 등과 같은 시각적 효과를 주는데 유용하게 사용됩니다. 이번 글에서는 플러터 앱에 클리퍼 애니메이션을 구현하는 방법을 알아보겠습니다.

1. 클리퍼 애니메이션의 개념

클리퍼 애니메이션은 플러터에서 애니메이션을 구현하기 위해 사용되는 기법 중 하나입니다. 이는 기본 애니메이션을 사용해서 위젯의 일부분을 잘라내어 애니메이션 효과를 줄 수 있도록 해줍니다. 예를 들어, 화면 전환 시 화면이 일부분에서부터 나타나는 등의 효과를 구현할 수 있습니다.

2. 클리퍼 애니메이션 구현 방법

2.1. 애니메이션 컨트롤러 선언하기

우선 애니메이션을 제어하기 위해 AnimationController를 선언해야 합니다. 이를 통해 애니메이션의 진행 상태나 시간을 조절할 수 있습니다.

AnimationController _animationController;

2.2. 애니메이션 값을 설정하기

AnimationController의 값을 설정하여 애니메이션이 어떤 범위에서 재생되는지를 지정할 수 있습니다. 이 값을 통해 애니메이션의 시작과 끝을 결정할 수 있습니다.

_animationController = AnimationController(
  duration: const Duration(milliseconds: 500),
  vsync: this,
  value: 0, // 시작 값
  upperBound: 1, // 종료 값
);

2.3. 클리퍼 애니메이션 적용하기

클리퍼 애니메이션을 적용할 위젯을 만들고 애니메이션 값을 이용해 해당 위젯을 잘라내는 효과를 줍니다.

ClipRect(
  child: Align(
    alignment: Alignment.centerLeft,
    widthFactor: _animationController.value,
    child: MyWidget(),
  ),
),

2.4. 애니메이션 시작 및 종료하기

애니메이션을 시작하거나 종료하기 위해서는 _animationController.forward() 및 _animationController.reverse()를 호출하여 애니메이션을 제어할 수 있습니다.

3. 클리퍼 애니메이션 예제

아래는 클리퍼 애니메이션을 구현한 예제 코드입니다.

class ClipperAnimationExample extends StatefulWidget {
  @override
  _ClipperAnimationExampleState createState() => _ClipperAnimationExampleState();
}

class _ClipperAnimationExampleState extends State<ClipperAnimationExample>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync: this,
      value: 0,
      upperBound: 1,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          if (_animationController.status == AnimationStatus.completed) {
            _animationController.reverse();
          } else if (_animationController.status == AnimationStatus.dismissed) {
            _animationController.forward();
          }
        },
        child: Center(
          child: Container(
            width: 200,
            height: 200,
            child: ClipRect(
              child: Align(
                alignment: Alignment.centerLeft,
                widthFactor: _animationController.value,
                child: Container(
                  color: Colors.blue,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

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

위의 예제 코드는 터치 이벤트에 따라 클리퍼 애니메이션이 실행되도록 합니다. 탭할 때마다 애니메이션의 상태에 따라 애니메이션을 시작하거나 종료합니다.

4. 결론

이번 글에서는 플러터 앱에서 디자인 트렌드에 맞는 클리퍼 애니메이션을 구현하는 방법을 알아보았습니다. AnimationController를 사용하여 애니메이션을 제어하고, ClipRect를 이용하여 위젯을 잘라내는 효과를 줄 수 있습니다. 플러터의 다양한 애니메이션 기법을 사용하여 앱에 생동감을 더할 수 있습니다.

참고자료

Flutter 애니메이션 가이드