# 애니메이션 (Animation)

## Animations

모던한 모바일 앱은 다양한 애니메이션을 활용하여 사용자 경험을 향상시킵니다. Flutter에서 제공하는 다양한 애니메이션 위젯을 사용하면 앱에 동적이고 매력적인 효과를 쉽게 추가할 수 있습니다. 

### Animated.scale

#### 크기 조절 애니메이션

<div align="left"><figure><img src="/files/Wg8FLEQroQfmikIFSFPP" alt="" width="190"><figcaption></figcaption></figure></div>

```dart
Animations(
  Animated.scale,
  child: FlutterLogo(size: 50.0),
  curve: Curves.fastOutSlowIn,
  parent: controller,
  duration: null,
);
```

`Animated.scale`은 위젯의 크기를 조절하는 애니메이션을 구현합니다. 이를 통해 위젯을 확대 또는 축소할 수 있습니다.

### Animated.rotation

#### 회전 애니메이션

<div align="left"><figure><img src="/files/vvL83MWzdFBeKVv2uZBQ" alt="" width="190"><figcaption></figcaption></figure></div>

```dart
Animations(
  Animated.rotation,
  parent: controller,
  curve: null,
  duration: null,
  child: FlutterLogo(size: 50.0),
);
```

`Animated.rotation`은 위젯을 회전시키는 애니메이션을 구현합니다. 위젯을 원하는 각도로 회전시킬 수 있습니다.

### Animated.slide

#### 슬라이드 애니메이션&#x20;

<div align="left"><figure><img src="/files/fIrJ1cA74lebnwqfB4ei" alt="" width="375"><figcaption></figcaption></figure></div>

```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`는 좌표로 위젯의 위치를 좌우로 슬라이드 이동시키는 애니메이션을 구현합니다. 위젯을 원하는 좌표의 위치로 이동시킬 수 있습니다.&#x20;

### Animated.align&#x20;

#### 위치 조절 애니메이션

<div align="left"><figure><img src="/files/F5fl2UZfcU7oxICPGp38" alt="" width="375"><figcaption></figcaption></figure></div>

```dart
Animations(
  Animated.align,
  alignment: alignmentSelected
      ? Alignment.topRight
      : Alignment.bottomLeft,
  duration: Duration(milliseconds: 1000),
  curve: null,
  child: FlutterLogo(size: 50),
);
```

`Animated.align`은 위젯의 위치를 조절하는 애니메이션을 구현합니다. 원하는 위치로 위젯을 이동시킬 수 있습니다.

### Tween Animation

#### 보간 애니메이션

<div align="left"><figure><img src="/files/8IH8ydpxkprFKG0bItK8" alt="" width="249"><figcaption></figcaption></figure></div>

```dart
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

#### 크로스페이드 애니메이션

<div align="left"><figure><img src="/files/a0V10VmAIkzu2BuxVX9S" alt="" width="184"><figcaption></figcaption></figure></div>

```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&#x20;

#### 투명도 애니메이션

<div align="left"><figure><img src="/files/OUMUjcH4rMx2mooNI1ay" alt="" width="209"><figcaption></figcaption></figure></div>

```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&#x20;

#### 패딩 애니메이션

<div align="left"><figure><img src="/files/l3cZ7lKupbhgmeiHbXQ1" alt="" width="375"><figcaption></figcaption></figure></div>

```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&#x20;

#### 물리 모델 애니메이션

<div align="left"><figure><img src="/files/upOTEk2qcUL1bcobutf9" alt="" width="188"><figcaption></figcaption></figure></div>

```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&#x20;

#### 위치 애니메이션

<div align="left"><figure><img src="/files/vsCpUK5k1uB0I81TzFm8" alt="" width="375"><figcaption></figcaption></figure></div>

```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&#x20;

#### 테마 애니메이션

<div align="left"><figure><img src="/files/CzwEMwoOVb3XCFQnFu3k" alt="" width="280"><figcaption></figcaption></figure></div>

```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&#x20;

#### 크로스페이드 애니메이션

<div align="left"><figure><img src="/files/UG8VPmZbcRNXctO8LwZ9" alt="" width="184"><figcaption></figcaption></figure></div>

```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

#### 크기 애니메이션

<div align="left"><figure><img src="/files/SGltjKNzhVK53sHLkmMx" alt="" width="375"><figcaption></figcaption></figure></div>

```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&#x20;

#### 스위처 애니메이션

<div align="left"><figure><img src="/files/yPnL0ZNZbKqoTSEpVmFE" alt="" width="207"><figcaption></figcaption></figure></div>

```dart
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

#### 텍스트 스타일 애니메이션

<div align="left"><figure><img src="/files/9vX1fMOHIRIzyyAVk82J" alt="" width="375"><figcaption></figcaption></figure></div>

```dart
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&#x20;

<div align="left"><figure><img src="/files/Weigb92VT0jgg09l972r" alt="" width="188"><figcaption></figcaption></figure></div>

```dart
Animations(
          Animated.container,
          width: width,
          height: height,
          decoration: BoxDecoration(
            color: color,
            borderRadius: borderRadius,
          ),
          duration: const Duration(seconds: 1),
          curve: Curves.fastOutSlowIn,
        );
```

Flutter의 애니메이션 위젯을 활용하여 앱에 다양한 동적 효과를 적용해보세요. 이러한 애니메이션 위젯을 사용하면 사용자 경험을 향상시키고 앱을 더 매력적으로 만들 수 있습니다.

###

###

###

###


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.aliothx.net/start/uiux/ui-ux/animation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.