快捷導(dǎo)航

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

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

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

前言

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

Hero 的定義

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

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

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

image.png

RectTween

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

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

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

這個(gè)類很簡(jiǎn)單，其實(shí)就是每次動(dòng)畫時(shí)間點(diǎn)上調(diào)用 Rect.lerp 構(gòu)建一個(gè)插值的矩形。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 都不為空的時(shí)候，返回的就是一個(gè)通過(guò)定點(diǎn)定義的新的矩形。這里的關(guān)鍵是_lerpDouble 方法，其實(shí)最終就是根據(jù)動(dòng)畫時(shí)間完成頂點(diǎn)的移動(dòng)。

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

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

自定義RectTween

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