快捷導(dǎo)航

基于Flutter實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)效的示例代碼

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

動(dòng)畫(huà)經(jīng)常會(huì)用于場(chǎng)景切換，比如滑動(dòng)，縮放，尺寸變化。Flutter?提供了Transition系列的動(dòng)畫(huà)組件，可以讓場(chǎng)景轉(zhuǎn)換動(dòng)畫(huà)變得更加簡(jiǎn)單。本文整理了常用的Transition組件的應(yīng)用，需要的可以參考一下

前言

動(dòng)畫(huà)經(jīng)常會(huì)用于場(chǎng)景切換，比如滑動(dòng)，縮放，尺寸變化，為應(yīng)對(duì)這樣的場(chǎng)景轉(zhuǎn)換需要，F(xiàn)lutter 提供了 Transition 系列的動(dòng)畫(huà)組件，可以讓場(chǎng)景轉(zhuǎn)換動(dòng)畫(huà)變得更加簡(jiǎn)單。本篇為你整理了常用的 Transition 組件的應(yīng)用。

CupertinoFullscreenDialogTransition

名稱顯示是蘋(píng)果風(fēng)格的全屏對(duì)話轉(zhuǎn)換動(dòng)效，構(gòu)造方法如下：

CupertinoFullscreenDialogTransition({
??Key??key,
??required?Animation<double>?primaryRouteAnimation,
??required?Animation<double>?secondaryRouteAnimation,
??required?this.child,
??required?bool?linearTransition,
})?

從源碼可以看到實(shí)際上是基于 SlideTransition 實(shí)現(xiàn)的，其 build 方法定義如下，使用了兩個(gè) SlideTransition 實(shí)現(xiàn)了該動(dòng)效?？梢钥闯墒菍?shí)現(xiàn)了兩個(gè)方向的移動(dòng)，如果只移動(dòng)一個(gè)方向的話，將secondaryRouteAnimation的動(dòng)畫(huà)值begin 和 end 設(shè)置為相同即可。

Widget?build(BuildContext?context)?{
??assert(debugCheckHasDirectionality(context));
??final?TextDirection?textDirection?=?Directionality.of(context);
??return?SlideTransition(
????position:?_secondaryPositionAnimation,
????textDirection:?textDirection,
????transformHitTests:?false,
????child:?SlideTransition(
??????position:?_positionAnimation,
??????child:?child,
????),
??);
}

下面是我們實(shí)現(xiàn)的一個(gè)示例動(dòng)畫(huà)，Column 的子組件中，上下各使用了1個(gè)CupertinoFullscreenDialogTransition組件，使得有種下面彈出來(lái)后將上面的擠上去一樣。

屏幕錄制2021-11-04 下午9.29.10.gif

CupertinoPageTransition

CupertinoPageTransition和CupertinoFullscreenDialogTransition很相似，只是CupertinoPageTransition是橫向的。構(gòu)造方法的參數(shù)也一樣：

CupertinoPageTransition({
??Key??key,
??required?Animation<double>?primaryRouteAnimation,
??required?Animation<double>?secondaryRouteAnimation,
??required?this.child,
??required?bool?linearTransition,
})

我們用CupertinoPageTransition實(shí)現(xiàn)了一個(gè)類似側(cè)邊抽屜的動(dòng)效。

屏幕錄制2021-11-04 下午9.45.24.gif

DecoratedBoxTransition

這個(gè)顧名思義，就知道是更改子組件的外框的特性來(lái)實(shí)現(xiàn)動(dòng)效的，實(shí)際做起來(lái)還是挺有趣的，下面是官方的一個(gè)示例代碼：

