[Flutter] 좀 더 쉬운 플러터 애니메이팅

안녕하세요~ 배남매 둘째입니다

저는 개발자라서 개발에 관련된 이야기를 적어보려하는데요

특히나 ui/ux에 관심이 많아서 이런저런 모션에도 관심이 많답니다.

 

플러터의 장점은 빠른 생산성, 그리고 쉬운 코딩인데요 그럼에도 불구하고 애니메이션을 넣는다면 조금 복잡한 느낌이 있죠

그래서 제가 추천드리는 패키지는 

https://pub.dev/packages/flutter_animate

flutter_animate | Flutter package

해당 패키지를 사용한다면 tickerprovider를 믹스인할필요없이 함수형 프로그래밍패러다임을 적용해서 조금더 간편하게 애니메이션을 적용가능하답니다!

 

그럼 한번 사용해볼까요?

 

일단 해당게시글에서 사용되는 UI/UX는 무료 디자인을 사용했어요

https://www.figma.com/file/2BWILGgkeIwv2KjE4Fipy7/Aspen-Travel-App-Exploration--Mobile-App-Design-(Community)?type=design&node-id=0-11&mode=design&t=2yiFzGWqfJ1siJgp-0

Figma

여기서 처음 화면에다가 살짝의 애니메이션을 넣어서 좀더 생생한 느낌의 앱을 만들어볼꺼에요

 

물론 해당 Ui는 충분히 이뻐서 굳이 모션을 넣지않아도 충분하지만 지금은 제가 소개해드리고싶은만큼 애니메이션을 넣어볼께요

구현된 화면이에요, 폰트가 유료길래 비슷한 폰트로 적용을 했어요!

이제 애니메이션을 추가해볼껀데요

 

원래대로한다면 Ticker를 믹스인하고 컨트롤러를 붙이고. 애니메이션을 지정하고 여러 애니메이션이라면 또 많은 컨트롤러를 지정하여서 복잡하게 구현되는데요. 그래도 flutter에서 사전정의된 빌더가 있긴하지만, 그래도 해당 빌더들은 여러모로 뷰 코드가 많아지기도하고 가독성이 떨어져요

 

일단 타이틀에 위로 올라가면서 fadeIn을 넣어줄께요

이미지가 로딩되는시간이 조금있어서 깜빡거리는건 무시해주세요 ㅋㅋ

 

해당 기능을 구현하기까지 걸리는시간 단 3초!

 

어떻게했을까요

(위젯코드....)
                  .animate() // flutter animate로 바꾸는 메소드
                  .moveY(begin: 10) // 아래에서 10픽셀 움직이게
                  .fadeIn(), // 페이드인효과

매우 간단하죠?

 

그럼 약간의 딜레이를 추가해서 전체적으로 애니메이션을 재생해볼께요

맨위에 텍스트는 딜레이없이 

아래 텍스트들은 400.Ms의 딜레이를 추가하여서 차례대로 화면에 나타나는 느낌을 주었어요

 

그리고 최하단에 버튼에는 layoutbuilder + 버튼에는 딜레이 그리고 페이드인으로 연출을했어요

조금 너무 과한느낌이있긴하지만,,, 포스팅을 위해서 작성했으니 이해해주세요!

 

여기서 커브값을 살짝조절하면 조금더 생생한 앱을 만들수있어요!

 

그럼 한번 사용해보세요!!

 

더궁금한점이 있다면 댓글에 남겨주세요

그럼 이만~~