Flutter共享元素動畫，你會嗎？

目錄傳送門：《Flutter快速上手指南》先導篇

Hero 是 Flutter 提供的頁面轉場動畫的一種。

在進行頁面轉場時，它可以共享頁面間視圖元素。

經過 Hero，能夠很容易的實現圖中的動畫效果。

接下來看看如何實現的吧。

1.跳轉位置添加 Hero，包裹須要共享的 Widget

@override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () {
          showPhoto(context);
        },
        child: Hero(
            key: Key(photo.assetName),
            // tag 是關鍵
            tag: photo.tag,
            child: Image.asset(
              photo.assetName,
              package: photo.assetPackage,
              fit: BoxFit.cover,
            )));
  }
複製代碼

2.目標頁的共享元素也使用 Hero 包裹

Scaffold(
  appBar: AppBar(title: Text('Hero PageB')),
  body: SizedBox.expand(
    child: Hero(
      // tag 是關鍵
      tag: photo.tag,
      child: ClipRect(
        child: Image.asset(
          photo.assetName,
          package: photo.assetPackage,
          fit: BoxFit.cover,
        ),
      ),
    ),
  ),
);
複製代碼

實現方式很簡單，就是使用 Hero 包裹兩個頁面間的共享元素。

其中關鍵就是共享元素的 tag 必須相同。

剩餘的處理 Flutter 已經幫開發者完成了。

快本身動手試試吧。

目錄傳送門：《Flutter快速上手指南》先導篇

如何找到我？

傳送門：CoorChice 的主頁

傳送門：CoorChice 的 Github