Android?Flutter實現(xiàn)頁面切換轉(zhuǎn)場動畫效果

更新時間：2022年06月01日 10:22:17 作者：島上碼農(nóng)

Hero組件非常適合從列表、概覽頁切換到詳情頁轉(zhuǎn)場動畫場合。本文將利用Hero組件制作一個簡單的頁面切換轉(zhuǎn)場動畫效果，感興趣的可以了解一下

前言

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

屏幕錄制2021-11-09 下午9.39.49.gif

Hero 動畫過程

Hero 本質(zhì)是是在不同的路由頁面做了一個中轉(zhuǎn)層，然后通過動畫完成過渡，下面用4張圖是官方演示的過程。

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

轉(zhuǎn)場前

t = 0.0，即動畫開始時，源頁面已經(jīng)從屏幕消失，遮罩層出現(xiàn)在屏幕上，此時目標(biāo)路由頁面已經(jīng)構(gòu)建好，并且在遮罩層下方不可見。但此時 Flutter 渲染引擎已經(jīng)計算出從遮罩層到目標(biāo)路由頁面的動畫路徑。

起始階段

動畫過程中，英雄飛起來，逐步飛到目標(biāo)頁面。使用的是Tween<Rect>方式更改外形和位置，默認(rèn)是使用 MaterialRectArcTween 對象完成動畫。

飛行過程

動畫結(jié)束：遮罩層消失，只剩下目標(biāo)路由頁面。而源頁面恢復(fù)到它對應(yīng)的路由狀態(tài)（以便返回時使用逆向的動畫）。

動畫結(jié)束

Hero 基礎(chǔ)示例

下面來看我們本篇動畫效果的實現(xiàn)。對于 Hero 最簡單的應(yīng)用，就是前后兩個路由頁面的 Hero 組件使用相同的 tag 標(biāo)識，然后所有動畫都交給 Hero 來完成了 —— 果然是超級英雄，啥都不用我們管！當(dāng)然，為了用戶體驗，前后兩個頁面的組件最好是具有相同的內(nèi)容（比如圖片），然后如果組件樹結(jié)構(gòu)是一致的話效果更好。

我們這個示例的第一個頁面就是兩張小尺寸的圖片，這里的關(guān)鍵是 Hero 組件的 tag 標(biāo)簽，兩張圖片使用了不同的 tag，這是因為同一個頁面的多個 Hero 不能共用 tag 。

Widget?build(BuildContext?context)?{
??return?Scaffold(
????appBar:?AppBar(
??????title:?Text('Hero?基礎(chǔ)動畫'),
??????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，圖片資源都是由源頁面?zhèn)鬟f進(jìn)來。

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?基礎(chǔ)動畫詳情'),
????????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,
????????????),
??????????),
????????),
??????),
????);
??}
}

這樣就完成了我們前面的轉(zhuǎn)場動畫效果，源碼已上傳至：動畫相關(guān)源碼。怎么樣？有了 Hero之后，是不是感覺英雄救場一樣，讓你的轉(zhuǎn)場輕松多了！