Flutter使用AnimatedBuilder實現(xiàn)動效復用

第Flutter使用AnimatedBuilder實現(xiàn)動效復用目錄前言AnimatedBuilder介紹Transform組件介紹應用總結

前言

我們之前講述了動畫構建的兩種方式，Animation和AnimationWidget，這兩種構建動畫都是將組件和動畫一起完成的。有些時候，我們只是想動效復用，而不關心組件構建，這個時候就可以使用AnimatedBuilder了。

AnimatedBuilder介紹

根據(jù)官方文檔說明，AnimatedBuilder的使用要點如下：

AnAnimatedBuilderunderstandshowtorenderthetransition.AnimatedBuilder知道如何渲染轉場動效。AnAnimatedBuilderdoesntknowhowtorenderthewidget,nordoesitmanagetheAnimationobject.AnimatedBuilder不知道（或者準確說不應）如何渲染組件，也不管理組件對象。UseAnimatedBuildertodescribeananimationaspartofabuildmethodforanotherwidget.Ifyousimplywanttodefineawidgetwithareusableanimation,useanAnimatedWidget.使用AnimatedBuilder作為其他組件的動效描述。如果只是想復用一個帶有動效的組件，那么應該使用AnimatedWidget。這個可以看我們之前關于AnimatedWidget的介紹：Flutter入門與實戰(zhàn)（九十四）：讓你的組件擁有三維動效ExamplesofAnimatedBuildersintheFlutterAPI:BottomSheet,ExpansionTile,PopupMenu,ProgressIndicator,RefreshIndicator,Scaffold,SnackBar,TabBar,TextField.在Flutter中，有很多組件使用AnimatedBuilder構建動效。

這段話的核心要點就是AnimatedBuilder應該只負責動畫效果的管理，而不應該管理組件構建。如果混在一起使用，就失去設計者的初衷了。這就好比我們的狀態(tài)管理和界面一樣，一個負責業(yè)務邏輯，一個負責界面渲染，從而實現(xiàn)解耦和復用。這個AnimatedBuilder就是專門復制動效管理的，并且應當努力實現(xiàn)復用。AnimatedBuilder的定義如下：

const

AnimatedBuilder({

Key

key,

required

Listenable

animation,

required

this.builder,

this.child,

})

:

assert(animation

!=

null),

assert(builder

!=

null),

super(key:

key,

listenable:

animation);

其中關鍵的參數(shù)是builder，builder用于構建組件的轉變動作，在builder里可以對要渲染的子組件進行轉變操作，然后返回變換后的組件。builder的定義如下，其中child實際就是AnimatedBuilder的child參數(shù)，可以根據(jù)需要是否使用。

Widget

Function(BuildContext

context,

Widget

child)

Transform組件介紹

在Flutter中，提供了一個專門用于對子組件進行轉換操作的，定義如下：

const

Transform({

Key

key,

required

this.transform,

this.origin,

this.alignment,

this.transformHitTests

=

true,

Widget

child,

})

:

assert(transform

!=

null),

super(key:

key,

child:

child);

這里的參數(shù)說明如下：

transform是一個Matrix4對象，用于定義三維空間的變換操作。origin是一個坐標偏移量，實際會加入到Matrix4的translation（平移）中。alignment：即轉變進行的參考方位。child：被轉換的子組件。

我們可以通過Transform，實現(xiàn)AnimatedBuilder的動效管理，也就是在AnimatedBuilder中，通過構建Transform對象實現(xiàn)動效。

應用

基本概念講清楚了（敲黑板：很多時候大家都是直接簡單看一下文檔就開始用，甚至干脆復制示例代碼就上，結果很可能會用得不對），可以開始擼代碼了。我們來實現(xiàn)下面的動效。

這里其實是兩個組件，通過AnimatedBuilder做了動效轉換。在動效的一半時間是文字點擊按鈕變出小姐姐，之后的一半將組件更換為了小姐姐的圖片了。使用AnimatedBuilder的實現(xiàn)代碼如下：

class

RotationSwitchAnimatedBuilder

extends

StatelessWidget

{

final

Widget

child1,

child2;

final

Animationdouble

animation;

const

RotationSwitchAnimatedBuilder(

{Key

key,

required

this.animation,

required

this.child1,

required

this.child2})

:

super(key:

key);

@override

Widget

build(BuildContext

context)

{

return

AnimatedBuilder(

animation:

animation,

builder:

(context,

child)

{

if

(animation.value

0.5)

{

return

Transform(

transform:

Matrix4.identity()

..rotateZ(animation.value

*

pi)

..setEntry(0,

1,

-0.003),

alignment:

Alignment.center,

child:

child1,

);

}

else

{

return

Transform(

transform:

Matrix4.identity()

..rotateZ(pi)

..rotateZ(animation.value

*

pi)

..setEntry(1,

0,

0.003),

child:

child2,

alignment:

Alignment.center,

);

}

},

);

注意第2個組件多轉了180度，是未來保證停止后正好旋轉360度，以免圖片倒過來。另外就是這里的child1和child2也可以修改為使用WidgetBuilder函數(shù)來在需要的時候再構建組件。使用這個RotationSwitchAnimatedBuilder的組件就十分簡單了，將需要操作的兩個組件作為參數(shù)傳過來，然后控制Animation對象來刷新界面就好了，對應的代碼如下：

class

AnimatedBuilderDemo

extends

StatefulWidget

{

const

AnimatedBuilderDemo({Key

key})

:

super(key:

key);

@override

_AnimatedBuilderDemoState

createState()

=

_AnimatedBuilderDemoState();

class

_AnimatedBuilderDemoState

extends

StateAnimatedBuilderDemo

with

SingleTickerProviderStateMixin

{

late

Animationdouble

animation;

late

AnimationController

controller;

@override

void

initState()

{

super.initState();

controller

=

AnimationController(duration:

const

Duration(seconds:

1),

vsync:

this);

animation

=

Tweendouble(begin:

0,

end:

1.0).animate(controller);

@override

Widget

build(BuildContext

context)

{

return

Scaffold(

appBar:

AppBar(

title:

Text('AnimatedBuilder

動畫'),

),

body:

RotationSwitchAnimatedBuilder(

animation:

animation,

child1:

Center(

child:

Container(

padding:

EdgeInsets.all(10),

margin:

EdgeInsets.all(10),

constraints:

BoxConstraints(minWidth:

double.infinity),

decoration:

BoxDecoration(

borderRadius:

BorderRadius.circular(4.0),

gradient:

LinearGradient(

colors:

[

Colors.orange,

Colors.green,

],

),

),

child:

Text(

'點擊按鈕變出小姐姐',

style:

TextStyle(

fontSize:

20,

color:

Colors.white,

fontWeight:

FontWeight.bold,

),

textAlign:

TextAlign.center,

),

),

),

child2:

Center(

child:

Image.asset('images/beauty.jpeg'),

),

),

floatingActionButton:

FloatingActionButton(

child:

Icon(Icons.play_arrow,

color:

Colors.white),

onPressed:

()

{

if

(controller.status

==

AnimationSpleted)

{

controller.reverse();

}

else

{

controller.forward();

}

},

),

);

@override

void

dispose()

{

controller.dispose();

super.d