Flutter - Animations #Introduction

Choosing an approach

Flutter 애니메이션을 만드는 방법에는 많은 선택지들이 있습니다. 어떤 접근이 당신에게 더 알맞을까요? 당신의 선택을 돕기 위해, 다음 영상을 시청해보세요. How to choose which Flutter Animation Widget is right for you? (Also published as a companion article.) 

 

(선택 과정에 대해 더 자세하게 알고 싶다면, Animations in Flutter done right 영상을 참고하세요.)

 

위의 영상에서 나온것 처럼, 다음 선택 트리가 애니메이션을 구현할 때 도움이 될 것입니다.

만약 pre-packaged implicit 애니메이션이 필요하다면, Animation basics with implicit animations. (Also published as a companion article.) 을 참고하세요.

 

 

커스텀 implicit 애니메이션을 만들고 싶다면, Creating your own custom implicit animations with TweenAnimationBuilder. (Also published as a companion article.) 을 참고하세요.

 

explicit 애니메이션을 만들고 싶다면(framework가 애니메이션을 제어하도록하는 것이 아닌, 개발자가 제어하는 것), 아마 내장된 explicit 애니메이션 클래스들 중 하나를 사용하면 될겁니다. 더 많은 정보를 원한다면, Making your first directional animations with built-in explicit animations. (Also published as a companion article.)을 참고하세요.

 

 

만약 완전 처음부터 explicit 애니메이션을 만들고 싶다면, Creating custom explicit animations with AnimatedBuilder and AnimatedWidget. (Also published as a companion article.)을 참고하세요.

 

 

Flutter에서 애니메이션이 어떻게 작동하는지 자세히 알고 싶다면, watch Animation deep dive. (Also published as a companion article.)을 참고하세요.

 

Codelabs, tutorials, and articles

다음 리소스들은 Flutter의 애니메이션 프레임워크를 익히기 좋은 자료입니다. 각 문서들은 어떻게 애니메이션 코드를 작성해야하는지 알려줍니다.

 

• Implicit animations codelab
  • 예제와 함께 implicit 애니메이션을 어떻게 사용하는지 단계별로 배워봅니다.
• Animations tutorial
  • Flutter 애니메이션 패키지의 기본이되는 클래스들을 설명합니다.(controllers, Animatable, curves, listeners, builders) 애니메이션 API의 다양한 측면을 사용하여 애니메이션의 진행 과정을 안내합니다.
• Zero to One with Flutter, part 1 and part 2
  • Tweening을 사용하여 animated 차트를 만드는 방법에 대한 Medium 포스트입니다.
• Write your first Flutter app on the web
  • 이 codelab은 유저가 필드를 채울 때 진행을 애니메이션으로 보여주는 form을 생성하는 방법을 알려줍니다.

 

Aniamtion types

일반적으로, 애니메이션들은 tween, physics-based 입니다. 다음 섹션은 이 용어들의 의미를 설명하고 더 공부할 수 있는 리소스들을 알려줍니다.

 

Tween animation

간단하게 말하면 in-betweening 입니다. tween 애니메이션에서는 시작점과 끝점이 정의되며, 타임라인과 전환 시기의속도를 정의하는 곡선이 정의됩니다. 프레임워크는 시작점에서 끝점까지 어떻게 트렌지션할지 계산합니다.

 

Animations tutorial 같은 위에 있는 문서들은 tweening에 대해 자세하게 다루지 않지만, 예제에서 tween을 사용합니다.

 

Physics-based animation

physics-based 애니메이션에서, 모션은 실제 행동을 닮도록 모델링 됩니다. 예를 들어, 공을 토스할 때 공이 어디에 언제 착지하는지는 얼마나 빨리 던졌는지 그리고 땅에서 얼마나 멀리 떨어졌는지에 달려 있습니다. 유사하게, 스프링에 붙어있는 공을 떨어뜨리는 것(바운스도)은 줄에 붙어있는 공을 떨어뜨리는 것과는 다르게 움직입니다.

 

• Animate a widget using a physics simulation
  • Flutter cookbook의 애니메이션 섹션에 있는 레시피입니다.
• Flutter Gallery
  • Material Components를 사용하여, Grid로 fling 애니메이션을 구현합니다. Grid에 있는 이미지중 하나를 선택하고 줌인하세요. 흔들거나 끄는 제스터로 이미지를 이동할 수 있습니다.
• AnimationController.animateWith and SpringSimulation에 대한 API 문서도 참고해보세요.

 

Pre-canned animations

Material 위젯을 사용한다면, pub.dev에서 사용가능한 animations package를 찾아보세요. 이 패키지는 여러가지 흔히 사용되는 패턴을 위한 pre-built 애니메이션을 가지고 있습니다.

 

Common animation patterns

대부분의 UX, 모션 디자이너들은 UI를 디자인할 때 어떤 애니메이션 패턴들은 반복된다는 것을 알아차립니다. 이번 섹션에서는 자주 사용되는 애니메이션 패턴을 설명하고, 더 많은 정보를 위한 링크를 제공합니다.

 

Animated list or gird

이 패턴은 List, Grid에 요소를 추가, 제거 할 때의 애니메이션을 포함합니다.

• AnimatedList example
  • Sample app catalog에 있는 이 데모에서, 리스트에 요소를 추가, 제거하는 애니메이션을 어떻게 만드는지 보여줍니다. 사용자가 더하기, 빼기 버튼을 사용하여 목록을 수정할 때 내부 Dart list가 동기화됩니다.

Shared element transition

이 패턴에서 사용자는 페이지에서 요소(종종 이미지)를 선태갛고 UI는 선택한 요소를 새 페이지로 더 자세히 애니메이션 합니다. Flutter에서, routes(page) 사이의 shared element transitions는 Hero 위젯을 사용해서 쉽게 구현이 가능합니다.

 

• Hero animations: 두 가지 스타일의 Hero 애니메이션을 만드는 방법
  • hero가 위치와 사이즈를 바꾸며 한 페이지에서 다른 페이지로 날아갑니다.
  • hero가 한 페이지에서 다른 페이지로 날아갈 때, hero의 경계가 원에서 사각으로 바뀝니다.

• Flutter Gallery
  • Gallery 앱을 빌드해 볼 수 있습니다. 또는 Play Store에서 다운받으세요. Shrine 데모가 hero 애니메이션 예제를 가지고 있습니다.

• Hero, Navigator, and PageRoute API 문서도 참고해보세요.

 

Staggered animation

일부 모션들이 지연되는 작은 모션들로 분할된 애니메이션입니다. 작은 애니메이션들은 연속적이거나 부분적으로 또는 완전히 겹칠 수 있습니다.

• Staggered Animations

 

Other resources

Learn more about Flutter animations at the following links:

• Animation samples from the Sample app catalog.
• Animation recipes from the Flutter cookbook.
• Animation videos from the Flutter YouTube channel.
• Animations: overview
  A look at some of the major classes in the animations library, and Flutter’s animation architecture.
• Animation and motion widgets
  A catalog of some of the animation widgets provided in the Flutter APIs.
• The animation library in the Flutter API documentation
  The animation API for the Flutter framework. This link takes you to a technical overview page for the library.