Flutter路由动画效果 滑动、缩放、旋转以及进场和退场动画

1、main.dart

import 'package:flutter/material.dart';

import 'Pages.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      home: FirstPage(),
    );
  }
}

2、pages.dart

import 'package:flutter/material.dart';
import 'animate_router.dart';

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //设置背景颜色
      backgroundColor: Colors.amberAccent,
      appBar: AppBar(
        title: Text('第一个页面', style: TextStyle(fontSize: 36.0),),
        //跟底部的appBar的融合情况
        elevation: 4.0,
      ),
      body: Center(
        child: MaterialButton(
          onPressed: () {
            Navigator.of(context).push(
                CustomRouter(SecondPage()));
          },
          child: Icon(
            Icons.navigate_next,
            color: Colors.white,
            size: 64.0,
          ),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.pinkAccent,
      appBar: AppBar(
        title: Text('第二个页面', style: TextStyle(fontSize: 36.0),),
        backgroundColor: Colors.pink,
        leading: Container(),
        elevation: 4.0,
      ),
      body: Center(
        child: MaterialButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: Icon(
            Icons.navigate_before,
            color: Colors.white,
            size: 64.0,
          ),

        ),
      ),
    );
  }
}

3、animate_router.dart

import 'package:flutter/material.dart';

class CustomRouter extends PageRouteBuilder {
  final Widget widget;

    //构造方法
  CustomRouter(this.widget)
    :super(
    //过度时间
    transitionDuration: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
  ){
      //FadeTransition渐隐渐现
    /*return FadeTransition(
      opacity: Tween(begin: 0.0,end: 2.0)
      //fastOutSlowIn快出慢进
      .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<Offset>(
            begin: Offset(-1.0, 0.0),
            end: Offset(0.0, 0.0)
          )
          .animate(CurvedAnimation(
              parent: animation1,
              //fastOutSlowIn快进慢出
              //bounceOut 切换的时候有一种抖动的效果
              //ease 翻书一样的效果
              //easeInExpo有一种退场和进场的慢动作效果
              //slowMiddle进场和退场到一半的时候有一个暂停
              curve: Curves.slowMiddle)),
          child: child,
        );

  }
  );


}

4、具体演示

//旋转缩放动画
   /* return RotationTransition(
      turns: Tween(begin: 0.0,end: 1.0)
          .animate(
        CurvedAnimation(
            parent: animation1,
            curve: Curves.fastOutSlowIn
        )),

//缩放动画
        /*return ScaleTransition(
          scale: Tween(begin: 0.0,end: 1.0).animate(
            CurvedAnimation(parent: animation1, curve: Curves.fastOutSlowIn)),
          child: child,

        );*/

   //FadeTransition渐隐渐现
    /*return FadeTransition(
      opacity: Tween(begin: 0.0,end: 2.0)
      //fastOutSlowIn快出慢进
      .animate(CurvedAnimation(parent: animation1, curve: Curves.fastOutSlowIn)),
      child: child,
    );*/

//左右滑动动画
        return SlideTransition(
          position: Tween<Offset>(
            begin: Offset(-1.0, 0.0),
            end: Offset(0.0, 0.0)
          )
          .animate(CurvedAnimation(
              parent: animation1,
              //fastOutSlowIn快进慢出
              //bounceOut 切换的时候有一种抖动的效果
              //ease 翻书一样的效果
              //easeInExpo有一种退场和进场的慢动作效果
              //slowMiddle进场和退场到一半的时候有一个暂停
              curve: Curves.slowMiddle)),
          child: child,
        );