[Flutter] 내가 직접 조종하는 애니메이션, Flutter 명시적 애니메이션 이야기

서연·2025년 10월 20일

📖 명시적 애니메이션 (Explicit Animation)

개발자가 코드를 통해 직접 애니메이션의 시작, 종료, 속성 등을 명확히 지정하는 방식이다.

이는 암시적 애니메이션 (Implicit Animation)과 대조되며 애니메이션이 언제, 어떻게 실행될지 완전히 제어할 수 있다는 특징이 있다.

⚙️ 핵심 구성 요소

AnimationController

애니메이션의 진행 상태를 관리하는 핵심 클래스이다.

forward()는 시작, stop()은 정지, reset()은 초기화, reverse()는 되감기 등 애니메이션의 상태를 실시간으로 제어하며 값의 변화를 생성한다.

AnimationController를 생성할 때는 vsync 속성이 필수이다.

vsync

애니메이션은 초당 수십 번 화면을 다시 그리며 움직임을 만든다.

이때 vsync는 애니메이션이 화면의 리프레시 속도에 맞춰 불필요한 연산을 줄이고 성능을 최적화하도록 도와준다.

Ticker

새로운 프레임을 그릴 때마다 신호를 보내 애니메이션이 업데이트되도록 하는 역할을 한다.

신호를 받은 Ticker 객체는 애니메이션의 진행 상태를 계산하고 갱신하는 역할을 한다.

TickerProvider

Ticker를 생성하고 관리하는 역할을 한다.

즉 AnimationController가 사용할 Ticker를 제공하는 공급자이다.

TickerProviderMixin

TickerProvider가 구현된 Mixin 클래스로 statefulWidget의 state 클래스에서 with TickerProviderMixin 키워드를 사용해 적용한다.

이렇게 하면 해당 state 클래스가 vsync 속성을 자동으로 제공할 수 있게 된다.

즉 state 클래스 내에서 바로 Ticker를 사용할 수 있도록 만들어주는 역할을 한다.
class _welcomePageState extends state<WelcomePage>
// SingleTickerProviderStateMixin: 애니메이션 컨트롤러에 필요한 Ticker 제공
with SingleTickerProviderStateMixin { // Ticker는 애니메이션의 각 프레임마다 호출되는 콜백
// late : 나중에 초기화됨을 명시 (initState에서 초기화)
// final : 한 번 할당되면 변경 불가
late final AnimationController _controller; // 애니메이션의 재생, 정지, 되감기 등을 제어
@override
void initState() { // 초기화
// SingleTickerProviderStateMixin 제공
_controller = AnimationController(vsync: this) // 컨트롤러 생성
super.initState();

_controller.addStatusListener( // 애니메이션 상태 변화 감지
(status) {
// 애니메이션이 끝까지 재생됨
if(status == AnimationStatus.completed) { // 애니메이션 완료 시
// 현재 페이지를 대체하며 이동 (뒤로 가기 불가)
context.pushReplacement('/login') // 로그인 페이지로 이동
...
Lottie.asset('assets/welcome/welcome.json', // Lottie 파일 경로
controller : _controller, // 애니메이션 컨트롤러 연결
// Lottie 파일이 로드되면 composition 객체 받음
onLoaded : (composition) { // 파일 로드 완료 시
_controller.duration = composition.duration; // 애니메이션 길이 설정
_controller.forward(); // 애니메이션 재생 시작
Curve

애니메이션의 속도 변화 곡선을 정의한다.

Curves.easeInOut, Curves.linear 등으로 움직임의 리듬과 완급을 조절하며 자연스러운 동작을 만든다.

Twee

애니메이션의 시작 값과 끝 값을 정의한다.

Tween<double>(begin: 0.0, end:1.0) 형태로 지정하며 컨트롤러의 값 변화를 원하는 형태로 변환시킨다.

AnimatedBuilder

애니메이션의 현재 값을 위젯 속성에 적용해 화면을 다시 그리는 역할을 한다.

애니메이션 값이 바뀔 때마다 setState 해줄 필요 없이 UI를 부드럽게 업데이트한다.

🧩 구현 구조

주로 statefulWidget 내에서 사용된다.

AnimationController 와 Tween, Curve, AnimatedBuilder를 함께 사용해 시각적 애니메이션 효과를 만든다.

addListener 나 addStatusListener를 통해 애니메이션의 상태 변화를 감지하고 추가 동작을 수행할 수도 있다.