Flutter利用Hero組件實(shí)現(xiàn)自定義路徑效果的動畫

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

本篇介紹了如何利用Hero動畫組件的createRectTween屬性實(shí)現(xiàn)自定義路徑效果的動畫。文中的示例代碼講解詳細(xì)，感興趣的可以了解一下

前言

我們在頁面切換轉(zhuǎn)場動畫，英雄救場更有趣！介紹了 Hero 動畫效果，使用 Hero 用于轉(zhuǎn)場能夠提供非常不錯的體驗(yàn)。既然稱之為英雄，肯定還有其他技能，本篇我們就來探索一下 Hero 動畫的返回效果。

Hero 的定義

Hero 組件是一個 StatefulWidget，構(gòu)造方法如下：

const?Hero({
??Key??key,
??required?this.tag,
??this.createRectTween,
??this.flightShuttleBuilder,
??this.placeholderBuilder,
??this.transitionOnUserGestures?=?false,
??required?this.child,
})

其中 createRectTween 就是一個矩形插值，用于控制 Hero 組件的路徑。實(shí)際上，和普通動畫一樣，也是有一個時間曲線，取值范圍是0-1.0，然后createRectTween保證 Hero 組件動畫前后能夠達(dá)到矩形指定位置和大小。下面一張圖是官網(wǎng)的說明圖：

image.png

RectTween

RectTween 和 Tween類似，實(shí)際上就是矩陣在動畫過程中的變化。我們來看 RectTween 的定義：

class?RectTween?extends?Tween<Rect?>?{
??RectTween({?Rect??begin,?Rect??end?})?:?super(begin:?begin,?end:?end);

??///?通過給定的動畫時間值構(gòu)建新的插值矩形
??@override
??Rect??lerp(double?t)?=>?Rect.lerp(begin,?end,?t);
}

這個類很簡單，其實(shí)就是每次動畫時間點(diǎn)上調(diào)用 Rect.lerp 構(gòu)建一個插值的矩形。Rect.lerp 方法如下：

static?Rect??lerp(Rect??a,?Rect??b,?double?t)?{
????assert(t?!=?null);
????if?(b?==?null)?{
??????if?(a?==?null)?{
????????return?null;
??????}?else?{
????????final?double?k?=?1.0?-?t;
????????return?Rect.fromLTRB(a.left?*?k,?a.top?*?k,?a.right?*?k,?a.bottom?*?k);
??????}
????}?else?{
??????if?(a?==?null)?{
????????return?Rect.fromLTRB(b.left?*?t,?b.top?*?t,?b.right?*?t,?b.bottom?*?t);
??????}?else?{
????????return?Rect.fromLTRB(
??????????_lerpDouble(a.left,?b.left,?t),
??????????_lerpDouble(a.top,?b.top,?t),
??????????_lerpDouble(a.right,?b.right,?t),
??????????_lerpDouble(a.bottom,?b.bottom,?t),
????????);
??????}
????}
??}

在矩形 a 和矩形 b 都不為空的時候，返回的就是一個通過定點(diǎn)定義的新的矩形。這里的關(guān)鍵是_lerpDouble 方法，其實(shí)最終就是根據(jù)動畫時間完成頂點(diǎn)的移動。

double??lerpDouble(num??a,?num??b,?double?t)?{
??///?...
??return?a?*?(1.0?-?t)?+?b?*?t;
}

也就是從矩形 a 的頂點(diǎn)逐步移動到矩形 b的頂點(diǎn)，從而完成了兩個矩形的動畫過渡。有了這個基礎(chǔ)我們就可以構(gòu)建自定義的 RectTween 了。和我們的之前說過的動畫曲線（動畫曲線天天用，你能自己整一個嗎？看完這篇你就會了！）是類似的。

自定義RectTween

我們來一個自定義 RectTween，然后保證起始點(diǎn)是矩形 a，結(jié)束點(diǎn)是矩形 b，然后中間沿曲線變動就可以了。下面是我們利用曲線將時間轉(zhuǎn)換后得到的一個自定義 RectTween。其中使用曲線轉(zhuǎn)換后的transformT取值還是從0-1.0，然后使用_rectMove 方法就能實(shí)現(xiàn)從開始的矩形過渡到結(jié)束的矩形了。

class?CustomRectTween?extends?RectTween?{
??final?Rect?begin;
??final?Rect?end;

??CustomRectTween({required?this.begin,?required?this.end})
??????:?super(begin:?begin,?end:?end);

??@override
??Rect?lerp(double?t)?{
????double?transformT?=?Curves.easeInOutBack.transform(t);

????var?rect?=?Rect.fromLTRB(
????????_rectMove(begin.left,?end.left,?transformT),
????????_rectMove(begin.top,?end.top,?transformT),
????????_rectMove(end.right,?end.right,?transformT),
????????_rectMove(begin.bottom,?end.bottom,?transformT));

????return?rect;
??}

??double?_rectMove(double?begin,?double?end,?double?t)?{
????return?begin?*?(1?-?t)?+?end?*?t;
??}
}