（Flutter十三）页面跳转动画示例

在实际开发过程中，我们需要在页面跳转的时候添加一些有特色的动画效果，让页面看起来比较炫酷。

1、main.dart，它里面主要就是放置一个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: ThemeData(
        primarySwatch: Colors.blue
      ),
      home: FirstPage(),
    );
  }
}

2、pages.dart，它里面就是创建一个FirstPage,然后在FirstPage中放置一个icon，点击icon进入SecondPage。
AppBar Widger的 elevation 属性：设置这个属性的值越大导航栏与页面之间的阴影越大，一般有滚动时默认是4.0，如果设置成0.0就没有阴影效果。

import 'package:flutter/material.dart';
import 'package:flutterc03/customer_router.dart';

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

3、customer_router.dart,自定义路由，通过自定义动画效果实现页面跳转时的炫酷动画。代码中演示了四种不同的效果。逐渐消失的动画效果、缩放的动画效果、旋转加缩放的动画效果、左右滑动的动画效果。

import 'package:flutter/material.dart';

class CustomerRoute extends PageRouteBuilder {
  final Widget widget;
  CustomerRoute(this.widget)
  :super(
    transitionDuration:Duration(seconds: 1), pageBuilder:(
     BuildContext context,
        Animation animation1,
        Animation animation2,
    ){
      return widget;
    },
    transitionsBuilder:(BuildContext context,
        Animation animation1,
        Animation animation2,
        Widget child,
    ){
//      //逐渐消失的动画效果
//      return FadeTransition(
//        opacity: Tween(begin: 0.0,end: 1.0) //设置不透明度
//        .animate(CurvedAnimation(
//            parent: animation1,
//            curve: Curves.fastOutSlowIn)
//        ),
//      child: child,
//      );

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

    //左右滑动动画效果
      return SlideTransition(
        position: Tween(
          begin: Offset(-1.0,0.0),
          end: Offset(0.0, 0.0)
        ).animate(CurvedAnimation(
          parent: animation1,
          curve: Curves.fastOutSlowIn
        )),
        child: child,
      );
    }
  );
}