Flutter Animation 플러터 애니메이션

Flutter Animation 효과를 위한 다양한 옵션이 있습니다. 가끔 위젯에 애니메이션 효과를 주고 싶을 때가 있는데 많은 경우 AnimatedWidget을 이용하여 원하는 애니메이션 효과를 줄 수 있습니다. AnimatedWidget은 추상클래스로 그 자체는 위젯이 아니지만 원하는 애니메이션을 만드는데 유요한 도구입니다.

AnimatedWidget 사용예제

다음 예제는 Transform.ratate를 이용하여 녹색 컨테이너 박스에 회전 애니메이셔 효과를 나타낸 것입니다.

AnimatedWidget class

AnimatedWidget는 추상클래스이기 때문에 상속받은 하위 클래스내에서 애니메이션을 구현하면 됩니다. AnimatedWidget의 매개변수인 Listenable은 일반적으로 Animation 객체로 정의되며 ChangeNotifier 및 ValueNotifier를 포함한 모든 Listenable과 함께 사용할 수도 있습니다.

ImplicitlyAnimatedWidget(암시적)과 ExplicitAnimatedWidget(명시적) 차이점

ExplicitAnimatedWidget(명시적)은 Listenable 인수로 정의된 AnimationController의 생명주기를 개발자가 수동으로 관리해야 합니다. 이와 반대로 ImplicitlyAnimatedWidget(암시적)은 내부에서 Listenable 인수로 정의된 AnimationController를 자동으로 관리해 주기 때문에 더 쉽고 간편하게 구현할 수 있습니다. 애니메이션의 지속시간과 곡선의 값 만으로 애니메이션을 구현할 경우 ImplicitlyAnimatedWidget(암시적)사용을 고려해보시기 바랍니다.

암시적으로 애니메이션되는 일반적인 위젯

Flutter는 많은 암시적으로 애니메이션 위젯이 프레임워크와 함께 제공됩니다. 일반적으로 사용되는 암시적으로 애니메이션 위젯은 다음과 같습니다.

AnimatedBuilder : 복잡한 애니메이션 사용 사례에 유용
AlignTransition : Align의 애니메이션 버전
DecoratedBoxTransition : DecoratedBox의 애니메이션 버전
DefaultTextStyleTransition : DefaultTextStyle의 애니메이션 버전
PositionedTransition : Positioned의 애니메이션 버전
RelativePositionedTransition : Positioned의 애니메이션 버전
RotationTransition : 위젯의 회전에 애니메이션을 적용
ScaleTransition : 위젯의 크기에 애니메이션을 적용
SizeTransition : 자체 크기에 애니메이션 효과
SlideTransition : 기준 위치에 애니메이션 효과
FadeTransition : Opacity의 애니메이션 버전인 .
AnimatedModalBarrier : ModalBarrier 의 애니메이션 버전입니다 .

Inheritance

Object > DiagnosticableTree > Widget > StatefulWidget > AnimatedWidget

Constructors

Properties

listenable → Listenable

위젯의 상태를 수신

final

ARAYO IT - 아라요이트