[flutter] 플러터에서 useAnimation 훅(hook)을 사용한 다양한 애니메이션 구현

14 Dec 2023

flutter

웹 개발에서 React의 훅(hook)들이 큰 인기를 끌고 있듯이, 플러터(Flutter)에서도 흥미로운 훅 중 하나인 useAnimation 훅을 사용하여 다양한 애니메이션을 구현할 수 있습니다.

1. useAnimation 훅이란?

useAnimation은 useAnimationController와 함께 사용되어, 애니메이션을 쉽게 구현할 수 있도록 하는 플러터 애니메이션 훅입니다.

2. useAnimation 훅의 기본 구조

useAnimation 훅의 기본 구조는 다음과 같습니다:

final AnimationController animationController = useAnimationController(duration: Duration(seconds: 2));
final Animation<double> animation = useAnimation(Tween(begin: 0.0, end: 1.0).animate(animationController));

위의 코드에서, useAnimationController를 사용하여 애니메이션 컨트롤러를 생성하고, useAnimation을 사용하여 애니메이션을 정의합니다.

3. useAnimation 훅을 사용한 다양한 애니메이션 구현 예시

3.1. 페이드 애니메이션 구현

final AnimationController animationController = useAnimationController(duration: Duration(seconds: 2));
final Animation<double> animation = useAnimation(Tween(begin: 0.0, end: 1.0).animate(animationController));

return FadeTransition(
  opacity: animation,
  child: YourWidget(),
);

3.2. 이동 애니메이션 구현

final AnimationController animationController = useAnimationController(duration: Duration(seconds: 2));
final Animation<Offset> animation = useAnimation(Tween<Offset>(begin: Offset(0.0, 0.0), end: Offset(1.0, 1.0)).animate(animationController));

return SlideTransition(
  position: animation,
  child: YourWidget(),
);

3.3. 확대/축소 애니메이션 구현

final AnimationController animationController = useAnimationController(duration: Duration(seconds: 2));
final Animation<double> animation = useAnimation(Tween(begin: 0.0, end: 1.0).animate(animationController));

return ScaleTransition(
  scale: animation,
  child: YourWidget(),
);

마무리

useAnimation 훅을 사용하면 플러터에서 간단하고 확실한 애니메이션을 쉽게 구현할 수 있습니다. 이를 통해 UI/UX를 향상시키고 사용자에게 더욱 흥미로운 경험을 제공할 수 있습니다. 번거로운 애니메이션 구현을 위한 코드를 최소화하여 개발자의 생산성을 향상시킬 수 있는 이러한 기능을 적극 활용해보시기를 권장드립니다.

더 많은 정보를 원하시면 플러터 공식 문서의 애니메이션 가이드를 참고하시기 바랍니다.