项目里的启动图是一个自定义的页面,启动图淡出后push主页,push的时候过渡很不自然,于是在push的时候加入了PageRouteBuilder路由动画
淡入:
8lmtb-5itcu-min.gif
旋转:
ruf9v-x8avw-min.gif
缩放:
hdtwz-q5wpg-min.gif
左滑:
wlhhb-d49kx-min.gif
自定义类继承PageRouteBuilder:
enum RouteTransition {
fade,
zoom,
rotation,
}
class CustomRoute extends PageRouteBuilder {
final Widget widget; // 目标页面
final RouteTransition transition; // 动画效果
final int duration; // 动画时长
CustomRoute(this.widget, {this.transition, this.duration = 500})
: super(
// 过渡时间
transitionDuration: Duration(milliseconds: duration),
// 构造器
pageBuilder: (BuildContext context, Animation<double> animation1,
Animation<double> animation2) {
return widget;
},
transitionsBuilder: (BuildContext context,
Animation<double> animation1,
Animation<double> animation2,
Widget child) {
if (transition == RouteTransition.fade) {
// 淡入
return FadeTransition(
opacity: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
parent: animation1, curve: Curves.fastOutSlowIn)),
child: child,
);
} else if (transition == RouteTransition.zoom) {
// 缩放
return ScaleTransition(
scale: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
parent: animation1, curve: Curves.fastOutSlowIn)),
child: child,
);
} else if (transition == RouteTransition.rotation) {
// 旋转
return RotationTransition(
turns: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
parent: animation1, curve: Curves.fastOutSlowIn)),
child: ScaleTransition(
scale: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
parent: animation1, curve: Curves.fastOutSlowIn)),
child: child,
),
);
} else {
// 左滑进入
return SlideTransition(
position: Tween<Offset>(
begin: Offset(1.0, 0.0), end: Offset(0.0, 0.0))
.animate(CurvedAnimation(
parent: animation1, curve: Curves.fastOutSlowIn)),
child: child);
}
},
);
}
使用:
Navigator.pushReplacement(
context,
CustomRoute(
TabBarController(),
transition: RouteTransition.fade,
duration: 1000,
),
);
transition默认左滑动画,duration动画时长(毫秒)
网友评论