縮放動(dòng)畫.gif

旋轉(zhuǎn)動(dòng)畫.gif

左右動(dòng)畫.gif

漸變動(dòng)畫.gif

main

import 'package:flutter/material.dart';
import 'firstpage.dart';
main(){
  runApp(new MyApp());
}
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
       title:'Flutter Demo',
      // 自定義主題樣本
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstPage(),
    );
  }
}

firstpage

import 'package:flutter/material.dart';
import 'custom_router.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)),
       // 模式是4.0設(shè)置成0.0是完全和main布局融合
        elevation: 0.0,
      ),
      body:Center(
        child: MaterialButton(
          child: Icon(
            Icons.navigate_next,
            color:Colors.white,
            size:64.0,
          ),
          // 點(diǎn)擊開(kāi)啟路由
          onPressed: (){
                                  // 調(diào)用自定義的路由方法
             Navigator.of(context).push(CustomRoute(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(),
        ),
      )
    );
  }
}

自定義的custom_router

import 'package:flutter/material.dart';
class CustomRoute extends PageRouteBuilder{
  final Widget widget;

  CustomRoute(this.widget)
  :super(
    // 設(shè)置過(guò)度時(shí)間
    transitionDuration:Duration(seconds: 1),
    // 構(gòu)造器
    pageBuilder:(
      // 上下文和動(dòng)畫
      BuildContext context,
      Animation<double> animaton1,
      Animation<double> animaton2,
    ){
      return widget;
    },
    transitionsBuilder:(
      BuildContext context,
      Animation<double> animaton1,
      Animation<double> animaton2,
      Widget child,
    ){
    
    // 需要什么效果把注釋打開(kāi)就行了
      // 漸變效果
      return FadeTransition(
        // 從0開(kāi)始到1
        opacity: Tween(begin: 0.0,end: 1.0)
        .animate(CurvedAnimation(
          // 傳入設(shè)置的動(dòng)畫
          parent: animaton1,
          // 設(shè)置效果凰浮，快進(jìn)漫出   這里有很多內(nèi)置的效果
          curve: Curves.fastOutSlowIn,
        )),
        child: child,
      );
      
      // 縮放動(dòng)畫效果
      // return ScaleTransition(
      //   scale: Tween(begin: 0.0,end: 1.0).animate(CurvedAnimation(
      //     parent: animaton1,
      //     curve: Curves.fastOutSlowIn
      //   )),
      //   child: child,
      // );

      // 旋轉(zhuǎn)加縮放動(dòng)畫效果
      // return RotationTransition(
      //   turns: Tween(begin: 0.0,end: 1.0)
      //   .animate(CurvedAnimation(
      //     parent: animaton1,
      //     curve: Curves.fastOutSlowIn,
      //   )),
      //   child: ScaleTransition(
      //     scale: Tween(begin: 0.0,end: 1.0)
      //     .animate(CurvedAnimation(
      //       parent: animaton1,
      //       curve: Curves.fastOutSlowIn
      //     )),
      //     child: child,
      //   ),
      // );

      // 左右滑動(dòng)動(dòng)畫效果
      // return SlideTransition(
      //   position: Tween<Offset>(
      //     // 設(shè)置滑動(dòng)的 X , Y 軸
      //     begin: Offset(-1.0, 0.0),
      //     end: Offset(0.0,0.0)
      //   ).animate(CurvedAnimation(
      //     parent: animaton1,
      //     curve: Curves.fastOutSlowIn
      //   )),
      //   child: child,
      // );
    }
  );
}