Flutter 页面切换动画
创建两个模拟页面
class LeftPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(title: Text("第一页", style: TextStyle(color: Colors.white),),
elevation: 0,
backgroundColor: Colors.blue,),
body: Center(
child: MaterialButton(onPressed: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => RightPage()));
},
// 页面切换示例
// Navigator.push(context, SlidePageRouteBuilder(RightPage()));
child: Icon(
Icons.navigate_next,
color: Colors.white,
size: 64.0
),),
),
);
}
}
class RightPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.red,
appBar: AppBar(title: Text("第二页", style: TextStyle(color: Colors.white),),
elevation: 0,
backgroundColor: Colors.red,
// 不显示返回键
automaticallyImplyLeading: false,
),
body: Center(
child: MaterialButton(onPressed: () {
Navigator.pop(context);
},
child: Icon(
Icons.navigate_before,
color: Colors.white,
size: 64.0
),),
),
);
}
}
渐变效果
/// 自定义页面切换动画 - 渐变切换
class CustomPageRouteBuilder extends PageRouteBuilder{
// 跳转的页面
final Widget widget;
CustomPageRouteBuilder(this.widget):super(
transitionDuration:Duration(seconds: 1),
pageBuilder:(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation){
return widget;
},
transitionsBuilder:(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child){
return FadeTransition(child:child,
opacity: Tween(begin: 0.0,end: 1.0)
.animate(CurvedAnimation(parent: animation, curve: Curves.fastOutSlowIn))
);
}
);
}
参数介绍
- FadeTransition:渐隐渐现过渡效果,主要设置opactiy(透明度)属性,值是0.0-1.0。
- animate :动画的样式,一般使用动画曲线组件(CurvedAnimation)。
- curve: 设置动画的节奏,也就是常说的曲线,Flutter准备了很多节奏,通过改变动画取消可以做出很多不同的效果。
- transitionDuration:设置动画持续的时间,建议再1和2之间。
缩放切换
/// 自定义页面切换动画 - 缩放切换
class ScalePageRouteBuilder extends PageRouteBuilder{
// 跳转的页面
final Widget widget;
ScalePageRouteBuilder(this.widget):super(
transitionDuration:Duration(seconds: 1),
pageBuilder:(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation){
return widget;
},
transitionsBuilder:(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child){
return ScaleTransition(child:child,
scale: Tween(begin: 0.0,end: 1.0)
.animate(CurvedAnimation(parent: animation, curve: Curves.fastOutSlowIn))
);
}
);
}
旋转&缩放切换
/// 自定义页面切换动画 - 旋转+缩放切换
class RotationScalePageRouteBuilder extends PageRouteBuilder {
// 跳转的页面
final Widget widget;
RotationScalePageRouteBuilder(this.widget) :super(
transitionDuration: Duration(seconds: 1),
pageBuilder: (BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation) {
return widget;
},
transitionsBuilder: (BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation, Widget child) {
return RotationTransition(
turns: Tween(begin: 0.0, end: 1.0)
.animate(
CurvedAnimation(parent: animation, curve: Curves.fastOutSlowIn)),
child: ScaleTransition(scale: Tween(begin: 0.0, end: 1.0)
.animate(
CurvedAnimation(parent: animation, curve: Curves.fastOutSlowIn),),
child: child,),
);
}
);
}
``
## 平移切换
```dart
/// 自定义页面切换动画 - 平移切换
class SlidePageRouteBuilder extends PageRouteBuilder {
// 跳转的页面
final Widget widget;
SlidePageRouteBuilder(this.widget) :super(
transitionDuration: Duration(seconds: 1),
pageBuilder: (BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation) {
return widget;
},
transitionsBuilder: (BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation, Widget child) {
return SlideTransition(
position: Tween<Offset>(
begin: Offset(-1.0, 0.0), end: Offset(0.0, 0.0))
.animate(
CurvedAnimation(parent: animation, curve: Curves.fastOutSlowIn)),
child: child,);
}
);
}