Flutter - Animations #Overview

Flutter의 애니메이션 시스템은 Animation 타입 객체를 기반으로 이루어져있습니다. 위젯들은 현재 값을 읽고 상태 변화를 기다리며 build  함수에 이러한 애니메이션을 직접 통합하거나 다른 위젯에 전달하는 보다 정교한 애니메이션의 기반으로 다른 애니메이션들을 사용할 수 있습니다. (대충 기본 애니메이션을 그냥 사용할 수도있고, 애니메이션들을 통합해서 또 다른 애니메이션을 만들 수도 있다는 맥락)

 

Animation

애니메이션 시스템의 기본 building block은 Animation 클래스입니다. 애니메이션은 애니메이션의 라이프타임 동안에 변경되는 특정한 타입의 값을 나타냅니다. 애니메이션을 수행하는 대부분의 위젯들은 Animation 객체를 파라미터로 전달받고, 그 파라미터에서 현재 애니메이션의 값을 읽고 해당 값에 대한 변경 내용을 listen 합니다.

 

addListener

애니메이션의 값이 바뀔 때마다, addListener로 추가되어있는 모든 리스너들에게 알려줍니다. 보통, 애니메이션을 listen하고 있는 State 객체는 리스너 콜백에서 setState를 호출하여 위젯 시스템에 애니메이션의 새 값으로 rebuild 해야 함을 알립니다.

 

AnimatedWidget and AnimatedBuilder, 두 위젯이 애니메이션 값이 바뀔 때 위젯을 rebuild하는 대표적인 위젯입니다. AnimatedWidget은 stateless animated 위젯을 만들 때 가장 유용합니다. AnimatedWidget을 사용하기 위해, 이 클래스를 서브클래스하고, build 함수를 구현하세요. AnimatedBuilder는 큰 build 함수의 부분으로 애니메이션을 가지는 좀 더 복잡한 위젯을 만들 때 유용합니다. AnimatedBuilder를 사용하고 싶다면, 위젯을 만들고 builder 함수로 넘겨주세요.

 

addStatusListener

애니메이션은 시간이 지남에 따라 어떤 상태에 있는지에 대한 정보를 제공하는 AnimationStatus를 가집니다. 애니메이션의 상태가 변화하면, addStatusListener로 추가된 리스너들에게 알려줍니다. 일반적으로 시작에 있음을 의미하는 dismissed 상태로 시작 합니다. 예를 들면, 0.0 ~ 1.0 사이를 진행하는 애니메이션은 값이 0.0 일 때 dismissed 상태 입니다. 애니메이션은 그 다음 forward(0.0에서 1.0로)나 reverse(1.0에서 0.0으로) 진행합니다. 결과적으로, 만약 애니메이션이 해당 범위의 끝(1.0)에 도달하면, 애니메이션은 completed 상태에 도달합니다.

 

AnimationController

애니메이션을 생성하고 싶다면, 먼저 AnimationController을 생성하세요. AnimationController는 애니메이션 자체 뿐만 아니라 애니메이션을 제어할 수 있도록 해줍니다. 예를 들면, 컨트롤러에게 애니메이션을 forward or stop 하도록 할 수있습니다. 스프링과 같은 물리적 시뮬레이션을 사용하여 fling 애니메이션을 만들 수 도 있습니다.

 

AnimationController를 만들고 나면, 다른 애니메이션을 이 컨트롤러를 기반으로 만들 수 있습니다. 예를 들면, 원래 애니메이션을 복사하지만, 반대 방향으로 진행하는 ReverseAnimation을 만들 수 있습니다. 비슷하게, 값이 Curve로 조절되는 CurvedAnimation를 생성할 수도 있습니다.

 

Tweens

0.0과 1.0 간격을 넘어서 애니메이트하고 싶다면, begin and end 값 사이를 보간하는 Tween<T>를 사용하세요. 많은 타입들은 type-specific 보간법을 제공하는 구체화된 Tween 서브클래스가 존재합니다. 예를 들면, ColorTween는 색상을 보간하고, RectTween는 사각형을 보간합니다. 커스텀 Tween의 서브클래스를 생성하고, lerp 함수를 오버라이드하여 커스텀 보간법을 정의할 수 있습니다.

 

