[flutter] 플러터 앱에서 superellipse 모양을 이용한 그래프 애니메이션 구현하기

15 Dec 2023

flutter

플러터(Flutter)를 사용하여 그래프 애니메이션을 구현하고 싶으신가요? 그렇다면 superellipse(슈퍼엘립스) 모양을 이용한 그래프 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

1. superellipse 그래프 모양

슈퍼엘립스(superellipse)는 이차 다항식을 이용하여 둥근 사각형 모양을 만드는 수학적인 개념입니다.

아래는 superellipse 그래프를 플러터에서 구현하기 위한 예시 코드입니다.

import 'package:flutter/material.dart';
import 'dart:math' as math;

class SuperellipseGraph extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      size: Size(200, 200),
      painter: SuperellipsePainter(),
    );
  }
}

class SuperellipsePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.stroke;

    final double a = 100;
    final double b = 100;
    final double n = 2;

    Path path = Path();
    path.moveTo(a, 0);

    for (int i = 1; i <= 360; i++) {
      final double radians = (i * math.pi) / 180;
      final double x = math.pow(math.pow(math.cos(radians).abs(), 2 / n) * a, n).toDouble();
      final double y = math.pow(math.pow(math.sin(radians).abs(), 2 / n) * b, n).toDouble();
      path.lineTo(x, y);
    }

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

2. 애니메이션 구현하기

이제 위의 코드를 이용하여 슈퍼엘립스 그래프에 애니메이션을 추가해보겠습니다.

class SuperellipseGraph extends StatefulWidget {
  @override
  _SuperellipseGraphState createState() => _SuperellipseGraphState();
}

class _SuperellipseGraphState extends State<SuperellipseGraph> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );
    _animation = Tween(begin: 0.0, end: 360.0).animate(_controller)
      ..addListener(() {
        setState(() {
          // Update the UI based on the current animation value
        });
      });
    _controller.repeat();
  }

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

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      size: Size(200, 200),
      painter: SuperellipsePainter(rotationAngle: _animation.value),
    );
  }
}

3. 결론

이제 슈퍼엘립스 모양의 그래프를 플러터 앱에서 애니메이션과 함께 구현하는 방법을 알아보았습니다. 이를 참고하여 원하는 형태의 그래프 애니메이션을 구현해 보시기 바랍니다.

더 많은 정보를 원하시면 다음 문서를 참고하시기 바랍니다.

그럼 즐거운 코딩 되시길 바랍니다!