Animations
모던한 모바일 앱은 다양한 애니메이션을 활용하여 사용자 경험을 향상시킵니다. Flutter에서 제공하는 다양한 애니메이션 위젯을 사용하면 앱에 동적이고 매력적인 효과를 쉽게 추가할 수 있습니다.
Animated.scale
크기 조절 애니메이션
Animations(
Animated.scale,
child: FlutterLogo(size: 50.0),
curve: Curves.fastOutSlowIn,
parent: controller,
duration: null,
);
Animated.scale은 위젯의 크기를 조절하는 애니메이션을 구현합니다. 이를 통해 위젯을 확대 또는 축소할 수 있습니다.
Animated.rotation
회전 애니메이션
Animations(
Animated.rotation,
parent: controller,
curve: null,
duration: null,
child: FlutterLogo(size: 50.0),
);
Animated.rotation은 위젯을 회전시키는 애니메이션을 구현합니다. 위젯을 원하는 각도로 회전시킬 수 있습니다.
Animated.slide
슬라이드 애니메이션
Animations(
Animated.slide,
offset: slidedown ? Offset.zero : Offset(0, 1),
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut,
child: FlutterLogo(size: 50.0(,
);
Animated.slide는 좌표로 위젯의 위치를 좌우로 슬라이드 이동시키는 애니메이션을 구현합니다. 위젯을 원하는 좌표의 위치로 이동시킬 수 있습니다.
Animated.align
위치 조절 애니메이션
Animations(
Animated.align,
alignment: alignmentSelected
? Alignment.topRight
: Alignment.bottomLeft,
duration: Duration(milliseconds: 1000),
curve: null,
child: FlutterLogo(size: 50),
);
Animated.align은 위젯의 위치를 조절하는 애니메이션을 구현합니다. 원하는 위치로 위젯을 이동시킬 수 있습니다.
Tween Animation
보간 애니메이션
TweenAnimationBuilder<double>(
tween: Tween<double>(begin: 0, end: endValue),
duration: const Duration(milliseconds: 100),
builder: (BuildContext context, double size, Widget? child) {
return FlutterLogo(size: size);
},
);
TweenAnimationBuilder는 시작값과 끝값 사이의 보간 애니메이션을 생성합니다. 위젯의 크기 또는 다른 속성을 부드럽게 변경할 수 있습니다.
위와 같이 TweenAnimationBuilder를 사용하면 크기 또는 다른 숫자 속성을 애니메이션화할 수 있습니다.
Animated.crossFade
크로스페이드 애니메이션
Animations(
Animated.crossFade,
duration: const Duration(milliseconds: 500),
firstChild: const FlutterLogo(
style: FlutterLogoStyle.horizontal, size: 100.0),
secondChild: const FlutterLogo(
style: FlutterLogoStyle.stacked, size: 100.0),
crossFadeState: crossfade
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
curve: null,
);
Animated.crossFade는 두 개의 위젯을 서로 교차하면서 애니메이션화합니다. 이것은 두 가지 다른 상태 또는 뷰 사이의 전환에 유용합니다.
Animated.opacity
투명도 애니메이션
Animations(
Animated.opacity,
opacity: visible ? 1.0 : 0.0,
duration: const Duration(milliseconds: 500),
curve: null,
child: Container(
width: 50,
height: 50,
color: agnesTheme.primaryColorLight),
);
Animated.opacity는 위젯의 투명도를 조절하는 애니메이션을 구현합니다. 위젯을 투명하게 또는 불투명하게 만들 수 있습니다.
Animated.padding
패딩 애니메이션
Animations(
Animated.padding,
padding: padding ? EdgeInsets.all(50.0) : EdgeInsets.all(0.0),
duration: const Duration(seconds: 2),
curve: Curves.easeInOut,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height / 5,
color: agnesTheme.primaryColorLight),
);
Animated.padding 위젯은 패딩의 크기를 애니메이션으로 변경할 때 사용됩니다. 패딩을 변경하면 해당 위젯의 크기와 위치가 부드럽게 변화하게 됩니다.
Animated.physicalModel
물리 모델 애니메이션
Animations(Animated.physicalModel,
duration: Duration(seconds: 1),
color: play
? agnesTheme.primaryColorDark
: agnesTheme.primaryColorLight,
elevation: play ? 9 : 3,
shape: BoxShape.rectangle,
shadowColor: Colors.grey,
borderRadius: play
? const BorderRadius.all(Radius.circular(0))
: const BorderRadius.all(Radius.circular(24)),
curve: null,
child: Container(width: 240, height: 240));
Animated.physicalModel 위젯은 물리 모델을 기반으로 그림자와 모양을 변경할 때 사용됩니다. 그림자의 크기와 모양을 애니메이션으로 조절할 수 있습니다.
Animated.positioned
위치 애니메이션
Animations(Animated.positioned,
width: position ? 200.0 : 50.0,
height: position ? 50.0 : 200.0,
top: position ? 50.0 : 150.0,
duration: const Duration(seconds: 2),
curve: Curves.fastOutSlowIn,
child: Container(color: agnesTheme.primaryColorLight));
Animated.positioned 위젯은 위젯의 위치와 크기를 애니메이션으로 변경할 때 사용됩니다. 이를 통해 위젯이 부드럽게 이동하거나 크기가 변하는 효과를 낼 수 있습니다.
Animated.theme
테마 애니메이션
Animations(
Animated.theme,
data: themeselected ? ThemeData.light() : ThemeData.dark(),
duration: const Duration(milliseconds: 500),
curve: null,
child: Card(
child: const Padding(
padding: EdgeInsets.all(16),
child: Text('Theme', style: TextStyle(fontSize: 20)),
),
),
);
Animated.theme 위젯은 앱의 테마를 애니메이션으로 변경할 때 사용됩니다. 앱의 테마를 빠르게 전환하거나 부드럽게 변경하는 효과를 줄 수 있습니다.
Animated.crossFade
크로스페이드 애니메이션
Animations(
Animated.crossFade,
duration: const Duration(milliseconds: 500),
firstChild: const FlutterLogo(
style: FlutterLogoStyle.horizontal, size: 100.0),
secondChild: const FlutterLogo(
style: FlutterLogoStyle.stacked, size: 100.0),
crossFadeState: crossfade
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
curve: null,
);
Animated.crossFade 위젯은 두 개의 자식 위젯 간의 부드러운 페이드 인/아웃 효과를 제공합니다. 화면 전환 또는 콘텐츠 전환에 사용됩니다.
Animated.size
크기 애니메이션
Animations(
Animated.size,
duration: const Duration(milliseconds: 500),
curve: Curves.fastOutSlowIn,
child: Container(
width: selected ? 300 : 200,
height: selected ? 160 : 200,
color: agnesTheme.primaryColorLight),
);
Animated.size 위젯은 크기를 애니메이션으로 변경할 때 사용됩니다. 위젯의 크기를 부드럽게 조절하여 화면 전환을 만들 수 있습니다.
Animated.switcher
스위처 애니메이션
Animations(
Animated.switcher,
duration: const Duration(milliseconds: 500),
curve: null,
child: Text('$count',
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
key: ValueKey<int>(count)),
);
Animated.switcher 위젯은 자식 위젯 간의 전환 애니메이션을 제공합니다. 자식 위젯을 교체할 때 부드럽게 전환할 수 있습니다.
Animated.defaultTextStyle
텍스트 스타일 애니메이션
Animations(Animated.defaultTextStyle,
duration: const Duration(milliseconds: 300),
style: TextStyle(
fontSize: 30.0,
color: textSelected
? agnesTheme.primaryColorDark
: agnesTheme.primaryColorLight,
fontWeight:
textSelected ? FontWeight.w100 : FontWeight.bold),
curve: null,
child: Text('TextStyle'));
Animated.container
Animations(
Animated.container,
width: width,
height: height,
decoration: BoxDecoration(
color: color,
borderRadius: borderRadius,
),
duration: const Duration(seconds: 1),
curve: Curves.fastOutSlowIn,
);
Flutter의 애니메이션 위젯을 활용하여 앱에 다양한 동적 효과를 적용해보세요. 이러한 애니메이션 위젯을 사용하면 사용자 경험을 향상시키고 앱을 더 매력적으로 만들 수 있습니다.
