Flutter에서 애니메이션

Flutter는 강력하고 유연한 애니메이션 기능을 제공하여, 개발자가 매력적이고 직관적인 사용자 경험을 만들 수 있도록 돕습니다. 애니메이션은 앱의 인터페이스를 보다 자연스럽고 역동적으로 만들기 때문에, 효과적으로 활용하면 더욱 멋진 애플리케이션을 개발할 수 있습니다.

이번 글에서는 Flutter에서 제공하는 암시적 애니메이션(Implicit Animations) 과 명시적 애니메이션(Explicit Animations) 의 차이점과 활용 방법을 소개하겠습니다. -> 나름 공부하면서 적은거라 미흡한 부분이 있습니다 

---

Flutter 애니메이션의 종류

Flutter의 애니메이션은 크게 암시적 애니메이션(Implicit Animation) 과 명시적 애니메이션(Explicit Animation) 으로 나눌 수 있습니다.

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

암시적 애니메이션은 상태(State) 변경에 따라 자동으로 애니메이션이 적용 되는 방식입니다. 별도의 컨트롤 없이도 쉽게 애니메이션을 적용할 수 있어 간단한 UI 애니메이션에 적합합니다.

AnimatedContainer 예제

AnimatedContainer(
  duration: Duration(seconds: 1),
  color: _isSelected ? Colors.blue : Colors.red,
  width: _isSelected ? 200.0 : 100.0,
  height: _isSelected ? 200.0 : 100.0,
  child: child,
);

위 코드에서는 AnimatedContainer의 속성 값(크기, 색상 등)이 변경될 때 자동으로 애니메이션이 적용됩니다.

AnimatedOpacity 예제

AnimatedOpacity(
  opacity: _visible ? 1.0 : 0.0,
  duration: Duration(seconds: 1),
  child: child,
);

위젯의 투명도가 부드럽게 변하도록 애니메이션을 적용할 수 있습니다.

---

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

명시적 애니메이션은 개발자가 애니메이션의 시작, 중지, 속도 조절 등을 직접 제어하는 방식입니다. 좀 더 복잡한 애니메이션을 만들 때 유용합니다.

AnimationController 사용 예제

class MyAnimatedWidget extends StatefulWidget {
  @override
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0, end: 100).animate(_controller)
      ..addListener(() {
        setState(() {});
      });
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: _animation.value,
      height: _animation.value,
      color: Colors.blue,
    );
  }
}

위 코드에서는 AnimationController와 Tween을 활용하여 컨테이너의 크기가 점진적으로 증가하는 애니메이션을 구현했습니다.

---

애니메이션의 주요 구성 요소

Flutter의 애니메이션을 이해하려면 Animation, AnimationController, Tween 등의 개념을 알아야 합니다.

1. Animation 객체

애니메이션의 현재 상태를 나타내며, 값의 범위와 데이터 타입을 정의합니다.

2. AnimationController

애니메이션을 시작하거나 멈추고, 속도를 조절하는 역할을 합니다.

AnimationController _controller = AnimationController(
  duration: const Duration(seconds: 2),
  vsync: this,
);

3. Tween (트윈)

애니메이션의 시작 값과 종료 값을 정의하는 역할을 합니다.

Tween<double>(begin: 0, end: 100).animate(_controller);

4. Builder 위젯

애니메이션 값이 변경될 때마다 UI를 업데이트하는 역할을 합니다.

AnimatedBuilder(
  animation: _animation,
  builder: (context, child) {
    return Container(
      width: _animation.value,
      height: _animation.value,
      color: Colors.blue,
    );
  },
);

---

Flutter 애니메이션 관련 추천 패키지

Flutter에서는 기본 애니메이션 외에도 다양한 패키지를 활용하여 더욱 강력한 애니메이션을 구현할 수 있습니다.

1. flutter_sequence_animation

여러 애니메이션을 순차적으로 실행할 수 있도록 도와주는 패키지입니다.

2. flutter_staggered_animations

리스트나 그리드에서 항목이 순차적으로 애니메이션되도록 지원합니다.

3. rive

벡터 애니메이션을 디자인하고 Flutter 애플리케이션에 통합할 수 있는 도구입니다.

---

마무리

Flutter의 애니메이션 기능을 활용하면 더욱 생동감 있는 애플리케이션을 만들 수 있습니다.

• 암시적 애니메이션 은 간단한 상태 변경에 적합하며,
• 명시적 애니메이션 은 세밀한 컨트롤이 필요한 복잡한 애니메이션에 적합합니다.

이상입니다 그럼 ㅎㅎ 오늘도 즐코 빡코 !