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

05 Dec 2023

flutter

개요

플러터(Flutter)는 구글이 개발한 사용자 인터페이스(UI) 빌드 프레임워크로, 크로스 플랫폼 앱을 개발하는 데 사용됩니다. 플러터는 다양한 디자인 트렌드를 따르는 아름다운 앱을 만들 수 있도록 다양한 애니메이션 기능을 제공합니다. 이 중 하나인 클리퍼 애니메이션은 현재 많은 앱에서 사용되는 핫한 트렌드 중 하나입니다. 이 포스트에서는 플러터 앱에서 클리퍼 애니메이션을 구현하는 방법에 대해 살펴보겠습니다.

클리퍼 애니메이션

클리퍼 애니메이션은 특정 영역을 잘라내어 독특한 모양의 애니메이션을 만들어내는 기술입니다. 이를 사용하여 사용자 경험을 향상시키고, 앱을 더욱 시각적으로 매력적으로 만들 수 있습니다.

구현 방법

플러터에서 클리퍼 애니메이션을 구현하는 방법은 다음과 같습니다.

CustomClipper 클래스를 상속받아 클리퍼 클래스를 생성합니다.
clipPath 메서드를 오버라이드하여 클리퍼의 모양을 정의합니다.
애니메이션 컨트롤러와 애니메이션 값을 설정합니다.
Container 위젯을 생성하고 ClipPath 위젯을 이용하여 클리퍼를 적용합니다.
애니메이션 컨트롤러를 시작하여 애니메이션을 실행합니다.

예시 코드

다음은 플러터 앱에서 클리퍼 애니메이션을 구현하는 예시 코드입니다.

import 'package:flutter/material.dart';

class CustomClipperAnimation extends StatefulWidget {
  @override
  _CustomClipperAnimationState createState() => _CustomClipperAnimationState();
}

class _CustomClipperAnimationState extends State<CustomClipperAnimation>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );
    _animation = Tween<double>(begin: 0, end: 1).animate(_controller);
    _controller.repeat(reverse: true);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (BuildContext context, Widget? child) {
            return ClipPath(
              clipper: CustomShapeClipper(_animation.value),
              child: Container(
                width: 200,
                height: 200,
                color: Colors.blue,
              ),
            );
          },
        ),
      ),
    );
  }
}

class CustomShapeClipper extends CustomClipper<Path> {
  final double value;

  CustomShapeClipper(this.value);

  @override
  Path getClip(Size size) {
    Path path = Path();
    path.moveTo(0, 0);
    path.lineTo(0, size.height * value);
    path.lineTo(size.width * value, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);
    path.lineTo(0, 0);
    return path;
  }

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

void main() {
  runApp(MaterialApp(
    home: CustomClipperAnimation(),
  ));
}

위 코드를 실행하면 가로 세로 200 픽셀 크기의 파란색 컨테이너가 클리퍼 애니메이션을 통해 부분적으로 잘려 나가는 모션을 보여줍니다.

목차

개요

클리퍼 애니메이션

구현 방법

예시 코드

참고 자료