FadeTransition class
위젯의 불투명도를 애니메이션으로 표현합니다.
두 자식의 크기 사이에서 자동으로 애니메이션을 적용하고 그 사이에서 페이드 아웃하는 위젯의 경우 AnimatedCrossFade 를 참조하세요.
공식 문서 코드
FadeTransition 은 간단한 페이드 효과 애니메이션을 줄 수 있는 위젯이다.
위젯 자체는 간단하지만 animationController 를 사용하기 때문에 마냥 쉬운건 또 아니다.
먼저 하위 속성을 보고 알아보도록 하자.
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| opacity | Animation<double> | - | 자식 위젯의 투명도를 제어하는 애니메이션 |
| alwaysIncludeSemantics | bool | false | 애니메이션 중에도 자식의 시맨틱 정보를 항상 유지할지 여부 |
FadeTransition 위젯은 단순히 투명도 (opacity) 를 애니메이션 시키는 위젯이다. 그런데 애니메이션이 되려면 시간 값에 따라 값이 변하는 데이터가 필요한데 그것을 만들어 주는 것이 바로 AnimationContoller 다.
opacity 값에는 Animation 타입을 가지는 값을 넣어야 하는데 여기다가 이제 AnimationContoller 를 넣어주면 되시겠다.
late final AnimationController _controller = AnimationController(
duration: widget.duration,
vsync: this,
)..repeat(reverse: true);
예제에 나와있는 애니메이션 컨트롤러이다.
_contoroller 안에 duration(seconds: 2) 를 받고 vsnc: this 를 넣어줌으로써 this 자체가 TickerProvider 역할을 하게 만들어 주고 있다.
그런후 ..repeat(revers: true) 로 무한 반복하도록 지정하고 있다.
이제 이 친구에게는 효과 같은 것이 없는데 효과를 따로 지정해서 먹여주고 있는 모습이다.
late final CurvedAnimation _animation = CurvedAnimation(parent: _controller, curve: widget.curve);
이제 그렇게 만든 _animation 을 opacity 에 먹여 주고 있다.
child: FadeTransition(
opacity: _animation,
child: const Padding(padding: EdgeInsets.all(8), child: FlutterLogo()),
),
이정도면 애니메이션에 대한 설명은 된 것 같고 남은 하위 속성인 alwaysIncludeSemantics 에 대해서 간략하게 설명하면 기본값인 false 상태 일때는 투명도가 0(완전히 투명)일 때는 자식 위젯이 화면에 보이지 않고, 시맨틱 정보(접근성 정보)도 제외 되게 된다.
즉 스크린 리더가 그 위젯을 인식하지 않게 해준다.
그러므로 true 로 설정헤주면 그 반대로 될테니 스크린 리더가 opacity가 0인 상태라도 인식을 하게 되겠다.
암튼 이렇게 오늘 FadeTransition 에 대해서 알아보았다. 막상 쉬운 것 같으면서도 AnimationContoller 의 특성상 그냥 귀찮아지기 때문에 잘 쓰일지는 모르겠다.. 솔직히 그냥 간단하게 AnimatedOpacity 를 쓸것같긴하다.
그럼 도움이 되었길 바라며 마치겠다.
