애니메이션 (Animation)

애니메이션은 Flutter 애플리케이션을 더 생동감 있게 만들어주는 중요한 기술입니다. Flutter는 다양한 애니메이션을 구현할 수 있는 다양한 방법을 제공합니다.

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