Flutter使用AnimatedSwitcher實現(xiàn)場景切換動畫

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

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

前言

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

AnimatedSwitcher.gif

AnimatedSwitcher 介紹

AnimatedSwitcher 通過動效完成其子組件的切換，默認的效果是 FadeTransition。當其子組件發(fā)生改變的時候，就會按設定的轉(zhuǎ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,
})

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

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

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

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

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

默認布局為 defaultLayoutBuilder，也就是將當前組件放置在最頂層：

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

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

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

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

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

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

應用

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

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 動畫組件的使用。AnimatedSwitcher可以用于界面中組件的切換過渡動效，并且可以控制切入切出的時長、動畫取消、過渡效果和布局，從而可以實現(xiàn)一些有趣的切換效果。另外，需要注意的是，如果要切換的子組件類型相同，則需要使用 Key 進行區(qū)分，否則動效不會呈現(xiàn)出來。

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

您可能感興趣的文章: