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

05 Dec 2023

flutter

clipping-animation

플러터(Flutter)는 UI 디자인에 많은 자유도를 제공하는 인기있는 크로스 플랫폼 프레임워크입니다. 최근에는 클리퍼 애니메이션(clipping animation)이 디자인의 트렌드가 되고 있습니다. 클리퍼 애니메이션은 화면의 일부분을 다른 모양으로 자르는 효과를 주어 동적인 시각적 효과를 제공하는데 사용됩니다.

이번 글에서는 플러터에서 클리퍼 애니메이션을 구현하는 방법을 알아보겠습니다.

필요한 패키지 추가하기

클리퍼 애니메이션을 구현하기 위해서는 flutter_custom_clippers 패키지를 사용할 것입니다. 이 패키지는 다양한 클리퍼 모양을 제공하고 편리하게 사용할 수 있는 도구입니다.

먼저 pubspec.yaml 파일에 다음과 같이 패키지를 추가해주세요:

dependencies:
  flutter_custom_clippers: any

그리고 터미널에서 다음 명령을 실행하여 패키지를 설치해주세요:

flutter pub get

클리퍼 애니메이션 구현하기

클리퍼 애니메이션을 구현하기 위해 다음과 같은 단계를 따르세요:

ClipPath 위젯을 사용하여 클리퍼 모양을 설정합니다.
AnimatedContainer를 사용하여 애니메이션을 적용할 컨테이너를 생성합니다.
애니메이션을 제어하기 위해 AnimationController와 CurvedAnimation을 생성합니다.
애니메이션이 진행될 때마다 클리퍼 모양을 변경하기 위해 setState를 호출합니다.

다음은 클리퍼 애니메이션을 구현하는 예제 코드입니다. (Dart 코드입니다.)

import 'package:flutter/material.dart';
import 'package:flutter_custom_clippers/flutter_custom_clippers.dart';

class ClippingAnimationScreen extends StatefulWidget {
  @override
  _ClippingAnimationScreenState createState() => _ClippingAnimationScreenState();
}

class _ClippingAnimationScreenState extends State<ClippingAnimationScreen> with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _animation;

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

    _animationController.repeat(reverse: true);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('클리퍼 애니메이션'),
      ),
      body: Stack(
        children: [
          ClipPath(
            clipper: WaveClipperOne(),
            child: Container(
              height: 200,
              color: Colors.blue,
            ),
          ),
          AnimatedBuilder(
            animation: _animation,
            builder: (context, child) {
              return ClipPath(
                clipper: WaveClipperOne(reverse: true, progress: _animation.value),
                child: Container(
                  height: 200,
                  color: Colors.red,
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

위의 코드에서는 WaveClipperOne을 사용하여 파도 모양의 클리퍼를 생성하고, AnimatedBuilder를 사용하여 애니메이션을 적용합니다. AnimatedBuilder는 애니메이션의 진행상황에 따라 ClipPath의 progress 속성을 변경하여 클리퍼의 모양을 변경합니다.

결론

이번 글에서는 플러터에서 클리퍼 애니메이션을 구현하는 방법을 알아보았습니다. flutter_custom_clippers 패키지를 사용하여 다양한 클리퍼 모양을 구현할 수 있으며, AnimatedBuilder와 애니메이션 컨트롤러를 사용하여 애니메이션을 적용했습니다.

클리퍼 애니메이션은 플러터 앱의 디자인을 동적으로 만들어주는 멋진 효과 중 하나입니다. 앱의 사용자 경험을 향상시키고 유저들의 시선을 사로잡을 수 있으니, 적극적으로 활용해보시기 바랍니다. 자세한 내용은 공식 문서를 참고해주세요.