How to choose which Flutter Animation Widget is right for you? - Flutter in Focus

How to choose which Flutter Animation Widget is right for you? - Flutter in Focus의 내용을 번역 및 정리

플러터(Flutter)에서는 '명시적 애니메이션(Explicit Animations)'과 '암시적 애니메이션(Implicit Animations)' 두 가지 방식으로 애니메이션을 구현할 수 있어요. 이 두 방식은 애니메이션을 만드는 방법과 컨트롤하는 방식에서 차이가 있습니다.

1. 명시적 애니메이션(Explicit Animations):

   • 명시적 애니메이션은 개발자가 애니메이션의 모든 측면을 직접 제어합니다. 이는 'AnimationController'와 'Tween' 같은 클래스를 사용하여 구현됩니다.
   • 개발자는 애니메이션의 시작, 종료, 방향, 속도 등을 정확히 지정해야 합니다.
   • 명시적 애니메이션은 복잡한 애니메이션을 만들 때 유용하며, 정밀한 제어가 필요한 경우에 적합합니다.
   • 예를 들어, 반복되는 애니메이션, 서로 다른 애니메이션을 연결하는 경우 등 복잡한 상황에서 사용됩니다.

2. 암시적 애니메이션(Implicit Animations):

   • 암시적 애니메이션은 Flutter가 제공하는 위젯을 사용하여 간단하게 구현할 수 있습니다. 이러한 위젯은 'AnimatedContainer', 'AnimatedOpacity' 등이 있습니다.
   • 개발자는 최종 상태를 지정하고, 애니메이션의 지속 시간을 설정하기만 하면 됩니다. 그 외의 애니메이션 동작은 Flutter가 알아서 처리합니다.
   • 암시적 애니메이션은 간단한 상황에서 적합하며, 코드가 더 간결하고 이해하기 쉽습니다.
   • 예를 들어, 위젯의 크기나 색상이 변할 때 부드러운 전환 효과를 주고 싶을 때 사용됩니다.

비교 및 대조:

• 제어 수준: 명시적 애니메이션은 개발자가 높은 수준의 제어를 할 수 있지만, 암시적 애니메이션은 Flutter에 의해 많은 부분이 자동으로 처리됩니다.
• 구현 복잡성: 명시적 애니메이션은 구현이 더 복잡하지만, 더 정교한 애니메이션을 만들 수 있습니다. 반면에, 암시적 애니메이션은 구현이 간단하며 기본적인 애니메이션에 적합합니다.
• 사용 사례: 복잡한 상호작용이나 여러 애니메이션을 조합해야 하는 경우에는 명시적 애니메이션을 사용하고, 단순한 속성 변경에 부드러운 전환을 주고 싶을 때는 암시적 애니메이션을 사용합니다.

이 두 방식은 각각의 사용 사례와 필요에 따라 선택하여 사용할 수 있습니다.

애니메이션을 어떻게 만들어야 할지 결정하는 데 도움이 될 수 있도록 염두에 두고 있는 애니메이션에 대해 스스로에게 물어볼 수 있는 일련의 질문을 살펴보겠습니다. 또 한 가지 기억해야 할 점은 Flutter의 핵심 라이브러리에서 제공하는 애니메이션의 수준이 매우 낮다는 것입니다. 즉, 복잡한 애니메이션을 만들려면 더 높은 수준의 인터페이스를 제공하는 Pub에서 제공되는 애니메이션 패키지를 확인하는 것이 좋습니다.

크게 두 가지 유형의 애니메이션이 있는데, 드로잉 기반 애니메이션과 코드 기반 애니메이션입니다. 코드 기반 애니메이션은 위젯에 중점을 두며 행, 열, 색상 또는 텍스트 스타일과 같은 표준 레이아웃 및 스타일 기본 요소에 뿌리를 두고 있습니다. 그렇다고 지루하거나 단순하다는 뜻은 아닙니다.

하지만 그 자체로 독립된 위젯으로 작동하기보다는 기존의 특정 위젯의 모양이나 전환을 향상시키는 경향이 있습니다. 반면 드로잉 기반 애니메이션은 누군가가 그린 것처럼 보입니다. 게임 캐릭터와 같은 독립형 스프라이트이거나 코드만으로 표현하기 어려운 변환을 포함하는 경우가 많습니다.

따라서 스스로에게 던져야 할 첫 번째 질문은 "내 애니메이션이 그림에 더 가까운가?" 아니면 Flutter 위젯 기본 요소로 만들 수 있는 것처럼 보이는가?"입니다. 애니메이션이 그림에 가깝거나 벡터 또는 래스터 이미지 에셋을 제공하는 디자인 팀과 함께 작업하는 경우, Rive 또는 Lottie와 같은 타사 도구를 사용하여 애니메이션을 그래픽으로 빌드한 다음 Flutter로 내보내는 것이 좋습니다.

Flutter 앱에 이러한 에셋을 포함시키는 데 도움이 되는 몇 가지 패키지가 있습니다. 그렇지 않고 애니메이션에 색상, 모양 또는 위치 변경과 같은 위젯 변경이 포함된 경우 계속 지켜봐 주시면 Flutter 코드를 작성해 드리겠습니다. 코드를 작성하고 싶다고요? Flutter 코드 기반 혁신은 암시적 애니메이션과 명시적 애니메이션의 두 가지 방식으로 제공됩니다.

