[flutter] 완성도 높은 플러터 앱을 위한 클리퍼 애니메이션 구현 방법

05 Dec 2023

flutter

앱 개발 과정에서 애니메이션은 사용자 경험을 향상시키는 데 있어서 매우 중요합니다. 플러터(Flutter)는 다양한 애니메이션 효과를 지원하며, 클리퍼(clipper) 애니메이션은 앱에 독특하고 부드러운 모양을 제공하는 데 사용됩니다.

클리퍼 애니메이션이란?

클리퍼 애니메이션은 도형의 경계를 따라 잘라내는 애니메이션입니다. 이는 커스텀된 도형이나 이미지를 만들고 복잡한 모양을 구현하는 데 유용합니다. 클리퍼 애니메이션은 CustomClipper 클래스를 사용하여 구현할 수 있습니다.

클리퍼 애니메이션 구현 단계

클리퍼 애니메이션을 구현하려면 다음 단계를 따르세요:

애니메이션에 사용할 도형 또는 이미지를 준비합니다.
CustomClipper 클래스를 상속하여 커스텀 클리퍼 클래스를 만듭니다.
clipPath 메소드를 오버라이드하고 필요한 모양의 경로를 반환합니다.
ClipPath 위젯을 사용하여 애니메이션에 클리퍼를 적용합니다.
애니메이션을 조작하려면 애니메이션 컨트롤러를 사용합니다.

예제 코드

import 'package:flutter/material.dart';

class MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(0, size.height * 0.3);
    path.quadraticBezierTo(
        size.width * 0.5, size.height * 0.4, size.width, size.height * 0.3);
    path.lineTo(size.width, 0);
    return path;
  }

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

class ClipperAnimation extends StatefulWidget {
  @override
  _ClipperAnimationState createState() => _ClipperAnimationState();
}

class _ClipperAnimationState extends State<ClipperAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _animation;

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

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (BuildContext context, Widget child) {
        return ClipPath(
          clipper: MyCustomClipper(),
          child: Container(
            height: 200,
            width: 200,
            color: Colors.blue,
            child: Center(
              child: Text(
                '클리퍼 애니메이션',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('클리퍼 애니메이션 예제'),
      ),
      body: Center(
        child: ClipperAnimation(),
      ),
    ),
  ));
}

참고 자료

Flutter 애니메이션 가이드