Flutter酷炫的路由动画效果

如今Flutter的路由效果已经很是不错了，能知足大部分App的需求，可是谁不但愿本身的App更酷更炫那，下面介绍几个酷炫的路由动画。

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

不过这个方法仍是有不少写法的，经过写法的不一样，产生的动画效果也有所不一样。

一、渐隐渐现的动画效果

先编写一个主入口方法，仍是最简单的格式，只不过home属性，使用的RouterFirst的组件是咱们自定义的，须要咱们再次编写。入口文件的代码以下：

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:RouterFirst()
    );
  }
}

而后是pages.dart，这个文件就是生成了两个页面（Flutter里的页面也是Widget,这个你要跟网页区分开）。有了两个页面就能够实现路由跳转了。

这里咱们先用普通路由代替，看一看效果。

import 'package:flutter/material.dart';

class RouterFirst extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red, //背景色
      appBar: AppBar(
        title: Text('FirstPage',style: TextStyle(fontSize: 36.0)),
        elevation: 4.0, //0-4 和下面body的融合程度，0是不显示分隔状态，不写默认是4
      ),
      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 RouterSecond();
             }));
          },
        ),
      ),
      
    );
  }
}

class RouterSecond extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.lightBlue,
      appBar: AppBar(
        title: Text('SecondPage',style:TextStyle(fontSize:36.0),),
        backgroundColor: Colors.lightBlue,
        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，就是和body彻底融合了。

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

自定义CustomRoute Widget

这个就是要自定义的路由方法，自定义首先要继承于通用的路由的构造器类PageRouterBuilder。继承以后重写父类的CustomRoute构造方法。

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

代码以下：

class CustomRoute extends PageRouteBuilder{
  final Widget widget;

  //构造方法
  CustomRoute(this.widget)
    :super(
      transitionDuration:Duration(seconds: 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(
          opacity: Tween(begin: 0.0,end: 1.0)
          .animate(CurvedAnimation(
            parent: animation1,
            curve: Curves.fastOutSlowIn,  //动画曲线 
          )),
          child: child,
        );
      }
    );
}

• FadeTransition:渐隐渐现过渡效果，主要设置opactiy（透明度）属性，值是0.0-1.0。

• animate :动画的样式，通常使用动画曲线组件（CurvedAnimation）。

• curve: 设置动画的节奏，也就是常说的曲线，Flutter准备了不少节奏，经过改变更画取消能够作出不少不一样的效果。

• transitionDuration：设置动画持续的时间，建议再1和2之间。

最后要把上面onPressed代码修改下：

onPressed: (){
            // Navigator.of(context).push(MaterialPageRoute(builder:(BuildContext context){
            //   return RouterSecond();
            // }));
            Navigator.of(context).push(CustomRoute(RouterSecond()));
   },

写完代码，咱们已经能够看到在切换路由时有了渐隐渐现的动画效果。

二、缩放的动画效果

修改transitionsBuilder下{ }里的内容

//缩放的动画效果
     return ScaleTransition(
          scale: Tween(begin: 0.0,end: 1.0).animate(CurvedAnimation(
            parent: animation1,
            curve: Curves.fastOutSlowIn,
          )),
          child: 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,
          ),
      );

四、左侧滑动进入退出动画

其实用的作多的仍是左右滑动路由动画，其实实现起来也是很是简单，直接使用SlideTransition就能够了。

//左侧滑动进入退出
      return SlideTransition(
          position: Tween<Offset>(
            begin: Offset(-1.0, 0.0),
            end: Offset(0.0, 0.0)
          ).animate(CurvedAnimation(
            parent: animation1,
            curve:Curves.fastOutSlowIn
          )),
          child: child,
      );