Flutter进阶实战 5-20 酷炫的路由动画-1

前言：现在Flutter的路由效果已经非常不错了，能满足大部分App的需求，但是谁不希望自己的App更酷更炫呢！下面介绍更炫酷的路由。

运行效果：

其实路由动画的原理很简单，就是重写并继承PageRouterBuilder这个类里的transitionsBuilder方法。

不过这个方法还是有很多写法的，通过写法的不同，产生的动画效果也有所不同。

实现过程：

1、主入口方法

先编写一个主入口方法，还是最简单的格式，只不过home属性，使用的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: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:FirstPage()
    );
  }
}

2、pages.dart页面的编写

主入口文件用import引入了pages.dart文件，这个文件就是生成了两个页面（Flutter里的页面也是Widget,这个你要跟网页区分开）。有了两个页面就可以实现路由跳转了。

pages.dart文件的代码如下，这里我们先用普通路由代替，看一看效果。

import 'package:flutter/material.dart';


class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      appBar:AppBar(
        title:Text('FirstPage',style: TextStyle(fontSize: 36.0)),
        elevation: 0.0,
      ),
      body:Center(
        child: MaterialButton(
          child: Icon(
            Icons.navigate_next,
            color:Colors.white,
            size:64.0,
          ),
          onPressed: (){
              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(
        title: Text('SecondPage',style:TextStyle(fontSize:36.0),),
        backgroundColor: Colors.pinkAccent,
        leading:Container(),
        elevation: 0.0,
      ),
      body:Center(
        child: MaterialButton(
          child: Icon(
            Icons.navigate_before,
            color:Colors.white,
            size:64.0
          ),
          onPressed: ()=>Navigator.of(context).pop(),
        ),
      )
    );
  }
}

上面代码中有一个新知识点，需要学习一下：

AppBar Widger的 elevation 属性：这个值是AppBar 滚动时的融合程度，一般有滚动时默认是4.0，现在我们设置成0.0，就是和也main完全融合了。

写完这个页面代码后，已经可以进行最基本的导航了，但是并没有什么酷炫的动画。

3、自定义CustomRoute Widget 

新建一个custome_router.dart文件，这个就是要自定义的路由方法，自定义首先要继承于通用的路由的构造器类PageRouterBuilder。继承之后重写父类的CustomRoute构造方法。

构造方法可以简单理解为：只要以调用这个类或者说是Widget，构造方法里的所有代码就执行了。

custome_router.dart代码如下：

import 'package:flutter/material.dart';

class CustomRoute extends PageRouteBuilder{
   final Widget widget;//创建一个组件变量,用作构造方法的参数
   //重写构造方法
   CustomRoute(this.widget):super(
      transitionDuration:const Duration(seconds:1),//设置动画持续的时间，建议再1和2之间。
      pageBuilder:(         //创建页面构造器
        BuildContext context,
        Animation<double> animation1,   //动画一和二
        Animation<double> animation2){
          return widget;           //返回组件
        },
      transitionsBuilder:(  //创建过渡动画构造器
        BuildContext context,
        Animation<double> animation1,
        Animation<double> animation2,
        Widget child){    //相比页面构造器多一个子组件
           return FadeTransition(  //FadeTransition：渐隐渐现过渡效果
               //设置opactiy（透明度）属性
               opacity: Tween(begin: 0.0,end: 1.0).animate(  //设置动画样式
                 CurvedAnimation(   //使用动画曲线组件（CurvedAnimation）
                   parent: animation1,        //父类动画
                   curve: Curves.fastOutSlowIn    //设置快出慢进的动画节奏
                 )
               ),
               child: child,//在child中设置另一个嵌套动画，形成叠加动画
           );
        }
   );
}