Explicit

• 사전적 의미로 명시적이라는 뜻을 갖고있고 모든 animation에 대한 통제권, 즉 구현을 개발자가 직접한다.

• 단점은 개발자가 손수 구현해야하기 때문에 컨트롤할 것이 많아지고 이는 굉장히 복잡한 작업이 된다.

구현

1. StatefulWidget만들기

• animation을 적용하려면 StatefulWidget이여야한다?! => 왜냐하면 animation이 실행되는 과정이 state class의 state 객체를 사용하기 때문이다.
  이때 간단하게 StatelessWidget에 wrapper command( ctrl+shift+R )를 입력하면 자동으로 StatefulWidget으로 변한다.

• 즉, 애니메이션이 실행되는 한 flutter 뒤편에서 상태 설정과 UI를 항상 업데이트한다. 이는 내부 상태를 업데이트하고 빌드 메서드를 다시 실행하기 위해서, 그래서 StatefulWidget이 필요한 것이다.

2. Controller 변수 만들기

• 일반적으로 Controller 변수는 속성이 초기화될 때 => 클래스가 인스턴스화 될 때 사용이 불가능하다. 그래서 initState 메서드를 이용하여 따로 설정해주어야 한다.

• 이는 당연하게도 순서상 build가 되기 전 즉, vue.js의 생명주기를 빌리자면 mount 되기 전에 animation controller가 생성되어야하기 때문에
  initState 메서드를 사용한다.

• 다만 앞서 언급했듯 인스턴스화 < 여기 < build메서드 실행 에 위치해야하기 때문에 클래스가 생성될 땐 아직 존재하지 않는다는 late 키워드를 사용하여 클래스 생성시 에러가 뜨는 것을 방지한다.

• 그리고 해당 Controller의 타입은 AnimationController 라는 타입이 될 것이다. 참고로 이는 flutter에서 제공하는 타입이다.

3. Controller 변수 할당하기

• AnimationController 생성자 함수를 사용하여 만들고 속성값은 위 사진에서 보는 것과 같이 총 8개가 존재한다.

• vsync는 ticker라는 타입의 매개변수를 받고 바로 이 변수가 실제로 초당 60회로 animation을 실행할 수 있도록 해주는 객체가 담겨있는 곳이다.

• 그리고 이 ticker라는 타입을 받기위해 특별히 with 다트 키워드를 사용하여 state 클래스가 state 뿐만 아니라 tickerProvider 또한 함께 상속받을 수 있도록 해준다. 즉, 병합을 하도록 해준다.

• 그리고 혹시 animation controller가 여러개 필요하다면 TickerProviderStateMixin 를 확장(with)하면 된다.

• 그리고 vsync에 this 키워드로 해당 state 클래스 전체를 할당하면 사용자 눈에 보이는 전체 UI가 움직일 것이다.
  애니메이션 컨트롤러는 프레임률 정보를 얻게 되고 프레임당 한 번씩 애니메이션을 실행다.

4. dispose 로 사용하지 않을 때 메모리에서 삭제하기

• 앞서 배운 TextField 처럼 사용하지 않을 땐 메모리 최적화(메모리 overflow)를 위해 dispose로 다시 닫아준다.

사용

• 이제 build 메서드에서 사용해보자.

1. AnimatedBuilder

• AnimatedBuilder을 사용하면 이벤트를 listen하고 해당 이벤트에 대해 UI를 업데이트 할 수 있다.

• 이 위젯은 animation과 builder 속성을 갖고 있으며 animation 속성은 listenable 타입을 요구하는데 Controller를 넣어주면 된다.

• 그리고 builder는 함수를 요구하며 실제로 animation을 할 요소를 넣어주면 된다.
  바로 이 builder가 실제로 초당 60회 animate를 하는 함수가 된다.

• 그리고 이 builer가 갖는 요소의 함수의 매개변수는 context, child가 있는데 이 child 속성에는 움직일 대상(위젯)을 넣어주면 된다.

• 이는 애니메이션의 기능을 향상시키기 위해 애니메이션 아이템의 모든 부분이 재구성되거나 재평가되지 않도록 한다.

1-1. Controller .drive()

• 사실 padding으로 일일이 로직을 구현하여 작성해도 되지만 flutter에서 제공하는 편리한 transition class를 이용해도 된다.
  매우 다양한 Transition 객체를 제공한다.

• 이때 child 속성을 반드시 넣어서 모든 요소가 불필요하게 초당 60회 재평가되는 것을 막고 실제로 animate 해야할 부분만 설정해주면 된다.

• 여기서(SlideStransition)는 position 속성을 원하고 Animation 타입의 객체를 원한다. 이는 우리가 앞서 만들었던 Controller를 넣어주면 된다. 그리고 바로 해당 Controller에서 제공하는 .drive() 메서드로 위치를 잡아줄 것이기 때문이다.

• 이 drive() 메서드는 위에서 설정한 lowerBound, upperBound가 필요하지 않고 offSet에 대한 animation 값이 필요하기 때문에 animatable한 Tween 이라는 객체를 사용하여 넣어주면 된다.
  시작과 끝 값을 넣어주면 되고 이는 Offset 클래스를 이요하면 되낟.

• 추가적으로 offSet 클래스의 0 은 종료 상태를 뜻하고 0.3 은 0을 기준으로 30% 정도 밑에 있다는 것이다.

1-2 Tween .animate()

• .animate() 메서드는 Animation Offset을 반환하기 때문에 굳이 drive 메서드를 사용하지 않아도 된다.

• 또한 CurvedAnimation 를 생성하여 animation이 동작하는 속도의 빠르기를 조절할 수 있다. 마치 CSS의 transition : ease-out 처럼

2. .forward(), .stop(), .repeat() ...etc

• 이제 controller와 어느 요소를 어떻게 움직일지까지 정했다면 해당 컨트롤러를 실행해주면 된다.

• 여기서는 최초 load할 때 동작했으면 해서 initState 함수에 붙였다.