다음 단계는 어떤 유형이 필요한지 파악하는 것입니다. 입력과 애니메이션은 일부 위젯 프로퍼티에 새 값을 설정하기만 하면 됩니다. 그리고 현재 값에서 새 값으로 애니메이션을 적용하는 것은 Flutter가 알아서 처리합니다. 정말 사용하기 쉽고 놀랍도록 강력합니다. 지금 보시는 모든 애니메이션은 암시적으로 애니메이션이 적용된 위젯을 통해 이루어집니다.

암시적 애니메이션은 무언가에 애니메이션을 적용하고자 할 때 시작하기에 좋은 방법입니다. 명시적 애니메이션에는 애니메이션 컨트롤러가 필요합니다. 명시적 애니메이션은 명시적으로 요청할 때만 애니메이션을 시작하기 때문에 명시적이라고 합니다. 명시적 애니메이션을 사용하면 암시적 애니메이션으로 할 수 있는 모든 작업과 그 이상의 작업을 수행할 수 있습니다.

성가신 점은 애니메이션 컨트롤러가 위젯이 아니므로 스테이트풀 위젯 안에 넣어야 하므로 애니메이션 컨트롤러의 수명 주기를 관리해야 한다는 것입니다. 따라서 암시적 위젯을 사용하면 일반적으로 코드가 더 간단해집니다. 어떤 유형의 위젯이 필요한지 결정하기 위해 스스로에게 물어볼 수 있는 세 가지 질문이 있습니다.

애니메이션이 영원히 반복되나요? 여기서 영원히 반복된다는 것은 특정 화면에 있는 동안 또는 음악 재생과 같은 특정 조건이 충족되는 동안이라는 의미입니다. 두 번째 질문은 애니메이션의 값이 불연속적인지 여부입니다. 불연속적이라는 의미의 예로 이 커지는 원 애니메이션을 들 수 있습니다.

원은 작아지고, 커지고, 작아지고, 커지기를 반복합니다. 결코 작아졌다가 커졌다가 다시 줄어들지 않습니다. 이 경우 원 크기는 불연속적입니다. 마지막으로 스스로에게 물어봐야 할 질문은 여러 위젯이 함께 조화로운 방식으로 애니메이션을 적용하고 있는지 여부입니다. 이 세 가지 질문 중 하나라도 '예'라고 답했다면 명시적인 위젯이 필요합니다.

그렇지 않으면 암시적 위젯을 사용할 수 있습니다. 암시적 위젯이 필요한지 명시적 위젯이 필요한지 결정한 후에는 마지막 질문을 통해 필요한 특정 위젯을 찾을 수 있습니다. 내 필요에 맞는 위젯이 내장되어 있는지 스스로에게 물어보세요. 내장된 암시적 애니메이션 위젯을 찾고 있다면 애니메이션을 적용하려는 속성이 foo인 animated foo라는 이름의 위젯을 찾아보세요.

또한 다양한 암시적 애니메이션을 위한 위젯으로 매우 강력하고 다재다능한 애니메이션 컨테이너도 확인해 보세요. 하지만 필요한 내장형 암시적 애니메이션을 찾을 수 없는 경우 TweenAnimationBuilder를 사용하여 사용자 지정 암시적 애니메이션을 만들 수 있습니다. 반대로, 내장된 명시적 위젯을 찾고 있다면 일반적으로 FooTransition이라고 하며, 여기서 foo는 애니메이션을 적용하려는 속성입니다.

원하는 내장형 명시적 애니메이션을 찾을 수 없는 경우 마지막으로 스스로에게 물어봐야 할 질문이 하나 있습니다. 애니메이션을 독립형 위젯으로 만들까요, 아니면 다른 주변 위젯의 일부로 만들까요? 이 질문에 대한 답은 취향의 문제입니다. 독립형 사용자 정의 명시적 애니메이션을 원한다면 애니메이션 위젯을 확장해야 합니다.

그렇지 않으면 AnimatedBuilder를 사용할 수 있습니다. 성능 문제가 발생하는 경우 마지막으로 고려해야 할 사항이 하나 더 있는데, 바로 CustomPainter로 애니메이션을 적용하는 것입니다. AnimatedWidget과 비슷하게 사용할 수 있지만 CustomPainter는 표준 위젯 빌드 패러다임 없이 캔버스에 직접 페인팅합니다. 잘 사용하면 깔끔하고 매우 맞춤화된 효과를 만들거나 성능을 절약할 수 있습니다.

하지만 애니메이션을 잘못 사용하면 더 많은 성능 문제를 일으킬 수 있습니다. 그러니 조심하세요. 그리고 수동 메모리 관리와 마찬가지로 공유 포인터를 사방에 뿌리기 전에 자신이 무엇을 하고 있는지 확실히 파악해야 합니다. 요약하면, 애니메이션을 만들기 위해 스스로에게 물어볼 수 있는 일련의 높은 수준의 질문이 있습니다.

일련의 질문은 사용자의 필요에 맞는 위젯이나 패키지를 결정하기 위한 의사 결정 트리를 만듭니다. 이러한 엔드포인트를 접으면 대략 왼쪽에서 오른쪽으로 난이도를 나타내는 선이 만들어집니다. 이것만 알면 됩니다. 이제 명시적이든 암시적이든 타사 프레임워크, 패키지를 통해 멋진 사진 애니메이션을 만들어 보세요.