[Flutter] 애니메이션, curve 와 duration ,암시적, 명시적 애니메이션의 차이

애니메이션 속성 중 curve와 duratoin이 있다.

Curve는 애니메이션이 시간에 따라 변화하는 속도를 정의하는 속성이다. 즉, 시작할때 느리게, 중간에 빠르게, 끝에서 다시 느리게 같은 자연스러운 움직임을 만들때 사용된다.

Duration은 애니메이션이 얼마나 오래 지속될지를 설정한다. 밀리초 단위로 지정한다. (Duratoin(milliseconds: 500))

 

duration은 “시간의 길이”, curve는 “시간에 따른 속도의 형태”를 결정한다.

AnimatedContainer(
  duration: const Duration(milliseconds: 600), // 총 0.6초 동안
  curve: Curves.easeInOut, // 천천히 시작 → 빠르게 → 천천히 끝
  width: isExpanded ? 200 : 100,
  height: 100,
  color: Colors.blue,
)

 

 

암시적 애니메이션(Implicit)과 명시적 애니메이션(Explicit)의 차이

암시적 애니메이션은 개발자가 직접 컨트롤 하지않고 속성변경 만으로 자동으로 애니메이션을 처리하는 애니메이션이다.

대표위젯으로는 AnimatedContainer, AnimatedOpacity, AnimatedAlign이 있다.

AnimatedContainer(
  duration: const Duration(seconds: 1),
  width: isExpanded ? 200 : 100,
  color: Colors.blue,
);

명시적 애니메이션은 개발자가 애니메이션 컨트롤러를 직접 관리하여 세밀한 제어 가능하다.

대표위젯으로는 AnimationController, Tween, AnimatedBuilder가 있따.

late AnimationController _controller;
late Animation<double> _animation;

@override
void initState() {
  super.initState();
  _controller = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 1),
  );
  _animation = Tween<double>(begin: 0, end: 200).animate(_controller);
  _controller.forward(); // 직접 실행
}

암시적 애니메이션은 자동 제어, 명시적 애니메이션은 수동 제어 방식이다.