01. 애니메이션 종류
- 암시적 애니메이션(Implict Animations): 개발자가 직접 애니메이션의 세부 동작을 구현하지 않아도, 위젯의 특정 속성이 변경되면 애니메이션 효과가 적용되는 방식
- 명시적 애니메이션(Explicit Animations): 개발자가 애니메이션의 모든 세부 동작을 직접 구현하는 방식
02. 암시적 애니메이션
-> 값만 바꾸면, 프레임워크가 알아서 애니메이션을 만들어주는 방식핵심 특징
1) 핵심 특징
- 애니메이션 컨트롤러를 직접 다루지 않음
- 이전 값-> 새로운 값 사이를 자동으로 보간
- 코드가 짧고 직관적
- 복잡한 제어는 어려움
2) 공통 속성
- curve: 애니메이션은 기본적으로 0부터 1까지 진행되는 값을 기반으로 작동되는데, curve는 애니메이션이 진행되는 동안의 속도 변화를 제어 -> 애니메이션 효과 어떻게 할지 정의
- duration: Duration 객체를 선언해 0~1초까지 몇초만에 애니메이션이 진행될 지 시간 정의
* Duration: 초, 밀리초, 나노초 등과 같은 시간 단위를 나타내는 클래스
- AnimatedAlign
- alignment 속성이 변경되면 애니메이션 진행되는 위젯
- AnimatedContainer
- alignment, decoration, width, height, padding 등의 속성이 변경되면 애니메이션 진행되는 위젯
- AnimatedOpacity
- opacity 속성(투명도)이 변경되면 애니메이션이 진행되는 위젯
- AnimatedPositioned
- left, top, right, bottom 속성이 변경되면 애니메이션이 진행되는 위젯
- Stack 내에서 사용(Positioned 위젯의 애니메이션 버전)
- Hero
- 특정 화면에서 다른 화면으로 이동할 때, 두 화면에 공통적으로 나타나는 요소(예: 이미지, 텍스트 등)를 부드럽게 연결하는 애니메이션 효과를 제공
- Hero 위젯 내 tag 속성을 사용하여 두 화면의 연결 고리를 만듬. 이 태그 값이 같아야 화면 전환 시 애니메이션이 작동
03 명시적 애니메이션
-> 개발자가 애니메이션의 시작·끝·속도·곡선을 직접 제어하는 방식
1) 핵심 특징
- AnimationController 사용
- 애니메이션 진행 상태를 직접 제어
- 복잡하지만 자유도는 최고
- 반복, 중단, 되감기, 조합 가능
2) 대표 위젯
- AnimationController 객체로 애니메이션 진행상태 제어
- forward 메서드를 통해 진행, stop 메서드를 통해 중지, reset 메서드를 통해 초기화, reverse 메서드를 통해 역으로 진행 (0~1까지 값 진행)
- vsync 속성 필수, TickerProvider 객체가 vsync 속성에 들어가야 하는데 StatefulWidget 의 State클래스에서 TickerProviderMixin을 적용해서 사용(with 키워드)
- `Ticker` : Flutter가 화면을 새로고침할 때마다(60~120프레임) 애니메이션을 업데이트하도록 신호를 보냄. ⇒ 신호를 받은 Ticker 객체는 애니메이션의 진행상태를 계산하고 애니메이션 갱신
- `TickerProvider` : `Ticker`를 생성하고 관리하는 역할
- `TickerProviderMixin` : TickerProvider 구현체. State 클래스를 애니메이션 프레임 단위로 동기화할 수 있게 만듬. 적용하면 State객체는 AnimationController의 vsync로 사용이 가능한 객체가 됨
- Tween 객체로 애니메이션 시작과 끝 값을 정의하고 AnimationContoller와 결합하여 Animation 객체 생성
- Animation 객체는 AnimationController 의 0~1까지의 값을 Tween의 시작과 끝값으로 변환
- AnimatedBuilder 위젯으로 Animation 객체 변화 관찰
정리하자면, 암시적 애니메이션은 목적지만 말해주면, 알아서 부드럽게 이동하는 택시
명시적 애니메이션은 직접 핸들 잡고, 가속·감속·정지까지 다 조작하는 운전이다.
'플러터 앱 개발' 카테고리의 다른 글
| Chapter 16. 비동기 프로그래밍과 Dart (0) | 2026.02.03 |
|---|---|
| Chapter 15. 효율적인 앱 개발을 위한 스로틀링과 디바운싱 (0) | 2026.01.29 |
| Chapter 13. Flutter 데이터 통신 기초와 JSON (0) | 2026.01.21 |
| [트러블 슈팅] 1차 MVP 제작: Make를 사용하여 모듈 연결 (0) | 2026.01.19 |
| [코드 뜯어보기] 쇼핑몰 앱 만들기 B (1) | 2026.01.16 |