Flutter利用SizeTransition實(shí)現(xiàn)組件飛入效果

更新時(shí)間：2022年04月13日 08:50:19 作者：島上碼農(nóng)

本文將為大家介紹SizeTransition，SizeTransition用于更改子組件的尺寸來(lái)實(shí)現(xiàn)動(dòng)畫，支持垂直方向或水平方向修改動(dòng)畫。本文將利用其實(shí)現(xiàn)組件飛入效果，需要的可以參考一下

前言

繼續(xù) Transition 系列動(dòng)畫組件的介紹，本篇來(lái)介紹 SizeTransition。SizeTransition 用于更改子組件的尺寸來(lái)實(shí)現(xiàn)動(dòng)畫。支持垂直方向或水平方向修改動(dòng)畫，同時(shí)尺寸更改的起始位置可以從頂部、中部、底部（垂直方向）或左側(cè)、中間、右側(cè)（水平方向）開始。通過(guò)這些特性，我們可以構(gòu)建組件飛入的效果。

SizeTransition 介紹

SizeTransition 的構(gòu)造方法定義如下。

const?SizeTransition({
??Key??key,
??this.axis?=?Axis.vertical,
??required?Animation<double>?sizeFactor,
??this.axisAlignment?=?0.0,
??this.child,
})?

參數(shù)對(duì)應(yīng)的說(shuō)明如下：

axis：枚舉，vertical 標(biāo)識(shí)縱向更改組件尺寸，即更改組件高度；horizontal 表示橫向更改組件尺寸，即更改組件寬度。

sizeFactor：即控制組件尺寸變化的 Animation 對(duì)象。實(shí)際上在動(dòng)畫過(guò)程中就是組件尺寸的寬度（horizontal）或高度（vertical）乘以**Animation**的值。

axisAlignment：即動(dòng)畫過(guò)程中，子組件的對(duì)齊位置，默認(rèn)為0.0，是從中間開始更改尺寸；當(dāng)axis為vertical時(shí)，-1.0代表頂部對(duì)齊開始動(dòng)畫（即尺寸從上到下開始變大）；當(dāng) axis 為horizontal 時(shí)，開始的方向和文本的反向有關(guān)（TextDirection.ltr 還是 TextDirection.rtl），當(dāng)文本為從左到右時(shí)（TextDirection.ltr，默認(rèn)），-1.0表示從左側(cè)開始動(dòng)畫（即尺寸從左到右開始變大）。

應(yīng)用

對(duì)于我們的飛入動(dòng)畫來(lái)說(shuō)，我們要實(shí)現(xiàn)從左向右飛入動(dòng)畫效果，因此需要設(shè)置 axis 為水平方向，然后 axisAligment 為右側(cè)。對(duì)于圖片，找一個(gè)橫向飛行的超人，然后加上動(dòng)畫后就可以實(shí)現(xiàn)超人飛入的效果了。完整源碼如下：

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

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

class?_SizeTransitionDemoState?extends?State<SizeTransitionDemo>
????with?SingleTickerProviderStateMixin?{
??late?AnimationController?_controller?=
??????AnimationController(duration:?const?Duration(seconds:?3),?vsync:?this)
????????..repeat();

??//使用自定義曲線動(dòng)畫過(guò)渡效果
??late?Animation<double>?_animation?=?CurvedAnimation(
??????parent:?_controller,?curve:?Curves.fastLinearToSlowEaseIn);

??@override
??Widget?build(BuildContext?context)?{
????return?Scaffold(
??????appBar:?AppBar(
????????title:?Text('SizeTransition'),
????????brightness:?Brightness.dark,
????????backgroundColor:?Colors.blue,
??????),
??????body:?SizeTransition(
????????child:?Center(
??????????child:?Image.asset(
????????????'images/superman.png',
????????????width:?300.0,
????????????height:?300.0,
??????????),
????????),
????????sizeFactor:?_animation,
????????axis:?Axis.horizontal,
????????axisAlignment:?1.0,
??????),
????);
??}

??@override
??void?dispose()?{
????_controller.stop();
????_controller.dispose();
????super.dispose();
??}
}

使用 SizeTransition 實(shí)現(xiàn)其他動(dòng)畫效果

我們可以設(shè)置動(dòng)畫從中間開始，這樣會(huì)有一種卷軸打開的效果，比如我們找一幅卷軸畫來(lái)看看效果。

這個(gè)動(dòng)畫的實(shí)現(xiàn)代碼如下：

Widget?build(BuildContext?context)?{
??return?Scaffold(
????appBar:?AppBar(
??????title:?Text('SizeTransition'),
??????brightness:?Brightness.dark,
??????backgroundColor:?Colors.blue,
????),
????body:?Container(
??????alignment:?Alignment.center,
??????child:?SizeTransition(
????????child:?Image.asset(
??????????'images/juanzhou.png',
????????),
????????sizeFactor:?_animation,
????????axis:?Axis.horizontal,
????????axisAlignment:?0.0,
??????),
????),
??);
}