FlutterㅣAnimation 기초

Animation

Animation 기본원리

정적인 이미지 여러장을 연속해서 재생하여 움직임을 주는 것이 애니메이션의 기본.

Flutter Animation?

(출처 : https://docs.flutter.dev/resources/architectural-overview)

• Flutter에서는 정적인 Build와 User인터랙션 사이에 Animation 레이어 자체를 아키텍처에 적용했기에 다른 모바일 프레임워크 중에서도 Animation을 가장 쉽고 부르럽게, 개발자가 디자이너가 원하는 형태로 만들 수 있다.

• Animation 레이어의 기본은, tic() 이라는 함수이다.
  모든 장면 하나 하나가 그려질 때, tic()이라는 함수가 여러번 수행이 된다. 이렇듯 모바일 화면에서 여러장의 정적인 이미지들이 움직이는 것처럼 보이는 것.

Flutter Animation의 종류

크게 2가지

1. Code based animation

• 특정한 위젯이나 버튼 등의 움직임을 주고싶을 때 코드를 이용한 애니메이션을 이용

2. Drawing based animation

• 움직이는 화살표, 날아가는 새, 날아가는 총알 등의 애니메이션을 필요로 할 때, 개발자가 코드로 구현하는 것은 매우 어려움. 이런 구현을 위해서는 코드가 아닌 UI툴킷을 사용.

  Drawing based animation 패키지

1. Rive

• Flutter 초창기에 개발된 Animation Framework
• 많은 기능과 최적화가 이루어져 추천

2. Lotte

• 안드로이드와 IOS에서 많이 사용되던 라이브러리
• 역사가 긴 만큼 많은 레거시와 애니메이션이 존재하지만, Rive와 비교해보면, Rive에서 제공되는 기능들이 압도적으로 좋음

  Code based animation

1. 커스텀 패키지를 이용하는 방법
2. Implicit Animation(암시적 애니메이션)
3. Custom Implicit Animation(TweenAnimateBuilder)

• 2번으로 안될 때

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

• 복잡하고 화려한 애니메이션을 만들고 싶다면