Flutter의 애니메이션 디자인 적용 방법과 활용

Flutter의 애니메이션 디자인 적용 방법과 활용

Flutter는 강력한 애니메이션 기능을 제공하여 부드럽고 자연스러운 UI 애니메이션을 구현할 수 있습니다. 애니메이션을 활용하면 사용자의 경험을 향상시키고, 앱의 인터페이스를 더욱 직관적으로 만들 수 있습니다.

이 글에서는 Flutter의 애니메이션 시스템을 이해하고, 다양한 애니메이션 디자인을 적용하는 방법을 설명하겠습니다.

---

1. Flutter에서 애니메이션이 중요한 이유

애니메이션을 적용하면 다음과 같은 이점이 있습니다.

• UI의 생동감: 정적인 UI보다 더욱 자연스럽고 직관적인 사용자 경험 제공
• 사용자 피드백 강화: 사용자의 액션에 따라 적절한 애니메이션을 제공하여 피드백을 강조
• 브랜드 아이덴티티 강화: 고유한 애니메이션 스타일을 적용하여 차별화된 UI 제공

Flutter에서는 애니메이션 컨트롤러와 위젯 애니메이션을 통해 다양한 애니메이션을 쉽게 구현할 수 있습니다.

---

2. Flutter의 주요 애니메이션 유형

Flutter에서 지원하는 애니메이션은 크게 다음과 같이 구분됩니다.

• Implicit Animations (암시적 애니메이션): AnimatedContainer, AnimatedOpacity 등 상태 변화에 따라 자동으로 애니메이션 적용
• Explicit Animations (명시적 애니메이션): AnimationController를 사용하여 직접 애니메이션 컨트롤
• Hero Animations: 화면 전환 시 자연스러운 애니메이션 적용
• Tween Animations: 값을 점진적으로 변화시키는 애니메이션

이제 각 애니메이션의 구현 방법을 살펴보겠습니다.

---

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

암시적 애니메이션은 상태 변화에 따라 자동으로 애니메이션이 적용되는 방식입니다.

(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("Change Size"),
            ),
          ],
        ),
      ),
    );
  }
}

설명:

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

---

4. 명시적 애니메이션 (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 자동 업데이트

---

5. 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: 간단한 애니메이션
• Explicit Animations: 직접 컨트롤 가능한 애니메이션
• Hero Animations: 부드러운 화면 전환

이제 애니메이션을 활용하여 더욱 역동적인 Flutter 앱을 개발해 보세요!