Flutter의 애니메이션 프레임워크(Framework) 및 활용 방법

Flutter의 애니메이션 프레임워크(Framework) 및 활용 방법

Flutter는 강력한 애니메이션 프레임워크를 제공하여 부드럽고 직관적인 UI 애니메이션을 구현할 수 있습니다. 애니메이션은 사용자의 경험을 향상시키고, 앱의 인터페이스를 더욱 역동적으로 만들 수 있습니다.

이 글에서는 Flutter 애니메이션 프레임워크의 구조와 암시적 및 명시적 애니메이션 적용 방법을 설명하겠습니다.

---

1. Flutter 애니메이션 프레임워크란?

Flutter의 애니메이션 프레임워크는 위젯 애니메이션과 커스텀 애니메이션을 손쉽게 구현할 수 있도록 설계되어 있습니다. 애니메이션을 활용하면 다음과 같은 효과를 얻을 수 있습니다.

• 부드러운 UI 전환: 화면 전환과 위젯 변경이 자연스러워짐
• 사용자 경험 개선: 시각적 피드백을 통해 UX 향상
• 앱의 브랜드 아이덴티티 강화: 애니메이션 스타일을 통해 차별화된 UI 제공

Flutter의 애니메이션 프레임워크는 크게 두 가지 방식으로 구분됩니다.

• 암시적 애니메이션 (Implicit Animations): 상태 변화에 따라 자동으로 애니메이션이 적용되는 방식
• 명시적 애니메이션 (Explicit Animations): 애니메이션을 직접 제어하는 방식

---

2. 암시적 애니메이션 (Implicit Animations)

암시적 애니메이션은 상태가 변경될 때 자동으로 애니메이션이 적용되는 방식입니다. 주로 AnimatedContainer, AnimatedOpacity, AnimatedAlign 등의 위젯을 사용합니다.

(1) AnimatedContainer를 사용한 크기 변화 애니메이션

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnimatedContainerExample(),
    );
  }
}

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

class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {
  double _width = 100;
  double _height = 100;
  bool _isExpanded = false;

  void _toggleSize() {
    setState(() {
      _isExpanded = !_isExpanded;
      _width = _isExpanded ? 200 : 100;
      _height = _isExpanded ? 200 : 100;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("AnimatedContainer Example")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedContainer(
              width: _width,
              height: _height,
              duration: Duration(seconds: 1),
              curve: Curves.easeInOut,
              color: Colors.blue,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _toggleSize,
              child: Text("크기 변경"),
            ),
          ],
        ),
      ),
    );
  }
}

설명:

• AnimatedContainer를 사용하여 크기 변경 애니메이션 적용
• setState를 활용하여 크기 값을 변경하면 애니메이션이 자동 실행
• curve: Curves.easeInOut을 추가하여 부드러운 변화 적용

---

3. 명시적 애니메이션 (Explicit Animations)

명시적 애니메이션은 AnimationController를 사용하여 애니메이션을 직접 제어하는 방식입니다. 더 세밀한 애니메이션 효과를 구현할 때 사용됩니다.

(1) AnimationController를 사용한 크기 애니메이션

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: 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: Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);

    _animation = Tween<double>(begin: 100, end: 200).animate(_controller);
  }

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

  @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.green,
            );
          },
        ),
      ),
    );
  }
}

설명:

• AnimationController를 사용하여 애니메이션 반복
• Tween을 활용하여 크기 변화 적용
• AnimatedBuilder를 사용하여 UI 자동 업데이트

---

4. Hero 애니메이션을 활용한 화면 전환

Hero 애니메이션은 화면 전환 시 부드러운 효과를 제공하는 기능입니다.

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("First Screen")),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: Hero(
            tag: "hero-image",
            child: Image.asset("assets/image.png", width: 100),
          ),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Hero(
          tag: "hero-image",
          child: Image.asset("assets/image.png", width: 300),
        ),
      ),
    );
  }
}

Hero 애니메이션을 사용하면 부드러운 화면 전환 효과를 구현할 수 있습니다.

---

결론

Flutter의 애니메이션 프레임워크를 활용하면 UI를 더욱 매끄럽고 직관적으로 만들 수 있습니다.

• Implicit Animations: 간단한 UI 애니메이션
• Explicit Animations: 직접 컨트롤 가능한 애니메이션
• Hero Animations: 부드러운 화면 전환

이제 Flutter의 애니메이션 기능을 활용하여 더욱 생동감 있는 앱을 만들어 보세요!