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,
        );
      }
    );
}

縮放代碼

 

 

旋轉加縮放

 

 

 

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,
        // );
        //旋轉+縮放動畫效果
        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,
          ),
        ); 
      }
    );
}

旋轉+縮放

 

 

左右滑動路由動畫

 

 

 

最終代碼：

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,
        // );
        //旋轉+縮放動畫效果
        // 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,
            curve:Curves.fastOutSlowIn,
          )),
          child: child,
        );
      }
    );
}

最終代碼