Fluter Animation 모드

전언

저번에Fluter 레어 Widgets 선택 이렇게 많은 Like를 주셔서 감사합니다.
계속 업데이트 중입니다.
3년 전이 작품의 애니메이션(UX?)놀랍게도 앞으로는 Flutter의 시대가 될 것 같습니다.
Flutter 표현
기본적으로 Animation Controller가 매개변수의 상태를 제어하도록 하여 매개변수의 상태를 지속적으로 변경하여 애니메이션을 만듭니다.
Flutter의 애니메이션 Widget도 많고 분산 소개도 많다.
언제 어떤 녀석을 쓸까?
이 애니메이션은 어떻게 실현됩니까?
공연이 실패할까요?
총서를 써야 하나요?
나는 위쪽처럼 망설인 적이 있다.
이 글에서 Fluter의 애니메이션 시스템을 체계화하고 스스로 쉽게 구분하여 사용하기 위해 아래의 난이도에 따라 진행하면 참고 가치가 있다고 생각합니다.
graph LR
ImplicitlyAnimatedWidget --> AnimatedWidget & AnimatedBuilder --> CustomPainter
!
이전 보도에서 저는 코드펜을 시도했고 코드를 써 보았습니다. 애니메이션은 자유롭고 100%의 정보가 가장 좋기 때문에 이 글을 공식 링크를 붙이고 싶습니다.
링크에 있는 유튜브와 인코딩을 찾아보면 바로 사용할 수 있을 것 같습니다.

ImplicitlyAnimatedWidget

나는 Implicitly, Flutter의 기본적인 것으로 이해하면 좋겠다고 생각한다.
또는 Flutter에서 제공하는 고정된 애니메이션 UI 위젯입니다.
Animation Controller를 쓸 필요가 없는 경우가 있습니다.
간단하게 처리할 것이 많다
개인 개발자들이 프레젠테이션 프로그램과 제품 유형을 즐겨 사용하는 부분일 것 같아요.
간단명료하게 설명하자면 애니메이션은 대부분 한 번만 재생하고 반복해서 재생하지 않으며 보통은 Stateful과 조합된다
최근 몇 년 동안 vsync를 폐지했기 때문에 별도의 extend Ticker Provider 학과가 필요 없다.

AnimatedSize

크기를 변경합니다.
AnimatedSize

AnimatedPositioned

위치 좌표를 변경합니다.
AnimatedPositioned

AnimatedAlign

Flutter 속 Align의 자리에서 움직일 수 있는 자리가 될 수 있다는 느낌.
AnimatedAlign

AnimatedPositionedDirectional

Directionality 애니메이션 위치 정보를 결합합니다.
AnimatedPositionedDirectional

AnimatedOpacity

애니메이션 투명도.
AnimatedOpacity

AnimatedContainer

모든 요소를 애니메이션할 수 있습니다.
AnimatedContainer

AnimatedDefaultTextStyle

child는 Text이며 Text Style을 Widget에 애니메이션합니다.
AnimatedDefaultTextStyle

AnimatedPadding

는 Container의 padding 매개변수를 애니메이션합니다.
AnimatedPadding

AnimatedPhysicalModel

Widget에 그림자를 그리고 그림자의 색상과 모양을 설정합니다.
shape라고 합니다.
AnimatedPhysicalModel

AnimatedTheme

프로그램 테마를 변경할 때
AnimatedTheme

AnimatedIcon

