Colin's Blog
[flutter] 플러터 shimmer와 다른 애니메이션 라이브러리 비교

플러터 앱에서 애니메이션은 사용자 경험(UX)을 향상시키는 데 중요한 역할을 합니다. Shimmer는 텍스트나 이미지 주위에 부드러운 진동 효과를 주는 데 사용되는 인기 있는 애니메이션 라이브러리입니다. 그러나 Shimmer 이외에도 다른 애니메이션 라이브러리들이 있습니다. 이번 포스트에서는 Shimmer와 다른 플러터 애니메이션 라이브러리들을 비교해보겠습니다.

Shimmer

Shimmer는 플러터에서 텍스트나 이미지 주위에 반짝이는 효과를 주는 데 사용되는 라이브러리입니다. 주로 로딩 중인 콘텐츠를 표시할 때 사용되며 사용법이 간단하여 인기가 있습니다.

Shimmer.fromColors(
  baseColor: Colors.grey[300],
  highlightColor: Colors.grey[100],
  child: Text(
    'Shimmer',
    style: TextStyle(fontSize: 40.0, fontWeight: FontWeight.bold),
  ),
)

다른 애니메이션 라이브러리들

AnimatedContainer

AnimatedContainer는 애니메이션화된 컨테이너를 빌드하는 데 사용됩니다. 컨테이너의 속성들을 변경하면 애니메이션이 발생하여 부드러운 UI 변경 효과를 줄 수 있습니다.

double _width = 100.0;

AnimatedContainer(
  width: _width,
  height: 100.0,
  color: Colors.blue,
  duration: Duration(seconds: 1),
)

Hero

Hero 애니메이션은 화면 간에 위젯의 전환을 부드럽게 만들어주는 데 사용됩니다. 주로 이미지나 위젯 전체의 전환 효과를 줄 때 유용합니다.

Hero(
  tag: 'imageHero',
  child: Image.network('https://via.placeholder.com/150'),
)

AnimatedBuilder

플러터 위젯 트리가 변경될 때마다 애니메이션을 재구성하고 싶을 때 AnimatedBuilder를 사용할 수 있습니다. 이 라이브러리는 커스텀 애니메이션을 구축하는 데 유용합니다.

AnimatedBuilder(
  animation: _controller,
  builder: (BuildContext context, Widget child) {
    return Transform.rotate(
      angle: _controller.value * 2.0 * math.pi,
      child: child,
    );
  },
  child: Icon(Icons.refresh),
)

결론

Shimmer는 주로 로딩 상태를 나타낼 때나 특정 텍스트 또는 이미지에 효과를 주고 싶을 때 유용합니다. 반면에 AnimatedContainer, Hero, AnimatedBuilder와 같은 다른 애니메이션 라이브러리들은 다양한 애니메이션 효과를 적용하고 싶을 때 유용합니다. 앱의 필요에 맞게 적절한 애니메이션 라이브러리를 선택하여 플러터 앱의 사용자 경험을 향상시킬 수 있습니다.

참고자료:

© 2018 Colin. All rights reserved.