快捷導(dǎo)航

Flutter使用AnimatedSwitcher實(shí)現(xiàn)場(chǎng)景切換動(dòng)畫

更新時(shí)間：2022年03月23日 16:16:35 作者：島上碼農(nóng)

在應(yīng)用中，我們經(jīng)常會(huì)遇到切換組件的場(chǎng)景。本文將利用Flutter中提供的AnimatedSwitcher這一動(dòng)畫組件來實(shí)現(xiàn)頁(yè)面內(nèi)的場(chǎng)景切換，需要的可參考一下

前言

在應(yīng)用中，我們經(jīng)常會(huì)遇到切換組件的場(chǎng)景，比如點(diǎn)擊一個(gè)按鈕后，將當(dāng)前的圖片為另一張圖片；或者是翻轉(zhuǎn)卡片，顯示卡片詳情。在 Flutter 中提供了 AnimatedSwitcher 這個(gè)動(dòng)畫組件來實(shí)現(xiàn)頁(yè)面內(nèi)的場(chǎng)景切換。

AnimatedSwitcher.gif

AnimatedSwitcher 介紹

AnimatedSwitcher 通過動(dòng)效完成其子組件的切換，默認(rèn)的效果是 FadeTransition。當(dāng)其子組件發(fā)生改變的時(shí)候，就會(huì)按設(shè)定的轉(zhuǎn)變效果進(jìn)行轉(zhuǎn)換。AnimatedSwitcher的構(gòu)造方法如下：

const?AnimatedSwitcher({
??Key??key,
??this.child,
??required?this.duration,
??this.reverseDuration,
??this.switchInCurve?=?Curves.linear,
??this.switchOutCurve?=?Curves.linear,
??this.transitionBuilder?=?AnimatedSwitcher.defaultTransitionBuilder,
??this.layoutBuilder?=?AnimatedSwitcher.defaultLayoutBuilder,
})

與之前其他的動(dòng)畫組件不同，AnimatedSwitcher的參數(shù)除了 duration 之外，其他的有所不同，具體如下：

reverseDuration：反向時(shí)長(zhǎng)，也就是切換為舊組件的時(shí)長(zhǎng)，不設(shè)置的話就和 duration 一致。
switchInCurve：切入動(dòng)畫曲線，也就是新組件切換進(jìn)入的曲線；
switchOutCurve：切出動(dòng)畫曲線，也就是舊組件切換出去時(shí)的曲線；
transitionBuilder：切換轉(zhuǎn)變動(dòng)畫構(gòu)建，是一個(gè)函數(shù)，定義如下，可以用這個(gè)方法來構(gòu)建自己的切換動(dòng)效。

typedef?AnimatedSwitcherTransitionBuilder?=?Widget?Function(Widget?child,?Animation<double>?animation);

layoutBuilder：可以設(shè)置新組件在組件樹中的布局，也是一個(gè)函數(shù)：

typedef?AnimatedSwitcherLayoutBuilder?=?Widget?Function(Widget??currentChild,?List<Widget>?previousChildren);

默認(rèn)布局為 defaultLayoutBuilder，也就是將當(dāng)前組件放置在最頂層：

static?Widget?defaultLayoutBuilder(Widget??currentChild,?List<Widget>?previousChildren)?{
??return?Stack(
????children:?<Widget>[
??????...previousChildren,
??????if?(currentChild?!=?null)?currentChild,
????],
????alignment:?Alignment.center,
??);
}

關(guān)于AnimatedSwitcher有一個(gè)地方需要特別注意，那就是如果切換的兩個(gè)組件相同的話，AnimatedSwitcher會(huì)以為組件沒有改變，而不會(huì)進(jìn)行動(dòng)效切換。文檔說明如下：

The child is considered to be "new" if it has a different type or [Key]

實(shí)際上是根據(jù) Widget 的 canUpdate 判斷的：

static?int?_debugConcreteSubtype(Widget?widget)?{
??return?widget?is?StatefulWidget???1?:
?????????widget?is?StatelessWidget???2?:
?????????0;
}

因此，如果兩個(gè)組件類型相同，需要使用不同的 Key 來區(qū)分，通常是使用 ValueKey。

應(yīng)用

下面我們來實(shí)現(xiàn)開篇的動(dòng)效，這個(gè)使用的是 SizeTransition 尺寸變化轉(zhuǎn)變動(dòng)效完成兩張圖片的切換，這樣會(huì)讓組件的尺寸從小變到大，有一種掀開面紗的感覺。代碼如下：

class?AnimatedSwitcherDemo?extends?StatefulWidget?{
??AnimatedSwitcherDemo({Key??key})?:?super(key:?key);

??@override
??_AnimatedSwitcherDemoState?createState()?=>?_AnimatedSwitcherDemoState();
}

class?_AnimatedSwitcherDemoState?extends?State<AnimatedSwitcherDemo>?{
??Widget??_animatedWidget;
??bool?test?=?false;

??@override
??void?initState()?{
????super.initState();
????_animatedWidget?=?ClipOval(
??????child:?Image.asset('images/beauty.jpeg'),
??????key:?ValueKey(1),
????);
??}

??@override
??Widget?build(BuildContext?context)?{
????return?Scaffold(
??????appBar:?AppBar(
????????title:?Text('AnimatedSwticher'),
????????brightness:?Brightness.dark,
????????backgroundColor:?Colors.black,
??????),
??????backgroundColor:?Colors.black,
??????body:?Center(
????????child:?Container(
??????????padding:?EdgeInsets.all(10.0),
??????????child:?AnimatedSwitcher(
????????????child:?_animatedWidget,
????????????duration:?const?Duration(milliseconds:?1000),
????????????transitionBuilder:?(child,?animation)?{
??????????????return?SizeTransition(
????????????????sizeFactor:?animation,
????????????????child:?child,
??????????????);
????????????},
??????????),
????????),
??????),
??????floatingActionButton:?FloatingActionButton(
????????child:?Icon(Icons.play_arrow),
????????onPressed:?()?{
??????????setState(()?{
????????????test?=?!test;
????????????_animatedWidget?=?test
??????????????????ClipOval(
????????????????????child:?Image.asset('images/beauty2.jpeg'),
????????????????????key:?ValueKey(2),
??????????????????)
????????????????:?ClipOval(
????????????????????child:?Image.asset('images/beauty.jpeg'),
????????????????????key:?ValueKey(1),
??????????????????);
??????????});
????????},
??????),
????);
??}
}

總結(jié)

本篇介紹了 AnimatedSwitcher 動(dòng)畫組件的使用。AnimatedSwitcher可以用于界面中組件的切換過渡動(dòng)效，并且可以控制切入切出的時(shí)長(zhǎng)、動(dòng)畫取消、過渡效果和布局，從而可以實(shí)現(xiàn)一些有趣的切換效果。另外，需要注意的是，如果要切換的子組件類型相同，則需要使用 Key 進(jìn)行區(qū)分，否則動(dòng)效不會(huì)呈現(xiàn)出來。

到此這篇關(guān)于Flutter使用AnimatedSwitcher實(shí)現(xiàn)場(chǎng)景切換動(dòng)畫的文章就介紹到這了,更多相關(guān)Flutter場(chǎng)景切換動(dòng)畫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: