flutter 普通路由切换动画效果

1、构造类来继承 PageRouteBuilder
		class xx extends PageRouteBuilder
2、构造函数传入组件，并重写父类构造器
		final Widget x;
		
		CusRoute(this.x):super(
		    transitionDuration:Duration(seconds: 1),    动画时间
		    pageBuilder:(BuildContext context,Animation<double> animation1,Animation<double> animation2)
		    {
		      return x;
		    },
		
		    transitionsBuilder:(
		      BuildContext context,
		      Animation<double> animation1,
		      Animation<double> animation2,
		      Widget child
		    ){
		      实现动画
		      return
		      1、渐变 
		       FadeTransition(
		         child: child,   若混合其他动画,child内容直接放其他动画,优先级次于主动画
		         opacity: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.动画曲线)),
		       );
		       
		      2、缩放
		      ScaleTransition(
		         child: child,
		         scale: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve:  Curves.动画曲线)),
		       );
		       
		      3、旋转
		      RotationTransition(
		         child: child,
		         turns: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.动画曲线)),
		       );
		       
		      4、先旋转后缩放
		       RotationTransition(
		         child:ScaleTransition(
		           child: child,
		           scale: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.动画曲线)),
		         ) ,
		         turns: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.动画曲线)),
		       );
		       
		      5、平滑
		      SlideTransition(
		        child: child,
		        position: Tween<Offset>(begin:Offset(-1.0,0.0),end:Offset(0.0,0.0)).animate(CurvedAnimation(parent: animation1, curve:  Curves.动画曲线)),
		        	-1.0代表最小位置
		        	 0.0代表最大位置
		      );
		    }

  );
  
3、使用动画
	先引入动画类,在回调中
		 Navigator.of(context).push(xx(路由组件()));

代码示例:
动画类:

import 'package:flutter/material.dart';

class CusRoute extends PageRouteBuilder{
  final Widget comp;

  CusRoute(this.comp):super(
    transitionDuration:Duration(seconds: 1),
    pageBuilder:(BuildContext context,Animation<double> animation1,Animation<double> animation2)
    {
      return comp;
    },

    transitionsBuilder:(
      BuildContext context,
      Animation<double> animation1,
      Animation<double> animation2,
      Widget child
    ){
      //实现动画
      return
      //渐变 
      // FadeTransition(
      //   child: child,
      //   opacity: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.easeIn)),
      // );
      //缩放
      // ScaleTransition(
      //   child: child,
      //   scale: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.easeIn)),
      // );
      //旋转
      // RotationTransition(
      //   child: child,
      //   turns: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.easeIn)),
      // );
      //先旋转后缩放
      // RotationTransition(
      //   child:ScaleTransition(
      //     child: child,
      //     scale: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.easeIn)),
      //   ) ,
      //   turns: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.easeIn)),
      // );
      //平滑
      SlideTransition(
        child: child,
        position: Tween<Offset>(begin:Offset(-1.0,0.0),end:Offset(0.0,0.0)).animate(CurvedAnimation(parent: animation1, curve: Curves.easeIn)),
      );
    }

  );

}

跳转dart:

import "package:flutter/material.dart";
import "drag.dart";

import 'page/1.dart';
import 'page/2.dart';
import 'page/3.dart';
import 'xuan.dart';

void main()
{
  runApp(App());
}
class App extends StatelessWidget {
  const App({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return App2();
  }
}

class App2 extends StatefulWidget {
  App2({Key key}) : super(key: key);

  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App2> {

  List _page=[Home3(),Home2(),Home4()];
  int index=0;

  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      home:Scaffold(
        appBar:AppBar(
          title: Text('小案例'),
        ),
        body:Home() ,
        floatingActionButton: FloatingActionButton(
          onPressed: (){},
          tooltip: 'js',
          child: Icon(
            Icons.add,
            color: Colors.white,
          ),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        //导航栏
        bottomNavigationBar:BottomAppBar(
          color: Colors.lightBlue,
          //有缺口的圆形矩阵,用来放置浮动按钮
          shape: CircularNotchedRectangle(),
          child: Row(
            mainAxisAlignment:MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              IconButton(
                icon:Icon(Icons.home),
                color: Colors.white,
                onPressed: (){},
              ),
              IconButton(
                icon:Icon(Icons.category),
                color: Colors.white,
                onPressed: (){},
              ),
          ],),
        )
      ),
      routes: {
        '/test':(context)=>Home4()
      },
      
      //去掉右上角的debug贴纸
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),
      );
  }
}


class Home extends StatefulWidget {

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  Color dragColor=Colors.orange;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      color: Colors.red,
       child: Column(children: <Widget>[
       	
       	//跳转
         RaisedButton(
           child: Text('跳转'),
           onPressed: (){
             Navigator.of(context).push(CusRoute(Home4()));
           },
         ),
         
       ],)
    );
  }
}