【Flutter】三十五、Flutter自定義路由過渡動畫

    在之前的路由跳轉時使用的是MaterialPageRoute，與MaterialPageRoute作用相同的其實還有CupertinoPageRoute、PageRouteBuilder。使用CupertinoPageRoute時，當路由跳轉時，無論Android還是iOS頁面都是左右切換的，而使用PageRouteBuilder可以自定義頁面跳轉時的動畫。

一、CupertinoPageRoute

Navigator.push(context, CupertinoPageRoute(
	builder: (context) => PageOne()
));

二、PageRouteBuilder

2.1 漸隱漸現

PageRouteBuilder(
	pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation){
		return FadeTransition(
			opacity: animation,
			child: PageOne()
		);
	},
	transitionDuration: Duration(milliseconds: 500),
);

2.2 縮放

PageRouteBuilder(
	pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation){
		return ScaleTransition(
              scale: Tween(begin:0.0,end:1.0).animate(CurvedAnimation(
                  parent:animation,
                  curve: Curves.fastOutSlowIn
              )),
              child: routeBuilder(context, arguments: settings.arguments),
            );
	},
	transitionDuration: Duration(milliseconds: 500),
);

2.3 旋轉縮放

PageRouteBuilder(
	pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation){
		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: routeBuilder(context, arguments: settings.arguments),
              )
            );
	},
	transitionDuration: Duration(milliseconds: 500),
);

2.4 左右滑動（不帶邊界陰影）

PageRouteBuilder(
	pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation){
		return SlideTransition(
            position:
                Tween<Offset>(begin: Offset(1.0, 0.0), end: Offset(.0, 0.0))
                    .animate(CurvedAnimation(
                        parent: animation, curve: Curves.fastOutSlowIn)),
            child: PageOne()
          );
	},
	transitionDuration: Duration(milliseconds: 500),
);