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

05 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 크로스 플랫폼 프레임워크로, iOS와 Android 모두에서 동작하는 앱을 만들 수 있습니다. 앱을 더욱 동적이고 매력적으로 만들기 위해서는 다양한 애니메이션 효과를 사용할 수 있습니다. 이 중에서 클리퍼 애니메이션은 화면의 일부분을 잘라내어 특정 영역에 애니메이션을 적용하는 효과입니다. 이번 블로그 포스트에서는 플러터 앱에서 다양한 클리퍼 애니메이션 효과를 적용하는 방법을 알아보겠습니다.

1. ClipRect를 사용한 클리퍼 애니메이션

ClipRect 위젯을 사용하면 자식 위젯을 잘라낸 영역 내에서만 표시됩니다. 이를 활용하여 다양한 클리퍼 애니메이션 효과를 구현할 수 있습니다.

class ClipRectAnimation extends StatefulWidget {
  @override
  _ClipRectAnimationState createState() => _ClipRectAnimationState();
}

class _ClipRectAnimationState extends State<ClipRectAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
  }

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

  @override
  Widget build(BuildContext context) {
    final animation = Tween(begin: 0.0, end: 1.0).animate(_animationController);

    return AnimatedBuilder(
      animation: animation,
      builder: (context, child) {
        return ClipRect(
          child: Align(
            alignment: Alignment.centerLeft,
            widthFactor: animation.value,
            child: child,
          ),
        );
      },
      child: Container(
        width: 200,
        height: 200,
        color: Colors.blue,
      ),
    );
  }
}

위의 코드는 ClipRectAnimation 위젯을 정의한 것으로, ClipRect와 Align 위젯을 사용하여 애니메이션을 적용합니다. AnimationController를 사용하여 애니메이션을 제어하고, AnimatedBuilder를 사용하여 애니메이션 값을 받아온 다음, ClipRect와 Align를 이용하여 자식 위젯을 잘라내고 애니메이션을 적용합니다.

2. ClipOval를 사용한 클리퍼 애니메이션

ClipOval 위젯을 사용하면 자식 위젯을 원 모양으로 잘라낼 수 있습니다. 이를 활용하여 다양한 클리퍼 애니메이션 효과를 구현할 수 있습니다.

class ClipOvalAnimation extends StatefulWidget {
  @override
  _ClipOvalAnimationState createState() => _ClipOvalAnimationState();
}

class _ClipOvalAnimationState extends State<ClipOvalAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
  }

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

  @override
  Widget build(BuildContext context) {
    final animation = Tween(begin: 0.0, end: 1.0).animate(_animationController);

    return AnimatedBuilder(
      animation: animation,
      builder: (context, child) {
        return ClipOval(
          child: Container(
            width: 200 * animation.value,
            height: 200 * animation.value,
            color: Colors.blue,
          ),
        );
      },
    );
  }
}

위의 코드는 ClipOvalAnimation 위젯을 정의한 것으로, ClipOval 위젯을 사용하여 자식 위젯을 원 모양으로 잘라내고 애니메이션을 적용합니다. AnimationController와 AnimatedBuilder를 이용하여 애니메이션을 제어하고, 자식 위젯의 크기를 애니메이션 값에 맞게 변경하여 애니메이션 효과를 구현합니다.

결론

플러터에서 다양한 클리퍼 애니메이션 효과를 적용하는 방법에 대해 알아보았습니다. ClipRect와 ClipOval를 사용하여 애니메이션을 구현할 수 있으며, 이를 활용하여 앱에 동적이고 매력적인 효과를 적용할 수 있습니다. 플러터의 다양한 애니메이션 기능을 사용하여 사용자에게 더욱 흥미로운 앱을 제공해보세요.