[flutter] 애니메이션을 사용하여 움직이는 그래픽 효과 구현하기

11 Dec 2023

flutter

모바일 앱 혹은 웹 앱에서 사용자가 상호작용하는 요소를 보다 흥미롭게 만들기 위해 애니메이션은 매우 중요합니다. Flutter를 사용하면 간단한 코드 몇 줄만으로도 다양한 애니메이션을 구현할 수 있습니다.

1. 애니메이션 시작하기

우선 Flutter 프로젝트에서 애니메이션을 시작해보겠습니다. Dart 언어를 사용하여 Flutter에 애니메이션을 추가할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: 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,
    );
    final curve = CurvedAnimation(parent: controller, curve: Curves.easeIn);
    animation = Tween(begin: 0.0, end: 300.0).animate(curve)
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          controller.reverse();
        } else if (status == AnimationStatus.dismissed) {
          controller.forward();
        }
      });
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedLogo(animation: animation);
  }

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

class AnimatedLogo extends AnimatedWidget {
  final Tween<double> _sizeAnimation = Tween<double>(begin: 0, end: 300);

  AnimatedLogo({Key key, Animation<double> animation})
      : super(key: key, listenable: animation);

  @override
  Widget build(BuildContext context) {
    final Animation<double> animation = listenable;
    return Center(
      child: Container(
        height: _sizeAnimation.evaluate(animation),
        width: _sizeAnimation.evaluate(animation),
        child: FlutterLogo(),
      ),
    );
  }
}

위 코드는 Flutter에서 애니메이션을 구현하는 간단한 예시입니다.

2. 애니메이션 개요

AnimationController: 애니메이션을 제어하고 상태를 관리하는 클래스입니다.
Tween: 시작 값과 종료 값 간의 보간을 담당하는 클래스로, 애니메이션의 시작과 끝을 정의합니다.
CurvedAnimation: 애니메이션에 곡선을 적용하여 구현할 수 있는 클래스입니다.
Animation: 애니메이션의 현재 상태를 정의하는 클래스입니다.
AnimatedWidget: 애니메이션을 위젯에 연결하는 클래스로, 위젯에 애니메이션을 적용시킬 수 있습니다.

3. 결론

Flutter를 사용하여 애니메이션을 구현할 때, AnimationController, Tween, CurvedAnimation, Animation, AnimatedWidget 등을 이용하여 간단하게 다양한 그래픽 효과를 구현할 수 있습니다. 또한, 다양한 옵션과 속성들을 조합하여 보다 다채로운 애니메이션 효과를 만들어낼 수 있습니다.