Flutter路由动画

Flutter路由动画

在我们实际的开发中，这个动画还是比较必要的。因为我们要求有效果的实现，总不能一下子就覆盖了原来的内容，所以我们就需要动画来实现这界面跳转的效果。这里我只说一个移动端最常用的一个就是侧滑的效果。

我们定义两个界面，没个界面中间都有一个按钮，能够实现页面的跳转。
代码如下：

##  main.dart ##
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {



  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstPage(),
    );
  }
}

## FirstPage.dart  ##
class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("FirstPage"),
      ),
      body: Center(
        child: MaterialButton(
          child: Icon(Icons.navigate_next,size: 50,color: Colors.redAccent,),
          onPressed: (){
            Navigator.of(context).push(
              MaterialPageRoute(builder: (BuildContext context){
                return SecondPage();
              })
            );
          },
        ),
      ),
    );
  }
}


## SecondPage.dart ##
class SecondPage extends StatefulWidget {
  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SecondPage"),
      ),
      body: Center(
        child: MaterialButton(
          child: Icon(Icons.navigate_before,size: 50,color: Colors.redAccent,),
          onPressed: (){
            Navigator.of(context).pop();  //返回上一级界面 直接可以使用 pop()
          },
        ),        
      ),
    );
  }
}

这就是我们定义的界面。

效果：

这就是实现的效果（过程脑洞自补）。

这样我们功能实现了，但是总觉得还是缺少点什么，因为这是一下子展开到这个界面没有过程，所以我们需要添加一些动画的效果，比如左进右出，右进左出，快进慢出，慢进快出等等。Flutter的相关内容已经在枚举类里列举好了，要想知道就自己多尝试吧。

我们新建一个类作为动画效果类。
代码如下：

class CustomRouteAnimation extends PageRouteBuilder{

  final Widget widget;
  CustomRouteAnimation(this.widget)
      : super(
    transitionDuration: const Duration(seconds: 1),
    pageBuilder: (BuildContext context,Animation<double> animation1,Animation<double> animation2){
      return widget;
    },
    transitionsBuilder: (BuildContext context,Animation<double> animation1,Animation<double> animation2,Widget child){
      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,
      );
    },
  );

然后我们只需要在我们路由跳转哪里改一下：

Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context){return SecondPage();}  //原来的路由跳转
Navigator.of(context).push(CustomRouteAnimation(SecondPage()));  //改为现在

好了就这样实现了，我就不放图了，自己脑补。如果自己写麻烦就直接复制一下就行了。

最后说一下为什么还要在自定义动画的下面加上child呢，是为了有多个效果重叠的。我就不多说了，基本用不到，这是最常用的，当然你是做游戏的当我没说！！！！