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

05 Dec 2023

flutter

Flutter

플러터(Flutter)는 Google에서 개발한 UI 프레임워크로, 모바일, 웹 및 데스크톱 애플리케이션을 만들 수 있습니다. 플러터 앱에서는 사용자 환경을 향상시키기 위해 다양한 디자인 트렌드와 애니메이션을 활용할 수 있습니다. 이 중 클리퍼 애니메이션은 앱에 동적인 요소를 추가하여 사용자에게 흥미로운 경험을 제공할 수 있습니다. 이 글에서는 플러터 앱에서 클리퍼 애니메이션을 구현하는 방법을 알아보겠습니다.

클리퍼 애니메이션 소개

클리퍼 애니메이션은 플러터에서 주어진 형태의 위젯을 기반으로 사용자가 정의한 도형으로 위젯의 일부를 잘라낼 수 있는 기능입니다. 이를 이용하면 다양한 동적인 애니메이션 효과를 구현할 수 있습니다. 예를 들어, 텍스트 위젯을 원 모양으로 자르거나 사각형 모양으로 자를 수 있습니다.

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

플러터에서 클리퍼 애니메이션을 구현하려면 다음 단계를 따르세요.

ClipPath 위젯을 사용하여 클리퍼 모양을 정의합니다. 이 위젯은 child 속성을 사용하여 자를 대상이 되는 위젯을 설정합니다.

ClipPath(
  clipper: MyCustomClipper(), // 클리퍼 모양을 정의한 클래스
  child: Container(
    // 클리핑 될 위젯
  ),
)

자를 대상이 되는 위젯을 Container 등을 사용하여 설정합니다. 원하는 디자인과 애니메이션 효과를 위젯에 적용할 수 있습니다.
MyCustomClipper 클래스를 정의하고 CustomClipper<Path>를 상속받아 클리퍼 모양을 정의합니다. 여기서 Path 클래스를 사용하여 클리퍼 모양을 그릴 수 있습니다.

class MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    // 클리퍼 모양을 정의하는 로직 작성
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return false; // 클리퍼가 다시 그려져야 하는지 여부를 지정
  }
}

위의 코드에서 getClip 메소드 내에서는 path 객체에 클리퍼 모양을 그리는 로직을 작성합니다. shouldReclip 메소드는 클리퍼가 다시 그려져야 하는지 여부를 지정합니다.

예시

이제 실제 예시를 통해 클리퍼 애니메이션을 구현해보겠습니다. 아래의 예시는 텍스트 위젯을 다이아몬드 모양으로 클리핑하는 애니메이션을 구현하는 코드입니다.

class MyDiamondClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.moveTo(size.width / 2, 0);
    path.lineTo(size.width, size.height / 2);
    path.lineTo(size.width / 2, size.height);
    path.lineTo(0, size.height / 2);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return false;
  }
}

class AnimatedClipperApp extends StatefulWidget {
  @override
  _AnimatedClipperAppState createState() => _AnimatedClipperAppState();
}

class _AnimatedClipperAppState extends State<AnimatedClipperApp> with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(vsync: this, duration: Duration(seconds: 1));
    _animation = CurvedAnimation(parent: _animationController, curve: Curves.easeInOut);
    _animationController.repeat(reverse: true);
  }

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedBuilder(
        animation: _animation,
        builder: (BuildContext context, Widget child) {
          return ClipPath(
            clipper: MyDiamondClipper(),
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Welcome',
                  style: TextStyle(fontSize: 24, color: Colors.white),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

위의 코드에서는 MyDiamondClipper 클래스를 이용하여 다이아몬드 모양의 클리퍼를 정의하고, AnimationController와 AnimatedBuilder를 사용하여 애니메이션을 적용했습니다. 이를 실행하면 애니메이션 효과를 가진 클리퍼가 적용된 텍스트 위젯을 볼 수 있습니다.

마무리

이번 글에서는 플러터 앱에서 클리퍼 애니메이션을 구현하는 방법을 알아보았습니다. 클리퍼 애니메이션을 활용하면 플러터 앱에 다양한 동적인 효과를 제공할 수 있습니다. 애니메이션과 디자인 트렌드를 조합하여 사용자 경험을 향상시키는 앱을 개발해보세요. Happy coding!

참고 자료:

Flutter official documentation: https://flutter.dev/docs
Flutter animation tutorial: https://flutter.dev/docs/development/ui/animations/tutorial