Flutter Animation 라이브러리 검색

Hee Tae Shin·2023년 4월 15일
1

Flutter

목록 보기
14/16

목적

응모하기 결과에 대한 애니메이션을 추가해서 생동감을 불어넣기

  • 깔끔한 디자인 유행이지만, 애니메이션이 없는 웹/앱은 있을 수 없다. 그만큼 당연하기 때문이다.
  • 유저피드백이 필요하다. 웹 보단 앱인 경우는 화면이 작기 때문에, 유저가 어떤 행동을 하던 그 즉시 유저에게 피드백을 줘야한다고 생각한다. (좋아요 버튼을 누르면 바로 눌렀다는 피드백!)

예측 결과

내가 응모한 상품의 결과를 생동감 있는 애니메이션이 출력될 것이다.


기대 효과

유저는 내가 응모한 상품에 당첨되었다는 것을 텍스트로 출력되는 것보단 생동감 있는 애니메이션으로 당첨되었다는 사실의 확실성과 정말 응모상품을 받을 수 있는지에 대한 기대감을 부풀려준다.


조건

  1. 어느정도 like 수가 있어야 한다. (라이브러리가 얼마나 사용성이 좋은지 여부, 안정성 여부에 대한 판단의 기준)
  2. Publish 가 자주 되는 라이브러리 이여야 한다. (에러가 발생하면 바로 업데이트 해줄것이라는 확신때문이다.)
  3. 애니메이션 코드가 적용하기 쉬워야함 (라이브러리 사용하는 이유가 편리하게 내가 원하는 라이브러리를 적용하기 위함이라고 생각하기 때문이다.)
  4. 원하는 기능이 들어가 있어야함 (원하는 기능이 무조건 포함되어있어야하고, 추가적인 기능이 들어가 있으면 금상첨화!)
  5. Doc 가 친절해야함 (그래야 러닝 커브 적고 내가 이해하기 편하고 적용하기 편함.)

후보들 소개 😀

후보 1 번 👽

💡 Like 1225, Pub points 130, Recent Published 26 (게시글 작성 기준), Version 0.10.4 (게시글 작성 기준)

rive | Flutter Package

장점

  • 사용 방법이 무궁무진 하다. (기본 앱은 물론 게임에 관련된 애니메이션까지 적용가능하다. )
  • DOC 친절하다.
  • 구현이 쉬워 많은 개발자들이 사용하고, 사용 예제들이 많다.
  • 클라이언트의 디테일한 요구, 디자이너의 욕심을 채울 수 있는 라이브러리이다.

단점

  • 디테일 요하는 애니메이션은 해당 .riv 파일을 추가해줘야한다. (예 ⇒ 인터렉티브한 움직임.riv)
  • 앱의 용량이 조금 커지지 않을까? 라는 의문 (왜냐, 각 riv 파일이 존재해야하기 때문, 서버에서 내려받는다면? 서버 용량이 그만큼 필요하겠지?)

후보 2 번 👾

animation library - Dart API

기존 내장 animation library 사용하기

애니메이션 라이브러리와 캔버스, 페인팅 라이브러리 둘중 하나를 같이 사용 해야할 듯 싶다.

장점

  • 커스텀 하기 용이하다. (기존 내장 라이브러리이기 때문에 접근이 쉽고, 에러가 날 가능성 적고, 컨트롤 쉽다.)
  • DOC 친절하다.

단점

  • 하나 하나 애니메이션을 추가해줘야하는 번거로움(그림을 그리는 painting 도 직접 해야할것 같음)
  • 이미지를 추가해 이미지에 대한 애니메이션을 적용하면 너무 단순함, 과연 인터렉티브 할까?란 의문
  • 구현시 시간 오래걸림 (애니메이션을 추가하는 기능에 대해 명확히 정하고 구현 시작 해야 한다.)
  • AnimationController 을 사용하기에 상태관리를 해줘야하는 번거로움 (사용시 메모리에서 dispose() 해줘야함)

후보 3 번 👻

💡 Like 3800, Pub points 130, Recent Published 29 (게시글 작성 기준), Version 2.0.5 (게시글 작성 기준)

flutter_svg | Flutter Package

SVG 파일을 통한 애니메이션 적용하기

이 라이브러리는 Svg 를 불러오기 위한 라이브러리이다.

그렇기에 후보 3 번이라는 것은 애매하다.. 왜냐 후보 2번의 방법을 또 사용해야하기 때문이다!

장점

  • 후보 2 번 과 같다.

단점

  • svg 파일 필요하다.
profile
안녕하세요

0개의 댓글