[flutter] 플러터 앱에서 다양한 클리퍼 애니메이션 효과 적용하기

05 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 UI 프레임워크로, 크로스 플랫폼 앱 개발을 위한 도구입니다. 플러터를 사용하면 iOS와 Android 모두에서 완벽하게 동작하는 앱을 만들 수 있습니다. 이번 포스트에서는 플러터 앱에서 다양한 클리퍼 애니메이션 효과를 적용하는 방법에 대해 알아보겠습니다.

클리퍼(Clipper) 애니메이션 이란?

클리퍼 애니메이션은 도형, 이미지 또는 텍스트를 특정 모양으로 자르는 애니메이션 효과입니다. 이를 통해 앱에 유니크하고 흥미로운 모양을 적용할 수 있습니다. 플러터에서는 CustomClipper 클래스를 사용하여 클리퍼 애니메이션을 적용할 수 있습니다.

예제 코드

다음은 플러터 앱에서 적용할 수 있는 세 가지 다른 클리퍼 애니메이션 예제 코드입니다.

import 'package:flutter/material.dart';

class CircleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.addOval(Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: size.width / 2));
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

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

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

class WaveClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    for (int i = 0; i < size.width.toInt(); i++) {
      path.lineTo(i.toDouble(), 50 * sin(i * 2 * pi / size.width) + size.height / 2);
    }
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

class ClipperAnimationApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Clipper Animation'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ClipPath(
                clipper: CircleClipper(),
                child: Container(
                  width: 200,
                  height: 200,
                  color: Colors.blue,
                ),
              ),
              SizedBox(height: 30),
              ClipPath(
                clipper: TriangleClipper(),
                child: Container(
                  width: 200,
                  height: 200,
                  color: Colors.orange,
                ),
              ),
              SizedBox(height: 30),
              ClipPath(
                clipper: WaveClipper(),
                child: Container(
                  width: 200,
                  height: 200,
                  color: Colors.green,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(ClipperAnimationApp());
}

위의 코드에서는 각각 원, 삼각형 및 파형과 같은 다양한 클리퍼 애니메이션을 적용하는 세 개의 CustomClipper 클래스를 정의합니다. 이들은 각자 getClip 메서드에서 해당 도형의 경로를 생성하고, shouldReclip 메서드는 클리퍼가 다시 그려져야 하는 경우를 제어합니다.

그리고 ClipPath 위젯을 사용하여 애니메이션 효과를 적용할 컨테이너를 감싸줍니다. 이러한 컨테이너는 원하는 크기와 색상을 가질 수 있으며, 각각의 클리퍼 애니메이션에 따라 다른 모양으로 잘립니다.

결론

이번 포스트에서는 플러터 앱에서 다양한 클리퍼 애니메이션 효과를 적용하는 방법을 알아보았습니다. 플러터는 직관적이고 강력한 애니메이션 기능을 제공하여 앱을 흥미롭게 만들어줍니다. 클리퍼 애니메이션은 앱의 디자인을 개선하고 사용자 경험을 향상시키는 효과적인 방법입니다. 여러분도 이러한 애니메이션을 활용하여 멋진 플러터 앱을 만들어보세요!