Flutter Built-in animation

Contents

Flutter 내장 애니메이션 위젯

Flutter는 애니메이션을 구현할 때 유용하게 사용할 수 있는 다양한 내장 애니메이션 위젯들을 제공합니다. 이러한 위젯들은 애니메이션을 쉽게 구현할 수 있도록 도와주며, Flutter의 강력한 애니메이션 시스템을 활용하여 사용자 인터페이스에 생동감을 부여할 수 있습니다. 다음은 Flutter에서 자주 사용되는 내장 애니메이션 위젯들의 설명입니다.

1. `AnimatedContainer`

설명: AnimatedContainer는 컨테이너의 속성(크기, 색상, 모서리 반경 등)이 변경될 때 자동으로 애니메이션을 적용합니다.
주요 속성:
duration: 애니메이션의 지속 시간을 설정합니다.
curve: 애니메이션의 곡선을 설정합니다.
child: 애니메이션이 적용될 자식 위젯입니다.

예제 코드:

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> {
  bool _larger = false;

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

2. `AnimatedOpacity`

설명: AnimatedOpacity는 위젯의 불투명도(opacity)가 변경될 때 애니메이션 효과를 제공합니다.
주요 속성:
opacity: 애니메이션할 불투명도 값입니다.
duration: 애니메이션의 지속 시간입니다.
curve: 애니메이션의 곡선입니다.
child: 애니메이션이 적용될 자식 위젯입니다.

예제 코드:

import 'package:flutter/material.dart';

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

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

class AnimatedOpacityExample extends StatefulWidget {
  @override
  _AnimatedOpacityExampleState createState() => _AnimatedOpacityExampleState();
}

class _AnimatedOpacityExampleState extends State<AnimatedOpacityExample> {
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AnimatedOpacity Example')),
      body: Center(
        child: AnimatedOpacity(
          opacity: _visible ? 1.0 : 0.0,
          duration: Duration(seconds: 1),
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _visible = !_visible;
          });
        },
        child: Icon(Icons.visibility),
      ),
    );
  }
}

3. `AnimatedPositioned`

설명: AnimatedPositioned는 위젯의 위치가 변경될 때 애니메이션을 적용합니다. Stack과 함께 사용됩니다.
주요 속성:
top, bottom, left, right: 위젯의 위치를 설정합니다.
duration: 애니메이션의 지속 시간입니다.
curve: 애니메이션의 곡선입니다.
child: 애니메이션이 적용될 자식 위젯입니다.

예제 코드:

import 'package:flutter/material.dart';

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

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

class AnimatedPositionedExample extends StatefulWidget {
  @override
  _AnimatedPositionedExampleState createState() => _AnimatedPositionedExampleState();
}

class _AnimatedPositionedExampleState extends State<AnimatedPositionedExample> {
  bool _moved = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AnimatedPositioned Example')),
      body: Stack(
        children: [
          AnimatedPositioned(
            duration: Duration(seconds: 1),
            curve: Curves.easeInOut,
            top: _moved ? 200.0 : 50.0,
            left: _moved ? 200.0 : 50.0,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _moved = !_moved;
          });
        },
        child: Icon(Icons.move_to_inbox),
      ),
    );
  }
}

4. `AnimatedScale`

설명: AnimatedScale은 위젯의 크기를 변경할 때 애니메이션을 적용합니다.
주요 속성:
scale: 애니메이션할 크기 비율입니다.
duration: 애니메이션의 지속 시간입니다.
curve: 애니메이션의 곡선입니다.
child: 애니메이션이 적용될 자식 위젯입니다.

예제 코드:

import 'package:flutter/material.dart';

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

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

class AnimatedScaleExample extends StatefulWidget {
  @override
  _AnimatedScaleExampleState createState() => _AnimatedScaleExampleState();
}

class _AnimatedScaleExampleState extends State<AnimatedScaleExample> {
  bool _scaled = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AnimatedScale Example')),
      body: Center(
        child: AnimatedScale(
          scale: _scaled ? 2.0 : 1.0,
          duration: Duration(seconds: 1),
          curve: Curves.easeInOut,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _scaled = !_scaled;
          });
        },
        child: Icon(Icons.zoom_in),
      ),
    );
  }
}

