Flutter 에서는 2가지 방법으로 애니메이션을 구현할 수 있다.
위젯 내부에서 자체적으로 애니메이션이 일어난다.
listener
나 ticker
를 추가할 필요가 없고 값이 변함에 따라 자동으로 애니메이션이 일어난다.
flutter.dev 에서 보고 구현하면 된다.(유투브 영상 : flutter.dev)
double opecity = 0;
void setDeleteMode() {
setState(() {
if (isDelete) {
opecity = 0;
} else {
opecity = 1;
}
isDelete = !isDelete;
});
}
return GestureDetector(
onTap: setDeleteMode,
child: AnimatedOpacity(
duration: const Duration(seconds: 2),
opacity: opecity,
child:
Util.uint8listToImage(snapshot.data[index].image),
),
);
명시적 애니메이메이션을 구현하는 방식의 종류
1. 빌트인 위젯을 사용하는 방법
~~~Transition
으로 끝나는 위젯을 사용
2. AnimatedBuilder를 사용하는 방법
원하는 위젯을 AnimatedBuilder
로 감싸는 구조(커스터마이징을 많이할 수 있다)
명시적 애니메이션을 사용하기 위해 컨트롤러와 애니메이션 객체를 선언해준다.
애니메이션을 시작/거꾸로 재생/멈춤
value
: 애니메이션의 처음 시작 지점을 표시(default는 lowerBound)
lowerBound
와 upperBound
는 애니메이션 동작의 몇 %를 진행하는지 설정
예를들어 0% ~ 100%의 투명도 애니메이션일 경우 lowerBound가 0.1 upperBound가 0.5일 경우 애니메이션은 투명도 10%~50%로 동작한다
vsync
: TickerProvider. Ticker를 제공한다. 1프레임마다 주어진 콜백 함수를 실행한다. 위젯의 state에 TickerProviderStateMixin를 사용할 경우 자기자신(this)를 넘겨도 된다.
Ticker 는 매 프레임마다 함수를 호출하는 객체인데, 프레임이 변화되어야 할 때를 알려준다. TickerProvider
를 통해 간접적으로 사용하는 경우가 많고 TickerProviderStateMixin이나 SingleTickerProviderStateMixin을 주로 사용한다.(SingleTickerProviderStateMixin은 AnimationControler를 하나만 사용할 때 사용하면 된다_효율)
class _DeleteAnimationState extends State<DeleteAnimation>
with TickerProviderStateMixin {
late final AnimationController _controller = AnimationController(
duration: const Duration(milliseconds: 50),
vsync: this,
lowerBound: 0.31,
upperBound: 0.35,
)..repeat(reverse: true);//repeat
...
void dispose() {//컨트롤러 dispose
_controller.dispose();
super.dispose();
}
repeat 설정을 해줬기 때문에 애니메이션이 무한반복.
reverse : true일 경우 시작-끝-시작-끝 순서로 반복
reverse : false일 경우 시작-시작-시작-시작 순서로 반복
repeat을 설정해주지 않으면 애니메이션이 자동으로 시작되지않으므로 트리거를 지정해줘야한다.
_controller.forawrd();로 정방향실행
_controller.reverse();로 역방향 실행을 할수있다.
onTap: () {
_controller.forward();
},
컨트롤러는 리소스를 위해 꼭 dispose해주자
컨트롤러가 애니메이션의 상태를 조절한다.(상태는 애니메이션 객체가 그 값을 컨드롤러가 변경)
Animation 클래스는 추상클래스(abstract)이다. Tween, CurvedAnimation, TrainHoppingAnimaion등을 사용해 객체를 만들 수 있다.
예제는 CurvedAnimation. parent
에는 controller를 curve
에는 애니메이션 흐름을 넣어준다.
curve : flutter.dev
late final Animation<double> _animation = CurvedAnimation(
parent: _controller,
curve: Curves.easeInOutBack,
);
build(BuildContext context) {
return RotationTransition(
turns: _animation,
child: widget.child,
);
}
}
Widget
AnimatedBuilder(
animation: _controller,
child: widget.child,
builder: (context, child) {
return Transform.rotate(
angle: (-0.35 + _controller.value) * 2.0 * pi,
child: child,
);
},
)