[flutter] 플러터 애니메이션을 사용한 모션 그래픽 효과 구현 방법

11 Dec 2023

flutter

모션 그래픽 효과는 앱 또는 웹사이트의 사용자 경험을 향상시키는 데 중요한 역할을 합니다. 플러터는 다양한 애니메이션을 통해 모션 그래픽 효과를 구현할 수 있습니다. 이번 포스트에서는 플러터를 사용하여 모션 그래픽 효과를 구현하는 방법에 대해 알아보겠습니다.

애니메이션 기본

플러터에서는 Animation 클래스를 사용하여 애니메이션을 정의하고, AnimationController 클래스를 사용하여 애니메이션의 각 부분을 제어합니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('모션 그래픽 효과')),
        body: Center(child: MyAnimation()),
      ),
    );
  }
}

class MyAnimation extends StatefulWidget {
  @override
  _MyAnimationState createState() => _MyAnimationState();
}

class _MyAnimationState extends State<MyAnimation> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(duration: Duration(seconds: 2), vsync: this);
    _animation = Tween(begin: 0.0, end: 300.0).animate(_controller)
      ..addListener(() {
        setState(() {});
      });
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 10.0),
      height: _animation.value,
      width: _animation.value,
      color: Colors.green,
    );
  }

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

이 코드는 애니메이션 컨트롤러를 사용하여 상자의 크기를 변경하는 기본적인 애니메이션을 구현한 예시입니다.

커스텀 애니메이션

커스텀 애니메이션을 구현하려면 CustomPainter 클래스를 상속한 커스텀 페인트 위젯을 만들고, 이를 사용하여 원하는 그래픽 효과를 랜더링합니다.

class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint();
    paint.color = Colors.blue;
    final center = Offset(size.width / 2, size.height / 2);
    canvas.drawCircle(center, size.width / 2, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

class MyCustomAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(painter: MyCustomPainter());
  }
}

이 코드는 CustomPainter 클래스를 사용하여 원을 그리는 커스텀 애니메이션을 구현한 예시입니다.

플러터를 사용하여 애니메이션을 구현하는 방법을 알아보았습니다. 다양한 애니메이션을 활용하여 모션 그래픽 효과를 구현해보세요.

더 자세한 내용은 플러터 공식 문서를 참고하시기 바랍니다.