애니메이션 아이콘의 변화.(개인적으로 좋아하는 물건이에요.
AnimatedIcon

AnimatedCrossFade

두 Widget 모두 원활하게 전환됩니까?UX?보여드리기 위해 설치한 애니메이션입니다.
AnimatedCrossFade

AnimatedList

목록 UX를 최고 수준으로 끌어올릴 수 있습니다.(경험해 보면 알 수 있다.
AnimatedList

TweenAnimationBuilder

나는 Tween 애니메이션의 이름을 아는 사람이 많다고 생각한다. Flutter가 제공하는 Tween의 반을 자신의 스타일로 정의하고 Widget들을 조합한다.
나는 이것의 난이도가 Animated XXX 계열(Animated Widget 제외)보다 약간 높다고 생각한다.
TweenAnimationBuilder

AnimatedBuilder AnimatedWidget

이것만 Implicitly 계열이 아니라 Stateful Widget입니다.
Flutter가 기본적으로 제공하는 제품은 개발자의 규격에 맞지 않을 때가 있다.
이러한 조합과 전체 맞춤형 애니메이션은 상당히 복잡한 시스템이므로 Animated Builder Animated Widget으로 실현합시다.
Animation Controller는 필수입니다.
아래의 목록은AnimatedXXX와 별 차이가 없으니 애니메이션의 조합 부분을 통해 식별하는 것이 좋다고 생각합니다.송이경(신지현):솔직히 디자이너한테 부탁하려고.

AlignTransition

상대 위치 정보에 따라 애니메이션 위치입니다.
Animated Align의 동작이 좋다는 것을 알아야 한다고 생각합니다.
AlignTransition

DecoratedBoxTransition

decoration은 Container의 요소 중 하나이기 때문에 이 Transition은 이곳을 통제하는 것이다.
DecoratedBoxTransition

DefaultTextStyleTransition

Animated Default Text Style의 동작을 인식해야 한다고 생각합니다.
텍스트의 texttyle을 제어하는 물건입니다.
DefaultTextStyleTransition

FadeTransition

이것은 선물과 선물이다.
Animated Opacity 액션입니다.
FadeTransition

PositionedTransition

일반 위치 정보 애니메이션.
PositionedTransition

RelativePositionedTransition

Relative이므로 Stack에서는 위치 정보 애니메이션입니다.
RelativePositionedTransition

RotationTransition

회전이요?
RotationTransition

ScaleTransition

크기가 다른 물건이지만 핏이라서 확대 축소라고 부르는 게 좋을 수도 있어요.
ScaleTransition

SizeTransition

크기 조절용
SizeTransition

SlideTransition

슬라이드를 통해 화면에 들어가는 동작.
Navigator의 페이지 전환 기능은 기본적으로 포함되어 있습니다.
SlideTransition

CustomPainter

Custom Painter는 성능을 가장 중요하게 생각하며 설계자의 복잡한 애니메이션을 완벽하게 구현합니다.
나는 이걸로 애니메이션을 만드는 사람을 선생님이라고 불러도 된다고 생각한다.
자신이라면 두 손을 들어 디자이너에게 무릎을 꿇고 디자이너 분야의 물건은 신애니메이션 총서와 함께 하세요.
CustomPainter

디자인 분야

Custom Painter의 예처럼 멋진 애니메이션을 만들고 싶고 UX를 호화롭게 만들고 싶을 때 디자이너에게 부탁하세요.
rive와 lottie 둘 다 Fluter와 디자이너를 연결할 수 있다.(퍼포먼스가 높아요.
나는 로티의 경험이 있어서 지금 매우 좋아한다.
2019년에는 당시 로티 공식 도서관이 없어 구조늙은이를 사용해도 로티의 즐거움을 누릴 수 있었다.
현재 공식 총서가 출판되었고 1도 출판되었다.x버전으로 안정적이며 안심하고 사용할 수 있습니다.
rive는 0.8입니다.x가 됐기 때문에 로티에 비해 조금 어리기 때문에 앞으로 기대해도 될 것 같아요.

참고 자료

나는 모모의 보도도 참고가 될 수 있다고 생각한다.
[모모의 ImplicitlyAnimatedWidget](https://medium.com/flutter-jp/implicit-animation-b9d4b7358c28）
momo의 Transition
마지막으로 Fluter 엔지니어는 디자이너의 자질을 갖추어야 한다.