Android Flutter實現頁面切換轉場動畫效果

2022-06-01 14:06:11

前言

寫了一篇基礎的效能優化的內容，繼續我們的動畫相關的介紹。今天的主角是英雄 —— Hero 元件。Hero 元件非常適合從列表、概覽頁切換到詳情頁轉場動畫場合。因為可以將兩個頁面的元件串起來動畫，體驗上會覺得整個操作的連貫性非常好。下面是我們這篇要做的一個效果。

螢幕錄製2021-11-09 下午9.39.49.gif

Hero 動畫過程

Hero 本質是是在不同的路由頁面做了一箇中轉層，然後通過動畫完成過渡，下面用4張圖是官方演示的過程。

動畫開始前，會準備一個空的遮罩層（Overlay）。此時目標路由頁面還沒生成。

轉場前

t = 0.0，即動畫開始時，源頁面已經從螢幕消失，遮罩層出現在螢幕上，此時目標路由頁面已經構建好，並且在遮罩層下方不可見。但此時 Flutter 渲染引擎已經計算出從遮罩層到目標路由頁面的動畫路徑。

起始階段

動畫過程中，英雄飛起來，逐步飛到目標頁面。使用的是Tween<Rect>方式更改外形和位置，預設是使用 MaterialRectArcTween 物件完成動畫。

飛行過程

動畫結束：遮罩層消失，只剩下目標路由頁面。而源頁面恢復到它對應的路由狀態（以便返回時使用逆向的動畫）。

動畫結束

Hero 基礎範例

下面來看我們本篇動畫效果的實現。對於 Hero 最簡單的應用，就是前後兩個路由頁面的 Hero 元件使用相同的 tag 標識，然後所有動畫都交給 Hero 來完成了 —— 果然是超級英雄，啥都不用我們管！當然，為了使用者體驗，前後兩個頁面的元件最好是具有相同的內容（比如圖片），然後如果元件樹結構是一致的話效果更好。

我們這個範例的第一個頁面就是兩張小尺寸的圖片，這裡的關鍵是 Hero 元件的 tag 標籤，兩張圖片使用了不同的 tag，這是因為同一個頁面的多個 Hero 不能共用 tag 。

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Hero 基礎動畫'),
      brightness: Brightness.dark,
    ),
    body: Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Hero(
            tag: 'beauty1',
            child: RoundImage(
              onTap: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => HeroDetail(
                      tag: 'beauty1',
                      assetImageName: 'images/beauty.jpeg',
                    ),
                  ),
                );
              },
              assetImageName: 'images/beauty.jpeg',
              imageSize: 80.0,
            ),
          ),
          // 省略圖片2
        ],
      ),
    ),
  );
}

詳情頁面只有一個居中的圖片，也是用的 Hero 元件。只是為了和源頁面一致，這裡的 tag，圖片資源都是由源頁面傳遞進來。

class HeroDetail extends StatelessWidget {
  final String tag;
  final String assetImageName;
  const HeroDetail({Key? key, required this.tag, required this.assetImageName})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hero 基礎動畫詳情'),
        brightness: Brightness.dark,
      ),
      body: Center(
        child: SizedBox(
          width: 200,
          height: 200,
          child: Hero(
            tag: this.tag,
            child: RoundImage(
              onTap: () {
                Navigator.of(context).pop();
              },
              assetImageName: this.assetImageName,
              imageSize: 200.0,
            ),
          ),
        ),
      ),
    );
  }
}

這樣就完成了我們前面的轉場動畫效果，原始碼已上傳至：動畫相關原始碼。怎麼樣？有了 Hero之後，是不是感覺英雄救場一樣，讓你的轉場輕鬆多了！

總結

本篇介紹了 Hero 動畫的基本過程和基礎範例。藉助 Hero，對於我們很多場景可以讓轉場效果更好，比如說從商品列表切換到商品詳情，從資訊列表到資訊詳情。都可以給使用者帶來更好的體驗。

以上就是Android Flutter實現頁面切換轉場動畫效果的詳細內容，更多關於Android Flutter頁面切換轉場動畫的資料請關注it145.com其它相關文章！

Android Flutter實現頁面切換轉場動畫效果

目錄

前言

Hero 動畫過程

Hero 基礎範例

總結

熱門文章