FadeTransition

Flutter에서 위젯 투명도 애니메이션 관리하기: FadeTransition

FadeTransition은 Flutter에서 위젯의 투명도를 시간에 따라 애니메이션으로 조절하는 데 사용됩니다. 이 위젯은 세밀한 애니메이션 제어가 가능하며, AnimationController를 통해 직접 애니메이션의 시작, 정지, 반복 등을 관리할 수 있습니다.

주요 속성

• opacity: Animation<double> 객체를 받아 위젯의 투명도를 결정합니다. 값은 0.0(완전 투명)에서 1.0(완전 불투명) 사이에서 변화합니다.
• child: 투명도 변화를 적용할 자식 위젯입니다.
• alwaysIncludeSemantics: 투명도가 0일 때도 위젯이 의미론적으로 처리되어야 하는지 여부를 결정합니다.

Hit Testing

FadeTransition을 사용할 때, 투명도가 0이 되어도 자식 위젯이 히트 테스팅에 반응하는 것은 중요한 주의사항입니다. 즉, 위젯이 보이지 않아도 사용자가 클릭하거나 탭할 수 있습니다. 이는 사용자 경험에 혼란을 줄 수 있으므로, IgnorePointer와 같은 위젯을 함께 사용하여 투명도가 0일 때 터치를 무시하도록 설정하는 것이 좋습니다.

AnimatedOpacity와의 차이

AnimatedOpacity는 FadeTransition과 유사한 기능을 수행하지만, 명시적인 Animation 객체를 필요로 하지 않습니다. 대신, opacity와 duration 속성만 설정하면 내부적으로 애니메이션을 처리합니다. FadeTransition은 더 세밀한 애니메이션 제어가 가능하며, AnimationController를 통해 직접 애니메이션 상태를 관리할 수 있습니다.

코드 예제

아래 예제는 FadeTransition과 AnimationController를 사용하여 Flutter 로고의 투명도를 애니메이션하는 방법을 보여줍니다:

class FadeLogo extends StatefulWidget {
  @override
  _FadeLogoState createState() => _FadeLogoState();
}

class _FadeLogoState extends State<FadeLogo> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 3),
      vsync: this, // 애니메이션의 프레임 레이트를 디바이스의 화면 리프레시 레이트와 동기화
    );
    _animation = Tween(begin: 0.0, end: 1.0).animate(_controller)
      ..addListener(() {
        setState(() {}); // 화면 갱신
      })
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          _controller.reverse();
        } else if (status == AnimationStatus.dismissed) {
          _controller.forward();
        }
      });
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: _animation,
      child: FlutterLogo(size: 100),
    );
  }
}

관련 자료

• AnimatedOpacity: 간단한 투명도 애니메이션을 위한 위젯입니다.
• AnimatedCrossFade: 두 자식 위젯 간의 크로스 페이드 전환을 애니메이션하는 위접니다.
• vsync: 애니메이션의 프레임 레이트를 디바이스의 화면 리프레시 레이트와 동기화하는 메커니즘입니다. Flutter에서 vsync를 설정하기 위해서는 TickerProvider를 구현해야 하며, SingleTickerProviderStateMixin 또는 TickerProviderStateMixin을 사용하여 클래스에 믹스인(mixin)을 해야 합니다. 이를 통해 애니메이션의 부드러움을 보장하고, 리소스 사용을 최적화합니다.

추가 참고 리소스

• FadeTransition (Flutter Widget of the Week)
• 공식 문서 - FadeTransition