flutter 页面加载动画_（Flutter十三）页面跳转动画示例
在实际开发过程中，我们需要在页面跳转的时候添加一些有特色的动画效果，让页面看起来比较炫酷。
1、main.dart，它里面主要就是放置一个FirstPage的组件。
import 'package:flutter/material.dart';
import 'pages.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue
),
home: FirstPage(),
);
}
}
2、pages.dart，它里面就是创建一个FirstPage,然后在FirstPage中放置一个icon，点击icon进入SecondPage。
AppBar Widger的 elevation 属性：设置这个属性的值越大导航栏与页面之间的阴影越大，一般有滚动时默认是4.0，如果设置成0.0就没有阴影效果。
import 'package:flutter/material.dart';
import 'package:flutterc03/customer_router.dart';
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(
title: Text('First Page',
style: TextStyle(fontSize:36.0 ),),
elevation: 4.0, //
),
body: Center(
child: MaterialButton(
child: Icon(
Icons.navigate_next,
color: Colors.white70,
size: 64.0,
),
onPressed: (){
Navigator.of(context).push(CustomerRoute(SecondPage()));
// Navigator.of(context).push(MaterialPageRoute(
// builder: (BuildContext context){
// return SecondPage();
// }));
},
),
),
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.pinkAccent,
appBar: AppBar(
elevation: 4.0,
backgroundColor: Colors.pinkAccent,
title: Text('Second Page',style: TextStyle(fontSize: 36),),
),
body: Center(
child: MaterialButton(
child: Icon(
Icons.navigate_before,
color: Colors.white70,
size: 64.0,
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
);
}
}
3、customer_router.dart,自定义路由，通过自定义动画效果实现页面跳转时的炫酷动画。代码中演示了四种不同的效果。逐渐消失的动画效果、缩放的动画效果、旋转加缩放的动画效果、左右滑动的动画效果。
import 'package:flutter/material.dart';
class CustomerRoute extends PageRouteBuilder {
final Widget widget;
CustomerRoute(this.widget)
:super(
transitionDuration:Duration(seconds: 1), pageBuilder:(
BuildContext context,
Animation animation1,
Animation animation2,
){
return widget;
},
transitionsBuilder:(BuildContext context,
Animation animation1,
Animation animation2,
Widget child,
){
// //逐渐消失的动画效果
// return FadeTransition(
// opacity: Tween(begin: 0.0,end: 1.0) //设置不透明度
// .animate(CurvedAnimation(
// parent: animation1,
// curve: Curves.fastOutSlowIn)
// ),
// child: child,
// );
// //缩放的动画效果
// return ScaleTransition(
// scale: Tween(begin: 0.0, end: 1.0).animate(
// CurvedAnimation(
// parent: animation1,
// curve: Curves.fastOutSlowIn
// )
// ),
// child: child,
// );
// //旋转+缩放动画效果
// 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,
// ),
// );
//左右滑动动画效果
return SlideTransition(
position: Tween(
begin: Offset(-1.0,0.0),
end: Offset(0.0, 0.0)
).animate(CurvedAnimation(
parent: animation1,
curve: Curves.fastOutSlowIn
)),
child: child,
);
}
);
}