Tween은 스스로 시작 값과 끝 값을 어떻게 보간해야 할지 정의합니다. 애니메이션의 현재 프레임을 위한 정확한 값을 얻기 위해, 애니메이션이 현재 상태를 결정하게 해야합니다. 정확한 값을 얻기 위해 tween을 애니메이션과 결합하는 방법은 2가지가 있습니다.

 

애니메이션의 현재 값에서 tween을 evaluate 할 수 있습니다. 이 접근법은 위젯이 이미 애니메이션을 리스닝하고 있으므로 애니메이션 값이 변경될 때마다 다시 빌드하는 위젯에 가장 유용합니다.

애니메이션을 기반으로 tween을 animate 할 수 있습니다. animate 함수는 단일 값을 반환하지 않고, tween과 통합된 새로운 Animation을 반환합니다. 이 접근법은 위젯에 새롭게 생성된 애니메이션을 주고 싶을 때 유용합니다. 해당 위젯은 값의 변화를 listen 할 수 있을 뿐만 아니라, tween과 통합된 현재 값을 읽을 수 있습니다.

 

Architecture

애니메이션은 많은 핵심 구성 요소들로 만들어집니다.

 

Scheduler

The SchedulerBinding is a singleton class that exposes the Flutter scheduling primitives.

 

이 논의에서 중요한 것은 프레임 콜백입니다. 매 시간 프레임은 화면에 보여져야하기 때문에, Flutter 엔진은 등록된 리스너들에게 scheduleFrameCallback()를 사용하여 스케쥴러가 멀티플렉스하게 하는 "begin frame" 콜백을 트리거합니다. 이 모든 콜백은 임의의 에포크로부터 Duration 형태로 프레임의 공식적인 타임 스탬프가 주어집니다. 모든 콜백은 같은 시간을 가지므로, 이러한 콜백에서 트리거된 애니메이션은 실행되는 데 몇 밀리초가 걸리더라도 정확히 동기화됩니다.

 

Tickers

Ticker 클래스는 콜백을 매 틱마다 발생시키기 위해 스케쥴러의 scheduleFrameCallback() 메커니즘에 사용됩니다.

 

Ticker는 시작되고 멈출 수 있습니다. 시작되면, 멈출 때 리졸브되는 Future를 반환합니다.

 

매 틱마다, Ticker는 시작 후 첫 틱 이후의 duration을 콜백합니다.

 

Ticker는 항상 시작 후 첫 틱에 상대적인 경과 시간을 제공하므로, ticker는 모두 동기화 되어있습니다. 두 틱 사이에 서로 다른 시간에 세 개의 ticker를 시작하면, 다른 시간에 시작했음에도 불구하고 모두 동일한 시작 시간으로 동기화고 이후 lockstep에서 틱 됩니다. 사람들이 버스 정류장에 있는 것 처럼, 모든 ticker들은 시간을 카운트하기 위해 정기적으로 발생하는 틱을 기다립니다.

 

Simulations

Simulation 추상 클래스는 상대적인 시간 값(elapsed time)을 double 값으로 매핑하고 완료의 개념을 가지고 있습니다.

 

원칙적으로 simulations는 stateless 이지만, 실질적으로 몇몇 simulations들은(예를 들면, BouncingScrollSimulation and ClampingScrollSimulation) 쿼리될 때 되돌릴 수 없게 상태를 변경합니다.

 

다양한 효과를 위한 Simulation 클래스의 various concrete implementations 가 있습니다.

 

Animatables

Animatable 추상 클래스는 double 값을 특정 타입의 값으로 매핑합니다.

 

Animatable 클래스는 stateless이고 불변합니다.

 

Tweens

Tween<T> 추상 클래스는 Animatable이고, double 값을 명목상으로 0.0 ~ 1.0 의 범위를 특정 타입의 값으로 매핑합니다.(예를 들면, Color나 다른 double들).

 

출력 타입(T), 해당 타입의 사작 값과 끝 값, 주어진 입력 값에 대한 시작과 끝 값 사이를 보간(lerp)하는 방법을 가지고 있습니다.

 

Tween 클래스는 stateless이고 불변합니다.

 

Composing animatables

Animatable<double>(부모)을 Animatable의 chain() 메소드로 넘기는 것은 부모 매핑과 자식 매핑을 적용하는 새 Animatble 서브클래스를 생성합니다.

 

Curves

Curve 추상 클래스는 doubles 0.0 ~ 1.0 범위를 0.0 ~ 1.0 범위로 매핑합니다.(동일하지만, 그래프가 커브)

 

