애니메이션(Animation) 개념

Flutter의 애니메이션(Animation)은 객체의 특정 속성값을 시간에 따라 변경하는 것입니다.

예를 들어, 위젯의 위치, 크기, 색상 등의 속성값을 변경하여 애니메이션을 구현할 수 있습니다.
Flutter에서 애니메이션은 크게 세 가지 요소로 구성됩니다.

 

Animation Controller

애니메이션의 시작과 끝을 제어하며, 애니메이션의 진행 상태를 관리합니다.

 

Animation

애니메이션을 위해 정의한 시작값과 끝값 사이를 보간(interpolate)하여 애니메이션의 중간 값(간격)을 계산합니다.

 

Animation Widget

애니메이션을 실제로 실행할 위젯입니다.

이 세 가지 요소를 조합하여, 애니메이션을 구현할 수 있습니다.

Animation Controller와 Animation은 둘 다 제네릭 타입을 사용하여, 애니메이션을 수행할 속성값의 타입을 지정해줄 수 있습니다. 예를 들어, double 타입의 속성값(위젯의 크기, 위치 등)을 변경하는 애니메이션일 경우, Animation Controller와 Animation을 아래와 같이 선언할 수 있습니다. 

 

AnimationController _controller;
Animation<double> _animation;

 

 

애니메이션의 구현 방식에는 여러 가지가 있습니다. Tween 애니메이션은 시작값과 끝값 사이의 보간값을 계산하며, Curve 애니메이션은 애니메이션의 진행 속도를 지정하는 곡선 함수(Curve)를 적용합니다.

 

 

Flutter는 다양한 애니메이션을 제공합니다. 예를 들어, AnimatedContainer, AnimatedOpacity, AnimatedPositioned, Hero, FadeTransition 등이 있습니다. 이러한 애니메이션 위젯들은 Animation Controller와 Animation을 내부적으로 처리하여, 사용자가 직접 Animation Controller와 Animation을 작성하지 않아도 간단하게 애니메이션을 구현할 수 있습니다.

 

 

 

물체가 위에서 아래로 이동하는 Tween 애니메이션의 예제 코드입니다.

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _animation;

  @override
  void initState() {
    super.initState();

    // 1. Animation Controller 생성
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    );

    // 2. Tween Animation 정의
    final tween = Tween<Offset>(
      begin: Offset(0, -1),
      end: Offset.zero,
    );

    // 3. Tween Animation에 Animation Controller 연결
    _animation = tween.animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.easeIn,
    ));

    // 4. Animation 시작
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: _animation, // 5. Animation 적용
      child: Container(
        height: 100,
        width: 100,
        color: Colors.blue,
      ),
    );
  }

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

1. Animation Controller를 생성합니다. vsync 인자로는 TickerProviderStateMixin을 상속한 위젯이나, SingleTickerProviderStateMixin을 상속한 StatefulWidget을 사용합니다.

2. Tween 애니메이션을 정의합니다. begin과 end 값으로 시작 값과 끝 값을 지정합니다. 이 예제에서는 물체를 위에서 아래로 이동시키기 위해, y값은 -1(화면의 위쪽)에서 시작하여 0(화면의 중앙)으로 끝나도록 정의합니다.

3. Tween 애니메이션에 Animation Controller를 연결합니다. 이를 위해 CurvedAnimation으로 Animation Controller와 Curve를 연결해주어, 애니메이션의 속도와 진행 방향을 지정합니다.

4. Animation을 시작합니다. forward() 함수를 호출하여, Tween 애니메이션의 시작값에서 끝값으로 이동하는 애니메이션을 시작합니다.

5. Animation을 적용할 위젯의 속성값에 Animation을 적용합니다. 이 예제에서는 SlideTransition 위젯을 사용하여, 물체를 슬라이딩하는 효과를 구현합니다. position 인자에 _animation을 지정하여, Tween 애니메이션의 중간 값을 사용하도록 합니다.

위 코드에서는 단순히 Container 위젯의 위치를 변경하였지만, 이를 활용하여 다양한 효과를 구현할 수 있습니다.