flutter中的路由過場動畫 PageTransitionsTheme

過場動畫

過場動畫也就是切換路由時的動畫

這個東西有幾種方案能夠作

1. 繼承 PageRoute來作, 複寫 5 個抽象方法, 並抽象buildTransitions
2. 繼承已有的系統類, 好比 MaterialPageRoute 或者 CupertinoPageRoute
3. 一勞永逸的方案, 使用PageTransitionsTheme類結合 MaterialApp 的 theme 的pageTransitionsTheme屬性

前兩種目前網絡上也有一些人作了分享, 但第三種好像不多有人使用, 我這裏就來講一下PageTransitionsTheme的用法

這東西有以下的好處:

1. 設置一次, 你全部的MaterialPageRoute均可以生效
2. 對於命名路由, 也就是pushNamed體系的也有效

先分析下源碼

爲啥分析源碼? 由於若是上來就用顯得不高端

先找一個你們都知道的切入點, 通常的過場動畫都是用的 Navigator.push 方法來實現的

看看方法裏的實現, 會發現不少常見的東西, 好比, 每個 Route 都有本身的 OverlayEntry

而後會有一個 install 方法

而實際調用中, 這個 Overlay 會被插入到 Overlay 棧內, 從而在界面上顯示

通過這一串的調用, 就把 Navigator push 和 Route 關聯到了一塊兒, 那麼 theme 是怎麼和 Route 關聯起來的呢, 咱們進入 MaterialPageRoute 看一下

咱們看到, 這裏是從 Theme 中找到 pageTransitionsTheme, 而後調用 pageTransitionsTheme 的 buildTransitions 方法來完成構建, 因此這就是咱們能夠在 theme 中一次修改, 多處生效的主因了

如何使用

前面查看到了源碼是如何關聯到 pageTransitionsTheme 屬性的, 咱們接着就是該自定義的時候了

修改本身的 MyApp, 修改pageTransitionsTheme屬性

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.blue,
        pageTransitionsTheme: PageTransitionsTheme(
          builders: <TargetPlatform, PageTransitionsBuilder>{
            TargetPlatform.iOS: createTransition(),
            TargetPlatform.android: createTransition(),
          },
        ),
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

複製代碼

使用系統提供的一些動畫

PageTransitionsBuilder createTransition() {
  return FadeUpwardsPageTransitionsBuilder();
}

複製代碼

效果以下:

根據註釋, sdk 中有以下幾種動畫

其中FadeUpwardsPageTransitionsBuilder對應安卓默認的, PageTransitionsBuilder天然是對應的 iOS

ZoomPageTransitionsBuilder:

OpenUpwardsPageTransitionsBuilder:

自定義

除了已有的, 咱們還能夠自定義動畫, 能夠配合 animation組件來完成酷炫的動畫效果, 具體的能夠查看官網動畫部分介紹

自定義 MyPageTransitionsBuilder

import 'package:flutter/material.dart';

PageTransitionsBuilder createTransition() {
  // return FadeUpwardsPageTransitionsBuilder();
  // return OpenUpwardsPageTransitionsBuilder();
  // return ZoomPageTransitionsBuilder();
  return MyPageTransitionsBuilder();
}

class MyPageTransitionsBuilder extends PageTransitionsBuilder {
  @override
  Widget buildTransitions<T>(
      PageRoute<T> route,
      BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      Widget child) {
    return ScaleTransition(
      scale: animation,
      child: RotationTransition(
        turns: animation,
        child: child,
      ),
    );
  }
}
複製代碼

效果以下

後記

倉庫地址

有問題請在本人博客下留言(github 登錄便可)