20个Flutter实例视频教程-第06节: 酷炫的路由动画-2

博客地址：

https://jspang.com/post/flutterDemo.html#toc-94f

视频地址：

https://jspang.com/post/flutterDemo.html#toc-94f

 

缩放的效果：

 

 

 

 

import 'package:flutter/material.dart';

class CustomeRoute extends PageRouteBuilder{
  final Widget widget;
  CustomeRoute(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,
      ){
        //渐隐渐现的路由动画效果 
        // return FadeTransition(
        //   opacity: Tween(begin: 0.0,end:1.10)
        //   .animate(CurvedAnimation(
        //     parent:animation1,//这里也可以随便传值，默认就是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,
        );
      }
    );
}

缩放代码