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

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

image.png

RectTween

RectTween 和 Tween類似，實際上就是矩陣在動畫過程中的變化。我們來看 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);
}

這個類很簡單，其實就是每次動畫時間點上調(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 都不為空的時候，返回的就是一個通過定點定義的新的矩形。這里的關(guān)鍵是_lerpDouble 方法，其實最終就是根據(jù)動畫時間完成頂點的移動。

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

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

自定義RectTween

我們來一個自定義 RectTween，然后保證起始點是矩形 a，結(jié)束點是矩形 b，然后中間沿曲線變動就可以了。下面是我們利用曲線將時間轉(zhuǎn)換后得到的一個自定義 RectTween。其中使用曲線轉(zhuǎn)換后的transformT取值還是從0-1.0，然后使用_rectMove 方法就能實現(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;
??}
}