欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于Flutter實現(xiàn)轉場動效的示例代碼

 更新時間：2022年05月05日 08:31:13   作者：島上碼農  
動畫經常會用于場景切換，比如滑動，縮放，尺寸變化。Flutter?提供了Transition系列的動畫組件，可以讓場景轉換動畫變得更加簡單。本文整理了常用的Transition組件的應用，需要的可以參考一下

前言

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

CupertinoFullscreenDialogTransition

名稱顯示是蘋果風格的全屏對話轉換動效，構造方法如下：

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

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

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

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

圖片

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

CupertinoPageTransition

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

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

我們用CupertinoPageTransition實現(xiàn)了一個類似側邊抽屜的動效。

圖片

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

DecoratedBoxTransition

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

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

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

圖片

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

FadeTransition

FadeTransition 看名字就知道是一個漸現(xiàn)的動畫效果了，示例很簡單，通過一個 Animation控制透明度就可以實現(xiàn)對應的動效了。

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

PositionedTransition

和AnimatedPositioned有點類似，用于更改組件在 Stack 的位置來實現(xiàn)動畫效果。下面是官方的示例代碼。

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

運行效果如下，不僅可以更改位置還可以更改大小。

圖片

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

RotationTransition

旋轉動畫效果，然后讓組件圍繞 Z 軸旋轉。構造方法如下，其中 turns 即旋轉控制動畫對象，alignment 是確定開始旋轉的相對位置。

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

ScaleTransition

縮放動效，我們在吹吧吹吧！來吹個大大的氣球！已經介紹過了，這里不再重復介紹，大家看之前的文章即可。

SizeTransition

尺寸變化動效，可以參考超人飛來！滿屏的力量感動畫！這一篇文章。

SlideTransition

滑動動效，可以實現(xiàn)組件的滑入滑出效果，具體可以看來，滑動切換到下一個小姐姐！這一篇。

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

相關文章

最新評論