[flutter] superellipse 모양을 활용한 플러터 애니메이션 구현하기

15 Dec 2023

flutter

플러터(Flutter) 앱을 개발하다보면 애니메이션을 구현해야 할 때가 있습니다. 이번 포스트에서는 Superellipse 모양을 활용한 애니메이션을 구현하는 방법을 알아보겠습니다.

Superellipse란 무엇인가요?

Superellipse는 사각형을 부드럽게 둥글거나 뾰족한 형태로 바꾸는 곡선을 의미합니다. 이를 활용하면 더 다양하고 흥미로운 모양의 애니메이션을 구현할 수 있습니다.

애니메이션 구현하기

먼저, flutter_custom_clippers 패키지를 사용하여 Superellipse 모양의 CustomClipper를 생성합니다. 이 CustomClipper를 사용하여 컨테이너의 모양을 변경하고, 애니메이션을 적용할 수 있습니다.

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

class SuperellipseAnimation extends StatefulWidget {
  @override
  _SuperellipseAnimationState createState() => _SuperellipseAnimationState();
}

class _SuperellipseAnimationState extends State<SuperellipseAnimation>
    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: 4).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Curves.easeInOut,
      ),
    )..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          _controller.reverse();
        } else if (status == AnimationStatus.dismissed) {
          _controller.forward();
        }
      });

    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Superellipse Animation')),
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) => ClipPath(
            clipper: SuperellipseClipper(
              // specify the superellipse values based on the animation value
              cornerX: 25 * _animation.value,
              cornerY: 25 * _animation.value,
            ),
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}

위 코드에서는 AnimationController를 사용하여 Superellipse 애니메이션을 제어하고, AnimatedBuilder를 통해 애니메이션 값을 받아 컨테이너의 모양을 변경합니다.

Superellipse 모양을 적용한 컨테이너의 애니메이션을 볼 수 있습니다. 이때, flutter_custom_clippers 패키지의 SuperellipseClipper를 사용하여 Superellipse 모양을 적용합니다.

이제, Superellipse 모양을 활용하여 플러터(Flutter) 앱에서 멋진 애니메이션을 구현하는 방법을 알아보았습니다!