前言

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

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

Hero 動(dòng)畫過(guò)程

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

動(dòng)畫開始前，會(huì)準(zhǔn)備一個(gè)空的遮罩層（Overlay）。此時(shí)目標(biāo)路由頁(yè)面還沒(méi)生成。

轉(zhuǎn)場(chǎng)前

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

起始階段

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

飛行過(guò)程

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

動(dòng)畫結(jié)束

Hero 基礎(chǔ)示例

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

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

Widget?build(BuildContext?context)?{
??return?Scaffold(
????appBar:?AppBar(
??????title:?Text('Hero?基礎(chǔ)動(dòng)畫'),
??????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
????????],
??????),
????),
??);
}

詳情頁(yè)面只有一個(gè)居中的圖片，也是用的 Hero 組件。只是為了和源頁(yè)面一致，這里的 tag，圖片資源都是由源頁(yè)面?zhèn)鬟f進(jìn)來(lái)。

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ǔ)動(dòng)畫詳情'),
????????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)場(chǎng)動(dòng)畫效果，源碼已上傳至：動(dòng)畫相關(guān)源碼。怎么樣？有了 Hero之后，是不是感覺(jué)英雄救場(chǎng)一樣，讓你的轉(zhuǎn)場(chǎng)輕松多了！

總結(jié)

本篇介紹了 Hero 動(dòng)畫的基本過(guò)程和基礎(chǔ)示例。借助 Hero，對(duì)于我們很多場(chǎng)景可以讓轉(zhuǎn)場(chǎng)效果更好，比如說(shuō)從商品列表切換到商品詳情，從資訊列表到資訊詳情。都可以給用戶帶來(lái)更好的體驗(yàn)。

以上就是Android Flutter實(shí)現(xiàn)頁(yè)面切換轉(zhuǎn)場(chǎng)動(dòng)畫效果的詳細(xì)內(nèi)容，更多關(guān)于Android Flutter頁(yè)面切換轉(zhuǎn)場(chǎng)動(dòng)畫的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論