flutter學習--酷炫的路由動畫

酷炫的路由動畫

主入口方法

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: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:FirstPage()
    );
  }
}

pages.dart頁面的編寫

主入口文件用import引入了pages.dart文件，這個文件就是生成了兩個頁面（Flutter裏的頁面也是Widget,這個你要跟網頁區分開）。有了兩個頁面就可以實現路由跳轉了。

pages.dart文件的代碼如下，這裏我們先用普通路由代替，看一看效果。

import 'package:flutter/material.dart';


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

AppBar Widger的 elevation 屬性：這個值是AppBar 滾動時的融合程度，一般有滾動時默認是4.0，現在我們設置成0.0，就是和也main完全融合了。
寫完這個頁面代碼後，已經可以進行最基本的導航了，但是並沒有什麼酷炫的動畫。

自定義CustomRoute Widget

新建一個custome_router.dart文件，這個就是要自定義的路由方法，自定義首先要繼承於通用的路由的構造器類PageRouterBuilder。繼承之後重寫父類的CustomRoute構造方法。

構造方法可以簡單理解爲：只要以調用這個類或者說是Widget，構造方法裏的所有代碼就執行了。

import 'package:flutter/material.dart';

class CustomRoute extends PageRouteBuilder{
  final Widget widget;
  CustomRoute(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 FadeTransition(
              opacity: Tween(begin:0.0,end :1.0).animate(CurvedAnimation(
                  parent:animation1,
                  curve:Curves.fastOutSlowIn
              )),
              child: child,
            );
        }  
      
    ); 
}

• FadeTransition:漸隱漸現過渡效果，主要設置opactiy（透明度）屬性，值是0.0-1.0。

• animate :動畫的樣式，一般使用動畫曲線組件（CurvedAnimation）。

• curve: 設置動畫的節奏，也就是常說的曲線，Flutter準備了很多節奏，通過改變動畫取消可以做出很多不同的效果。

• transitionDuration：設置動畫持續的時間，建議再1和2之間。

縮放路由動畫

return ScaleTransition(
  scale:Tween(begin:0.0,end:1.0).animate(CurvedAnimation(
    parent:animation1,
    curve: Curves.fastOutSlowIn
    )),
    child: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,
);