class?_MyStatefulWidgetState?extends?State<MyStatefulWidget>
????with?TickerProviderStateMixin?{
??final?DecorationTween?decorationTween?=?DecorationTween(
????begin:?BoxDecoration(
??????color:?const?Color(0xFFFFFFFF),
??????border:?Border.all(style:?BorderStyle.none),
??????borderRadius:?BorderRadius.circular(60.0),
??????shape:?BoxShape.rectangle,
??????boxShadow:?const?<BoxShadow>[
????????BoxShadow(
??????????color:?Color(0x66666666),
??????????blurRadius:?10.0,
??????????spreadRadius:?3.0,
??????????offset:?Offset(0,?6.0),
????????)
??????],
????),
????end:?BoxDecoration(
??????color:?const?Color(0xFFFFFFFF),
??????border:?Border.all(
????????style:?BorderStyle.none,
??????),
??????borderRadius:?BorderRadius.zero,
??????//?No?shadow.
????),
??);

??late?final?AnimationController?_controller?=?AnimationController(
????vsync:?this,
????duration:?const?Duration(seconds:?3),
??)..repeat(reverse:?true);

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

??@override
??Widget?build(BuildContext?context)?{
????return?Container(
??????color:?Colors.white,
??????child:?Center(
????????child:?DecoratedBoxTransition(
??????????position:?DecorationPosition.background,
??????????decoration:?decorationTween.animate(_controller),
??????????child:?Container(
????????????width:?200,
????????????height:?200,
????????????padding:?const?EdgeInsets.all(10),
????????????child:?const?FlutterLogo(),
??????????),
????????),
??????),
????);
??}
}

實(shí)現(xiàn)的效果如下，有一種從扁平到實(shí)物過(guò)渡的感覺(jué)，而且動(dòng)效變化得很平滑。

屏幕錄制2021-11-04 下午9.50.02.gif

FadeTransition

FadeTransition 看名字就知道是一個(gè)漸現(xiàn)的動(dòng)畫(huà)效果了，示例很簡(jiǎn)單，通過(guò)一個(gè) Animation控制透明度就可以實(shí)現(xiàn)對(duì)應(yīng)的動(dòng)效了。

Widget?build(BuildContext?context)?{
??return?Container(
????color:?Colors.white,
????child:?FadeTransition(
??????opacity:?_animation,
??????child:?const?Padding(padding:?EdgeInsets.all(8),?child:?FlutterLogo()),
????),
??);
}

PositionedTransition

和AnimatedPositioned有點(diǎn)類似，用于更改組件在 Stack 的位置來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果。下面是官方的示例代碼。

@override
Widget?build(BuildContext?context)?{
??const?double?smallLogo?=?100;
??const?double?bigLogo?=?200;

??return?LayoutBuilder(
????builder:?(BuildContext?context,?BoxConstraints?constraints)?{
??????final?Size?biggest?=?constraints.biggest;
??????return?Stack(
????????children:?<Widget>[
??????????PositionedTransition(
????????????rect:?RelativeRectTween(
??????????????begin:?RelativeRect.fromSize(
??????????????????const?Rect.fromLTWH(0,?0,?smallLogo,?smallLogo),?biggest),
??????????????end:?RelativeRect.fromSize(
??????????????????Rect.fromLTWH(biggest.width?-?bigLogo,
??????????????????????biggest.height?-?bigLogo,?bigLogo,?bigLogo),
??????????????????biggest),
????????????).animate(CurvedAnimation(
??????????????parent:?_controller,
??????????????curve:?Curves.elasticInOut,
????????????)),
????????????child:?const?Padding(
????????????????padding:?EdgeInsets.all(8),?child:?FlutterLogo()),
??????????),
????????],
??????);
????},
??);
}

運(yùn)行效果如下，不僅可以更改位置還可以更改大小。

屏幕錄制2021-11-04 下午10.03.37.gif

RotationTransition

旋轉(zhuǎn)動(dòng)畫(huà)效果，然后讓組件圍繞 Z 軸旋轉(zhuǎn)。構(gòu)造方法如下，其中 turns 即旋轉(zhuǎn)控制動(dòng)畫(huà)對(duì)象，alignment 是確定開(kāi)始旋轉(zhuǎn)的相對(duì)位置。

RotationTransition({
??Key??key,?
??required?Animation<double>?turns,?
??Alignment?alignment,?
??FilterQuality??filterQuality,?
??Widget??child
})

ScaleTransition

縮放動(dòng)效，我們?cè)?a href="http://m.fzitv.net/article/244838.htm" rel="external nofollow" target="_blank">吹吧吹吧！來(lái)吹個(gè)大大的氣球！已經(jīng)介紹過(guò)了，這里不再重復(fù)介紹，大家看之前的文章即可。

SizeTransition

尺寸變化動(dòng)效，可以參考超人飛來(lái)！滿屏的力量感動(dòng)畫(huà)！這一篇文章。

SlideTransition

滑動(dòng)動(dòng)效，可以實(shí)現(xiàn)組件的滑入滑出效果，具體可以看來(lái)，滑動(dòng)切換到下一個(gè)小姐姐！這一篇。

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

您可能感興趣的文章: