Animated

Date: 2024.08.07 Updated: 2024.08.07

카테고리: Widget

Flutter에서 애니메이션은 사용자 인터페이스를 더욱 매력적이고 직관적으로 만드는 데 중요한 역할을 합니다. Flutter는 애니메이션을 쉽게 구현할 수 있는 다양한 위젯과 API를 제공합니다. 아래에서는 Flutter에서 애니메이션을 사용하는 방법과 몇 가지 예제를 통해 설명하겠습니다.

1. 애니메이션의 기본 개념

Flutter에서 애니메이션은 주로 Animation 객체와 AnimationController를 사용하여 구현됩니다. AnimationController는 애니메이션의 상태를 관리하고, Animation 객체는 애니메이션의 값을 정의합니다.

2. 애니메이션 구현 단계

AnimationController 생성: 애니메이션의 지속 시간과 상태를 관리합니다.
Animation 객체 생성: 애니메이션의 값을 정의합니다.
위젯에 애니메이션 적용: 애니메이션 값을 사용하여 위젯의 속성을 변경합니다.
애니메이션 시작: 애니메이션을 시작하고, 필요에 따라 반복하거나 역재생할 수 있습니다.

3. 예제: 크기 변화 애니메이션

아래 예제에서는 버튼을 클릭할 때 크기가 변화하는 애니메이션을 구현합니다.

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('Animation Example')),
        body: Center(child: AnimatedSizeExample()),
      ),
    );
  }
}

class AnimatedSizeExample extends StatefulWidget {
  @override
  _AnimatedSizeExampleState createState() => _AnimatedSizeExampleState();
}

class _AnimatedSizeExampleState extends State<AnimatedSizeExample> with SingleTickerProviderStateMixin {
  double _size = 100.0;
  bool _isExpanded = false;

  void _toggleSize() {
    setState(() {
      _isExpanded = !_isExpanded;
      _size = _isExpanded ? 200.0 : 100.0; // 크기 변경
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        AnimatedContainer(
          duration: Duration(seconds: 1), // 애니메이션 지속 시간
          width: _size,
          height: _size,
          color: Colors.blue,
          child: Center(child: Text('Tap to Expand', style: TextStyle(color: Colors.white))),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: _toggleSize,
          child: Text('Toggle Size'),
        ),
      ],
    );
  }
}

4. 예제 설명

AnimatedContainer: 이 위젯은 크기, 색상, 패딩 등을 애니메이션으로 변경할 수 있습니다. duration 속성을 통해 애니메이션의 지속 시간을 설정합니다.
_toggleSize(): 버튼 클릭 시 호출되는 메서드로, _isExpanded 상태를 변경하고 _size 값을 업데이트합니다.
setState(): 상태가 변경되면 UI를 다시 그리도록 합니다.

5. 예제: 페이드 애니메이션

이번에는 위젯이 서서히 나타나고 사라지는 페이드 애니메이션을 구현해 보겠습니다.

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('Fade Animation Example')),
        body: Center(child: FadeAnimationExample()),
      ),
    );
  }
}

class FadeAnimationExample extends StatefulWidget {
  @override
  _FadeAnimationExampleState createState() => _FadeAnimationExampleState();
}

class _FadeAnimationExampleState extends State<FadeAnimationExample> 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: 0.0, end: 1.0).animate(_controller);
  }

  void _fadeIn() {
    _controller.forward();
  }

  void _fadeOut() {
    _controller.reverse();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        FadeTransition(
          opacity: _animation,
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
            child: Center(child: Text('Fade In/Out', style: TextStyle(color: Colors.white))),
          ),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: _fadeIn,
          child: Text('Fade In'),
        ),
        ElevatedButton(
          onPressed: _fadeOut,
          child: Text('Fade Out'),
        ),
      ],
    );
  }

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

6. 예제 설명

AnimationController: 애니메이션의 지속 시간을 설정하고, 애니메이션의 상태를 관리합니다.
Tween: 애니메이션의 시작과 끝 값을 정의합니다. 여기서는 투명도(0.0에서 1.0)로 설정했습니다.
FadeTransition: 애니메이션을 적용할 위젯으로, opacity 속성에 애니메이션 값을 전달합니다.
_fadeIn() 및 _fadeOut(): 각각 애니메이션을 시작하고 역재생하는 메서드입니다.

7. 결론

Flutter에서 애니메이션은 사용자 경험을 향상시키는 중요한 요소입니다. 위의 예제들을 통해 애니메이션의 기본 개념과 구현 방법을 이해할 수 있습니다. 다양한 애니메이션 효과를 활용하여 앱의 UI를 더욱 매력적으로 만들 수 있습니다. Flutter의 애니메이션 API를 활용하여 복잡한 애니메이션도 쉽게 구현할 수 있으니, 다양한 애니메이션을 실험해 보시기 바랍니다.

HERKSS GITHUB BLOG