Flutter 애니메이션

암시적 애니메이션 vs 명시적 애니메이션

애니메이션은 개발자가 직접 애니메이션의 세부 동작을 구현하지 않아도, 위젯의 특성 속성이 변경되면 자동으로 애니메이션 효과가 적용되는 암시적 애니메이션(Implict Animations)과, 개발자가 애니메이션의 모든 세부 동작을 직접 구현하는 방식의 명시적 애니메이션(Explicit Animations)으로 나뉜다.

 

암시적 애니메이션 

공통 속성

Curve

1. 애니메이션은 기본적으로 0부터 1까지 진행되는 값을 기반으로 작동.
2. 여기에서 Curve는 애니메이션이 0에서 1로 진행되는 동안의 속도 변화를 제어.
3. 쉽게 말해, Curve는 애니메이션이 효과가 어떻게 할지 정의하는 속성.

종류

• Curves: 클래스에 구현된 Curve 인스턴스들이 정의되어 있음
• Curves.linear: 일정한 속도로 움직임.
• Curves.easeIn: 시작할 때 느리게, 점점 빠르게.
• Curves.easeOut: 빠르게 시작, 점점 느려짐.
• Curves.easeInOut: 느리게 시작, 중간에 빠르게, 끝에서 다시 느려짐.
• Curves.bounceIn: 튕기는 효과를 내며 시작.
• Curves.bounceOut: 튕기는 효과를 내며 끝남.
• Curves.bounceInOut: 양쪽에서 튕기는 효과.
• Curves.elasticIn: 시작할 때 늘어나는 탄성 효과.
• Curves.elasticOut: 끝날 때 탄성 효과.
• Curves.elasticInOut: 시작과 끝에서 탄성 효과.
• Curves.fastOutSlowIn: 빠르게 시작, 느리게 끝나는 전환.
• Curves.slowMiddle: 느리게 시작과 끝, 중간에 빠르게.

Duration

• Duration 객체를 선언해 애니메이션이 진행되는 시간 정의.
• 0~1까지 몇초만에 진행할건지 정의.
• Duration : 초, 밀리초, 나노초 등과 같은 시간 단위를 나타내는 클래스.

 

그외 속성

• AnimatedAlign
  • alignment 속성이 변경되면 애니메이션 진행되는 위젯. 
• AnimatedContainer
  • alignment, decoration, width, height, padding 등의 속성이 변경되면 애니메이션 진행되는 위젯.
• AnimatedOpacity
  • opacity 속성(투명도)이 변경되면 애니메이션이 진행되는 위젯.
• AnimatedPositioned
  • left, top, right, bottom 속성이 변경되면 애니메이션이 진행되는 위젯.
  • Stack 내에서 사용(Positioned 위젯의 애니메이션 버전).
• Hero
  • 특정 화면에서 다른 화면으로 이동할 때, 두 화면에 공통적으로 나타나는 요소(예: 이미지, 텍스트 등)를 부드럽게 연결하는 애니메이션 효과를 제공.

 

 

명시적 애니메이션

• AnimationController 객체로 애니메이션 진행상태 제어.
  • forward 메서드를 통해 진행, stop 메서드를 통해 중지, reset 메서드를 통해 초기화, reverse 메서드를 통해 역으로 진행  (0~1까지 값 진행).
• Tween 객체로 애니메이션 시작과 끝 값을 정의하고 AnimationContoller와 결합하여 Animation 객체 생성.
• Animation 객체는 AnimationController 의 0~1까지의 값을 Tween의 시작과 끝값으로 변환.
• AnimatedBuilder 위젯으로 Animation 객체 변화 관찰.