Flutter Animation 처리

Flutter에서 애니메이션은 UI에 생동감을 주고 사용자 경험을 풍부하게 만드는데 유용합니다. 애니메이션은 기본적으로 Implicitly Animated Widget과 Explicitly Animated Widget 두 가지 유형으로 나뉘며, Flutter는 이를 쉽게 다룰 수 있는 다양한 위젯을 제공합니다.

1. Implicitly Animated Widgets

간단한 애니메이션 효과를 줄 때는 Flutter의 암시적 애니메이션 위젯을 사용합니다. 이러한 위젯은 특정 속성이 변경될 때 자동으로 애니메이션을 적용해줍니다.

Implicitly Animated 위젯 예제

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('Implicit Animation Example')),
        body: ImplicitAnimationExample(),
      ),
    );
  }
}

class ImplicitAnimationExample extends StatefulWidget {
  @override
  _ImplicitAnimationExampleState createState() => _ImplicitAnimationExampleState();
}

class _ImplicitAnimationExampleState extends State<ImplicitAnimationExample> {
  bool _isLarge = false;

  void _toggleSize() {
    setState(() {
      _isLarge = !_isLarge;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: GestureDetector(
        onTap: _toggleSize,
        child: AnimatedContainer(
          duration: Duration(seconds: 1),
          width: _isLarge ? 200 : 100,
          height: _isLarge ? 200 : 100,
          color: _isLarge ? Colors.blue : Colors.red,
          curve: Curves.easeInOut,
        ),
      ),
    );
  }
}

• AnimatedContainer: Container와 비슷하지만 width, height, color 등의 속성이 변경될 때 부드러운 애니메이션을 적용합니다.
• duration: 애니메이션의 지속 시간을 설정합니다.
• curve: 애니메이션 속도 변화를 설정할 수 있는 속성으로, 다양한 Curves 옵션을 통해 애니메이션 효과를 다르게 줄 수 있습니다.

 

2. Explicitly Animated Widgets

복잡한 애니메이션 시퀀스나, 애니메이션의 시작, 중지, 반복 등을 제어하려면 Explicit Animation을 사용합니다. 이를 위해 AnimationController와 Tween을 주로 활용합니다.

 

Explicit Animation 예제 (크기 확대 애니메이션)

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('Explicit Animation Example')),
        body: ExplicitAnimationExample(),
      ),
    );
  }
}

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: const Duration(seconds: 2),
      vsync: this,
    );

    _animation = Tween<double>(begin: 100, end: 200).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
    );

    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedBuilder(
        animation: _animation,
        builder: (context, child) {
          return Container(
            width: _animation.value,
            height: _animation.value,
            color: Colors.green,
          );
        },
      ),
    );
  }
}

• AnimationController: 애니메이션의 시작과 중지를 제어하는 컨트롤러입니다. duration을 설정해 애니메이션 지속 시간을 정의할 수 있습니다.
• Tween: Tween은 애니메이션 동안 값의 시작과 끝을 정의합니다. 이 예제에서는 begin: 100과 end: 200으로 크기 변화를 설정합니다.
• AnimatedBuilder: animation에 따라 위젯을 빌드하는데 사용됩니다. builder 속성으로 애니메이션 값에 맞게 변하는 위젯을 정의합니다.
  
  

 

3. 애니메이션 기본 흐름 이해하기

• AnimationController와 Tween: 명시적 애니메이션을 다룰 때는 AnimationController와 Tween이 필수입니다. AnimationController는 애니메이션의 시작, 중지, 반복 등을 제어하며, Tween은 애니메이션 동안의 변화를 정의합니다.
• 애니메이션 속도와 곡선(Curves): CurvedAnimation을 통해 애니메이션 속도와 곡선을 설정할 수 있습니다. Curves는 다양한 애니메이션 속도 변화를 제공하여 더 자연스러운 모션을 구현할 수 있습니다.

Flutter 애니메이션의 기초를 이해하고 나면 더 복잡한 시퀀스나 여러 애니메이션을 동시에 실행하는 방법, Hero 애니메이션을 통한 화면 전환 효과 등 다양한 애니메이션을 다룰 수 있습니다.