Flutter User Input & Animation

Flutter DevTools 을 활용해 퍼포먼스 Timeline Events 를 그려보면 다음과 같은 화면을 확인할 수 있다.

이는 Flutter 의 Main 스레드라고 볼 수 있는 UI 스레드에서 진행하는 작업으로, Build -> Layout -> Paint -> Compositing 을 차례로 수행한다.

Compositing 까지 완료한 후 관련 데이터를 Raster 스레드로 보내주면, 해당 스레드에서 GPU 에게 명령을 전달하며 화면을 그리는 Rasterize 작업을 수행한다.

3~7 단계까지의 과정은 어느정도 이해가 되었으나, User input 이나 Animation 단계가 어떻게 동작하는지, VsnycProcessCallback 은 무엇이고 Animator::BeginFrame 이 무엇인지에 대해선 아직 감이안온다. 이에 대하여 공부해 보자.

User Input

유저가 디바이스와 상호작용을 할 때 (ex 스크린 탭) OS는 event 를 생성하여 이를 UI 스레드의 event loop 에 전달한다. UI 스레드는 event loop 를 통해 queuing 된 이벤트를 처리하는데, 이 때 해당 이벤트가 앱 내의 interactive elements 에 전달될지의 여부가 결정된다. 그 결과 일치하는 유저 이벤트에 해당하는 위젯이 존재한다면, 핸들러가 호출된다. 예를 들어, 버튼의 onPressed 함수 핸들러가 호출되는 것이다. 이 때 필요하다면 UI도 다시 그려지도록 트리거한다. 즉, setState 가 호출되면 해당 State 를 가지고있는 element 가 dirty 상태가 되며, element 는 다음 프레임에 rebuild 된다. 

Animation

Flutter 의 Animation 은 스크린의 refresh rate 와 vsync (vertical synchronization) 이라는 메커니즘을 통해 묶여있다. Vsync 란 디스플레이가 GPU 에게 다음 프레임을 그릴 준비가 되어있음을 알리는 신호이다.  Flutter 에서는 Ticker 라는 객체를 활용해 해당 vsync 시그널을 리슨하며, onTick callback 을 통해 관련 동작을 처리한다. onTick callback 이 바로 animation 을 update 하는 함수이다. 

State object 내에서 AnimationController 를 생성할 때 vsync 를 인자로 전달하는데, 이 때 AnimationController 는 vsync 신호를 사용하여 애니메이션을 진행하는 Ticker 를 생성한다. 

VsyncProcessCallback & Animator::BeginFrame

Flutter 엔진은 VsyncProcessCallback 을 사용하여 display 가 새로운 프레임을 그릴 준비가 되었음을 listen 한다. 해당 callback 은 프레임의 시작을 트리거하고, 그 시작지점이 바로 Animator::BeginFrame 인 것이다.

참고 자료

https://www.youtube.com/watch?v=PbcILiN8rbo&list=PLjxrf2q8roU2HdJQDjJzOeO6J3FoFLWr2&index=23