Flutter Animation 플러터 애니메이션

Flutter Animation을 만들 때 취할 수 있는 다양한 접근 방식이 있습니다. 오늘 배울 AnimatedPositioned은 지정된 위치가 변경될 때마다 일정 기간동안 자동으로 위치를 전환할 수 있는 강력한 기능입니다. 보다 직관적이고 세련된 표현으로 사용자에게 훌륭한 UI경험을 제공할 수 있으며 무엇보다 쉽고 빠르게 구현이 가능합니다.

프로그래밍 플러터 (Flutter Animation) - AnimatedPositioned

Flutter AnimatedPositioned 클래스

AnimatedPositioned 클래스는 시간이 지남에 따라 하위 위젯의 위치와 크기가 변경되는 경우 가장 좋은 선택이 될 수 있습니다. Curve와 Duration 필드를 정의 하여 원하는 위젯을 새 대상 위치에 자동으로 이동시킬 수 있으며 사용자가 정의한 애니메이션 효과를 제공할 수 있습니다. 더 많은 제어가 필요한 경우 AnimationController를 통해 미세 조정이 가능하지만 필드의 생명주기를 수동으로 관리해야하는 개발 오버헤드가 있을 수 있습니다.

AnimatedPositioned은 일반적인 위젯과 마찬가지로 Stack의 하위 목록에 위치 할 수 있습니다. 또한 Positioned처럼 원하는 정확한 위치에 이동 시킬 수도 있습니다. 다만 차이점은 방향이나 높이 혹은 폭을 변경할 때 애니메이션 효과와 함께 바로 반영됩니다.

AnimatedPositioned은 여러가지 애니메이션 효과나 슬라이드효과를 나타내는데 효과적이며 또한 방향 속성이 애니메이션에 반영되기 때문에 부분적으로 위젯의 크기를 줄이거나 늘릴 수 있습니다.

AnimatedPostioned 사용예제

다음 예제에서는 height, width 필드값을 변경하여 AnimatedPositioned으로 애니메이션합니다. Tap me 위젯을 탭하면 데이터 필드의 값이 변경되고 상태 전환시 애니메이션을 구동하게됩니다.

Inheritance

Object > DiagnosticableTree > Widget > StatefulWidget > ImplicitlyAnimatedWidget > AnimatedPositioned

Constructors

암시적 위치에 애니메이션 위젯을 만듭니다.

가로 값은 3개 (left, right, width) 중 2개만 설정 할 수 있습니다.
세로 값은 3개 (top, bottom, height) 중 2개만 설정할 수 있습니다
curve 및 duration 인수는 null이 될수 없습니다.

Properties

child → Widget

트리의 하위 위젯입니다

final

curve → Curve

애니메이션할 때 적용할 곡선입니다.

final, inherited

duration → Duration

애니메이션 효과를 줄 기간입니다.

final, inherited

top → double?

스택의 맨 위에서 위젯의 맨 위 가장자리 오프셋입니다.

final

bottom → double?

스택의 맨 아래에서 위젯의 맨 아래 가장자리 오프셋입니다.

final

width → double?

위젯의 너비입니다

final

height → double?

위젯의 높이입니다

final

left → double?

스택의 왼쪽에서 위젯의 맨 왼쪽 가장자리 오프셋입니다.

final

right → double?

스택의 오른쪽에서 위젯의 맨 오른쪽 가장자리 오프셋입니다.

final

ARAYO IT - 아라요이트