Flutter 애니메이션 가이드: 기본 애니메이션 사용법

 

Flutter에서는 다양한 애니메이션 기능을 제공하여 생동감 있는 UI를 쉽게 구현할 수 있습니다.
이 글에서는 Flutter의 간단한 애니메이션 구현 방법을 소개합니다.

---

1. 애니메이션의 종류

Flutter에서 애니메이션은 크게 두 가지로 나눌 수 있습니다:

• 암시적 애니메이션 (Implicit Animations):
  • 상태 변경에 따라 자동으로 애니메이션을 적용.
  • 사용 예: AnimatedContainer, AnimatedOpacity 등.
• 명시적 애니메이션 (Explicit Animations):
  • 애니메이션의 시작, 중지, 지속 시간 등을 개발자가 직접 제어.
  • 사용 예: AnimationController, Tween, Animation 등.

---

2. 암시적 애니메이션

암시적 애니메이션은 간단한 애니메이션 효과를 구현할 때 적합합니다.

2.1 AnimatedContainer

AnimatedContainer는 컨테이너의 속성(크기, 색상, 여백 등)을 애니메이션으로 변경합니다.

import 'package:flutter/material.dart';

class AnimatedContainerExample extends StatefulWidget {
  @override
  _AnimatedContainerExampleState createState() => _AnimatedContainerExampleState();
}

class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {
  bool _isBig = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedContainer Example'),
      ),
      body: Center(
        child: AnimatedContainer(
          width: _isBig ? 200 : 100,
          height: _isBig ? 200 : 100,
          color: _isBig ? Colors.blue : Colors.red,
          duration: Duration(seconds: 1),
          curve: Curves.easeInOut,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _isBig = !_isBig;
          });
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

2.2 AnimatedOpacity

AnimatedOpacity는 위젯의 투명도를 애니메이션으로 변경합니다.

AnimatedOpacity(
  opacity: _isVisible ? 1.0 : 0.0,
  duration: Duration(seconds: 2),
  child: Text('Hello, Flutter!'),
)

---

3. 명시적 애니메이션

명시적 애니메이션은 더 복잡한 애니메이션을 제어할 때 사용됩니다.

3.1 AnimationController와 Tween

아래는 AnimationController와 Tween을 활용한 간단한 예제입니다:

import 'package:flutter/material.dart';

class ExplicitAnimationExample extends StatefulWidget {
  @override
  _ExplicitAnimationExampleState createState() => _ExplicitAnimationExampleState();
}

class _ExplicitAnimationExampleState extends State<ExplicitAnimationExample>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0, end: 300).animate(_controller);

    _controller.repeat(reverse: true);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Explicit Animation Example'),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return Container(
              width: _animation.value,
              height: _animation.value,
              color: Colors.blue,
            );
          },
        ),
      ),
    );
  }

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

---

4. 실습: 간단한 로딩 애니메이션

CircularProgressIndicator와 함께 AnimationController를 사용하여 로딩 애니메이션을 만들어보세요.

import 'package:flutter/material.dart';

class LoadingAnimation extends StatefulWidget {
  @override
  _LoadingAnimationState createState() => _LoadingAnimationState();
}

class _LoadingAnimationState extends State<LoadingAnimation>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Loading Animation'),
      ),
      body: Center(
        child: CircularProgressIndicator(
          value: _controller.value,
          semanticsLabel: 'Loading',
        ),
      ),
    );
  }

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

---

5. 결론

Flutter에서 애니메이션은 사용자의 경험을 향상시키는 중요한 요소입니다. 간단한 암시적 애니메이션부터 명시적 애니메이션까지, 다양한 방식으로 애니메이션을 구현할 수 있습니다. 다음 글에서는 애니메이션 커브와 복합 애니메이션에 대해 다뤄보겠습니다.

---

참고 자료

• Flutter 공식 문서: https://flutter.dev/docs/development/ui/animations