5. `AnimatedSwitcher`

설명: AnimatedSwitcher는 자식 위젯이 교체될 때 애니메이션을 적용합니다. 자식 위젯이 변경되면 자동으로 애니메이션을 수행합니다.
주요 속성:
duration: 애니메이션의 지속 시간입니다.
transitionBuilder: 애니메이션을 구현하는 데 사용되는 빌더 함수입니다.
child: 애니메이션이 적용될 자식 위젯입니다.

예제 코드:

import 'package:flutter/material.dart';

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

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

class AnimatedSwitcherExample extends StatefulWidget {
  @override
  _AnimatedSwitcherExampleState createState() => _AnimatedSwitcherExampleState();
}

class _AnimatedSwitcherExampleState extends State<AnimatedSwitcherExample> {
  bool _showFirst = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AnimatedSwitcher Example')),
      body: Center(
        child: AnimatedSwitcher(
          duration: Duration(seconds: 1),
          child: _showFirst
              ? Container(
                  key: ValueKey<int>(1),
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                )
              : Container(
                  key: ValueKey<int>(2),
                  width: 100,
                  height: 100,
                  color: Colors.red,
                ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _showFirst = !_showFirst;
          });
        },
        child: Icon

(Icons.switch_left),
      ),
    );
  }
}

6. `FadeTransition`

설명: FadeTransition은 애니메이션을 통해 위젯의 불투명도를 조정합니다.
주요 속성:
opacity: 애니메이션할 불투명도입니다.
child: 애니메이션이 적용될 자식 위젯입니다.

예제 코드:

import 'package:flutter/material.dart';

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

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

class FadeTransitionExample extends StatefulWidget {
  @override
  _FadeTransitionExampleState createState() => _FadeTransitionExampleState();
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('FadeTransition Example')),
      body: Center(
        child: FadeTransition(
          opacity: _animation,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }

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

7. `ScaleTransition`

설명: ScaleTransition은 애니메이션을 통해 위젯의 크기를 조정합니다.
주요 속성:
scale: 애니메이션할 크기 비율입니다.
child: 애니메이션이 적용될 자식 위젯입니다.

예제 코드:

import 'package:flutter/material.dart';

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

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

class ScaleTransitionExample extends StatefulWidget {
  @override
  _ScaleTransitionExampleState createState() => _ScaleTransitionExampleState();
}

class _ScaleTransitionExampleState extends State<ScaleTransitionExample> 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: 0.5, end: 1.5).animate(_controller);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('ScaleTransition Example')),
      body: Center(
        child: ScaleTransition(
          scale: _animation,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }

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

요약

AnimatedContainer: 속성 값의 변경을 애니메이션으로 처리합니다.
AnimatedOpacity: 위젯의 불투명도 변화를 애니메이션합니다.
AnimatedPositioned: Stack 내에서 위젯의 위치를 애니메이션합니다.
AnimatedScale: 위젯의 크기 변화를 애니메이션합니다.
AnimatedSwitcher: 자식 위젯이 변경될 때 애니메이션을 적용합니다.
FadeTransition: 애니메이션을 통해 불투명도를 조정합니다.
ScaleTransition: 애니메이션을 통해 위젯의 크기를 조정합니다.

이러한 애니메이션 위젯들은 Flutter 애플리케이션에 생동감과 상호작용을 추가하여 사용자 경험을 향상시킬 수 있습니다.

Post Views: 150

1. AnimatedContainer

2. AnimatedOpacity

3. AnimatedPositioned

4. AnimatedScale

5. AnimatedSwitcher

6. FadeTransition

7. ScaleTransition

요약

Leave a Reply Cancel reply

1. `AnimatedContainer`

2. `AnimatedOpacity`

3. `AnimatedPositioned`

4. `AnimatedScale`

5. `AnimatedSwitcher`

6. `FadeTransition`

7. `ScaleTransition`