# 애니메이션 (Animation)
## Animations
모던한 모바일 앱은 다양한 애니메이션을 활용하여 사용자 경험을 향상시킵니다. Flutter에서 제공하는 다양한 애니메이션 위젯을 사용하면 앱에 동적이고 매력적인 효과를 쉽게 추가할 수 있습니다.
### Animated.scale
#### 크기 조절 애니메이션
```dart
Animations(
Animated.scale,
child: FlutterLogo(size: 50.0),
curve: Curves.fastOutSlowIn,
parent: controller,
duration: null,
);
```
`Animated.scale`은 위젯의 크기를 조절하는 애니메이션을 구현합니다. 이를 통해 위젯을 확대 또는 축소할 수 있습니다.
### Animated.rotation
#### 회전 애니메이션
```dart
Animations(
Animated.rotation,
parent: controller,
curve: null,
duration: null,
child: FlutterLogo(size: 50.0),
);
```
`Animated.rotation`은 위젯을 회전시키는 애니메이션을 구현합니다. 위젯을 원하는 각도로 회전시킬 수 있습니다.
### Animated.slide
#### 슬라이드 애니메이션
```dart
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
#### 위치 조절 애니메이션
```dart
Animations(
Animated.align,
alignment: alignmentSelected
? Alignment.topRight
: Alignment.bottomLeft,
duration: Duration(milliseconds: 1000),
curve: null,
child: FlutterLogo(size: 50),
);
```
`Animated.align`은 위젯의 위치를 조절하는 애니메이션을 구현합니다. 원하는 위치로 위젯을 이동시킬 수 있습니다.
### Tween Animation
#### 보간 애니메이션
```dart
TweenAnimationBuilder(
tween: Tween(begin: 0, end: endValue),
duration: const Duration(milliseconds: 100),
builder: (BuildContext context, double size, Widget? child) {
return FlutterLogo(size: size);
},
);
```
`TweenAnimationBuilder`는 시작값과 끝값 사이의 보간 애니메이션을 생성합니다. 위젯의 크기 또는 다른 속성을 부드럽게 변경할 수 있습니다.
위와 같이 `TweenAnimationBuilder`를 사용하면 크기 또는 다른 숫자 속성을 애니메이션화할 수 있습니다.
### Animated.crossFade
#### 크로스페이드 애니메이션
```dart
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
#### 투명도 애니메이션
```dart
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
#### 패딩 애니메이션
```dart
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
#### 물리 모델 애니메이션
```dart
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
#### 위치 애니메이션
```dart
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
#### 테마 애니메이션
```dart
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
#### 크로스페이드 애니메이션
```dart
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
#### 크기 애니메이션
```dart
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
#### 스위처 애니메이션
```dart
Animations(
Animated.switcher,
duration: const Duration(milliseconds: 500),
curve: null,
child: Text('$count',
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
key: ValueKey(count)),
);
```
`Animated.switcher` 위젯은 자식 위젯 간의 전환 애니메이션을 제공합니다. 자식 위젯을 교체할 때 부드럽게 전환할 수 있습니다.
### Animated.defaultTextStyle
#### 텍스트 스타일 애니메이션
```dart
Animations(
Animated.container,
width: width,
height: height,
decoration: BoxDecoration(
color: color,
borderRadius: borderRadius,
),
duration: const Duration(seconds: 1),
curve: Curves.fastOutSlowIn,
);
```
Flutter의 애니메이션 위젯을 활용하여 앱에 다양한 동적 효과를 적용해보세요. 이러한 애니메이션 위젯을 사용하면 사용자 경험을 향상시키고 앱을 더 매력적으로 만들 수 있습니다.
###
###
###
###
.gif?alt=media&token=04e4c475-f8c7-46b6-9012-2d3d0c271d23)
.gif?alt=media&token=25126f8d-be51-438d-8c0f-6ad470c7a76e)
.gif?alt=media&token=5bb1d58d-9d64-4fcc-b204-581fd042bca8)
.gif?alt=media&token=92c26971-d904-4022-8ef3-7dfc51e70a1d)
.gif?alt=media&token=7ad8277e-08ec-4dc3-bce5-b4e92d30c8eb)
.gif?alt=media&token=aa367a47-ac34-4631-aaed-5cf56a68af3e)
.gif?alt=media&token=9efd112f-f024-4d89-963c-1502086456e8)
.gif?alt=media&token=9f7e1ed4-b3c8-427b-8b4a-f9d8f5a6e38a)
.gif?alt=media&token=62173a03-f4f8-4316-b2cc-174c9d58f43a)
.gif?alt=media&token=ab8e488e-2d9d-4ef4-ba5e-898a5ce70b29)
.gif?alt=media&token=6718e2c6-cab6-468b-b133-f4bec72f4e15)
.gif?alt=media&token=9ca6458d-6f72-4f7b-8251-914a04009b6d)
.gif?alt=media&token=48d09c68-ecf4-4900-8015-bd4219bf6a30)
.gif?alt=media&token=488887f5-9d6e-48d3-a298-312079ecae5f)
.gif?alt=media&token=5a186859-e997-4941-8bb1-f2a6ff524f52)
.gif?alt=media&token=a1378470-5ca0-404a-87cd-53db59a02dbb)