Flutter利用SizeTransition實現組件飛入效果

更新時間：2022年04月13日 08:50:19 作者：島上碼農

本文將為大家介紹SizeTransition，SizeTransition用于更改子組件的尺寸來實現動畫，支持垂直方向或水平方向修改動畫。本文將利用其實現組件飛入效果，需要的可以參考一下

前言

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

SizeTransition 介紹

SizeTransition 的構造方法定義如下。

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

參數對應的說明如下：

axis：枚舉，vertical 標識縱向更改組件尺寸，即更改組件高度；horizontal 表示橫向更改組件尺寸，即更改組件寬度。

sizeFactor：即控制組件尺寸變化的 Animation 對象。實際上在動畫過程中就是組件尺寸的寬度（horizontal）或高度（vertical）乘以**Animation**的值。

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

應用

對于我們的飛入動畫來說，我們要實現從左向右飛入動畫效果，因此需要設置 axis 為水平方向，然后 axisAligment 為右側。對于圖片，找一個橫向飛行的超人，然后加上動畫后就可以實現超人飛入的效果了。完整源碼如下：

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();

??//使用自定義曲線動畫過渡效果
??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 實現其他動畫效果

我們可以設置動畫從中間開始，這樣會有一種卷軸打開的效果，比如我們找一幅卷軸畫來看看效果。

這個動畫的實現代碼如下：

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,
??????),
????),
??);
}