Animated... 위젯을 쓰지 않고, 애니메이션을 사용하기 귀찮지만, 막상 하고 보면 마땅히 쓸 곳은 없고, 애매하다.
Container
Stateful Widget에서 SingleTickerProviderStateMixin 호출
class _MainPageState extends State<MainPage> with SingleTickerProviderStateMixin
컨트롤러와 애니메이션 변수 생성
late AnimationController animationController;
late Animation animation;
그리고 초기화,
@override
void initState() {
// TODO: implement initState
super.initState();
animationController = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
);
animation = Tween(begin: 0.0, end: 1.0).animate(animationController)
..addListener(() {
setState(() {});
});
}
Button이나 GuestureDetector 등에서, 컨트롤러 사용
onTap: () {
print('clicked');
animationController.forward();
},
onDoubleTap: () {
print('double clicked');
animationController.reverse();
},
Page Transition #1 GetX
Get 패키지 호출
import 'package:get/get.dart';
Get.to 로 Routing 할때 transition 사용. 개간단. 퀄리티도 굿.
onPressed: () {
Get.to(
() => SecondPage(),
transition: Transition.circularReveal,
duration: Duration(seconds: 1),
);
},
Page Transition #2 PageRouteBuilder
PageRouteBuilder 메소드 생성 개귀찮. 작성은 어려웠을지 모르나, 퀄리티는 담보할 수 없음. 그래서 인터넷에서 남의 코드 컨닝.
Route<Object?> _createRoute() {
return PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) =>
const SecondPage(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
return AnimatedBuilder(
animation: animationController,
builder: (context, _) {
return Transform(
alignment: FractionalOffset.center,
transform: Matrix4.identity()
..setEntry(3, 2, 0.002)
..rotateX(pi * animation.value * 2),
// ..rotateY(3.14 * animation.value * 2),
child: child,
);
},
);
},
);
}
Navigator로 사용, push의 argument로 위의 메쏘드를 작성해도 무방.
onPressed: () {
Navigator.of(context).push(_createRoute());
},
끝.