Curve 클래스는 stateless이고 불변합니다.

 

Animations

Animation 추상 클래스는 애니메이션 방향 및 애니메이션 상태의 개념 같은 주어진 타입의 값과, 상태가 변경될 때 호출되는 콜백을 등록하기 위한 listener 인터페이스를 제공합니다.

 

몇몇 Animation의 서브클래스들은 바뀌지 않는 값들을 가집니다(kAlwaysCompleteAnimation, kAlwaysDismissedAnimation, AlwaysStoppedAnimation); 콜백이 호출되지 않기 때문에 이런 클래스들에 콜백을 등록하는 것은 효과가 없습니다.

 

Animation<double>의 변형은 Curve 및 Tween 클래스와 애니메이션의 일부 서브 클래스에서 기대되는 입력인 0.0 ~ 1.0 범위로 명목상의 double 값을 나타내는 데 사용할 수 있기 때문에 특별합니다.

 

몇몇 Animation 서브클래스들은 stateless이며 listeners를 부모에게 forwarding하기만 합니다. 그리고 몇몇은 stateful 합니다.

 

Composable animations

대부분의 Animation 서브클래스들은 명시적인 "부모인" Animation<double>을 가집니다. 그들은 부모로부터 driven 됩니다.

 

CurvedAnimation 서브클래스는 Animation<double> 클래스(부모)를, 여러개의 Curve 클래스(forward, reverse curves)를 입력으로 가지고, 출력을 결정하기 위해 부모의 값을 curves의 입력으로 사용합니다. CurvedAnimation은 불변하고 stateless 합니다.

 

ReverseAnimation 서브 클래스는 Animation<double> 클래스를 부모로 가지고 애니메이션의 값을 뒤집습니다. 이 클래스는 부모가 명목상의 값으로 0.0 ~ 1.0의 범위를 사용한다고 가정하고, 1.0 ~ 0.0 사이의 값을 반환합니다. 부모 애니메이션의 방향과 상태 또한 반전됩니다. ReverseAnimation은 불변하고 stateless 입니다.

 

ProxyAnimation 서브클래스는 Animation<double> 클래스를 부모로 가지고, 단지 부모의 현재 상태를 forward 합니다. 그러나 부모는 mutable 합니다.

 

TrainHoppingAnimation 서브클래스는 두개의 부모를 가지고, 두 부모의 값이 교차할 때 둘을 스위치합니다.

 

Animation controllers

AnimationController는 스스로 life를 만들기 위해 Ticker를 사용하는 stateful Animation<double> 입니다. 이것은 시작, 멈춤이 가능합니다. 매 틱마다, 시작된 후 경과된 시간이 측정되며 값을 얻기 위해 Simualtion으로 측정된 값이 전달됩니다. 그 값이 Simulation이 리포트하는 값 입니다. 만약 Simulation이 어떤 시점에 자신이 끝났다고 보고하면, controller도 멈춰야합니다.

 

Animation controller는 애니메이션의 lower, upper bound와 지속 시간을 가질 수 있습니다.

 

간단한 예로, animation controller는 주어진 지속시간동안 lower ~ upper bound 사이를 선형 보간합니다.

 

repeat()을 사용할 때, animation controller는 위와 똑같이 작동하지만 멈추지 않습니다.

 

animateTo()를 사용할 때, animation controller는 현재 값에서 주어진 타겟 값으로 주어진 시간에 선형 보간을 합니다. 만약 메소드로 지속 시간이 주어지지 않는다면, controller의 디폴트 지속시간과 controller의 lower, upper bound가 애니메이션의 속도를 결정짓기 위해 사용됩니다. 

 

fling()을 사용 할 때, Force는 controller를 drive하기 위해 사용되는 특정 simulation을 생성하기 위해 사용됩니다.

 

animateWith()을 사용할 때, 주어진 simulation은 controller를 drive하기 위해 사용됩니다.

 

이런 메소드들은 Ticker가 제공하는 future를 반환하고, future들은 controller가 다음에 멈출 때나 simulation의 값이 바뀔 때 resolve 됩니다.

 

Attaching animatables to animations

Animation<double>을 Animatable의 animate() 메소드로 넘기는 것은 주어진 부모로 부터 drive 되었지만, Animatable처럼 행동하는 새로운 Animation 서브클래스를 생성합니다.