页面转场动画对于一个成熟的应用来说,是十分重要的。
Flutter 提供了很便捷的方式实现页面转场动画。
通常,在页面跳转的时候会使用 Flutter 提供的 MaterialPageRoute,它提供了默认的页面跳转动画。
当然,我们也可以定义自己的页面跳转动画。
1. 使用 PageRouteBuilder
使用 PageRouteBuilder,可以快速的自定义一个页面跳转动画。
Navigator.push(context, PageRouteBuilder(pageBuilder:
(BuildContext context, Animation animation,
Animation secondaryAnimation) {
return ScaleTransition(
scale: animation,
alignment: Alignment.bottomRight,
child: AnimPage());
2.继承 PageRoute
通过继承 PageRoute,也可以自定义页面跳转动画。
class FadeRoute extends PageRoute {
FadeRoute({
@required this.pageBuilder,
this.transitionDuration = const Duration(milliseconds: 300),
this.opaque = true,
this.barrierDismissible = false,
this.barrierColor,
this.barrierLabel,
this.maintainState = true,
});
final WidgetBuilder pageBuilder;
@override
final Duration transitionDuration;
@override
final bool opaque;
@override
final bool barrierDismissible;
@override
final Color barrierColor;
@override
final String barrierLabel;
@override
final bool maintainState;
@override
Widget buildPage(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation) => pageBuilder(context);
@override
Widget buildTransitions(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation, Widget child) {
return FadeTransition(
opacity: animation,
child: pageBuilder(context),
);
}
}
关键就是实现 buildPage()
和 buildTransitions()
两个函数。
在 buildTransitions()
中添加转场 Widget 。
使用:
Navigator.push(context, FadeRoute(builder: (context) {
return AnimPage();
}));
定义起来不是很方便,但是便于封装统一的转场动画。