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

更新時間：2022年04月02日 11:35:27 作者：島上碼農(nóng)

Animation和AnimationWidget都是將組件和動畫一起完成的。有些時候，我們只是想動效復(fù)用，而不關(guān)心組件構(gòu)建，這個時候就可以使用 AnimatedBuilder了。本文詳細(xì)講解了AnimatedBuilder的使用，需要的可以參考一下

前言

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

AnimatedBuilder 介紹

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

An AnimatedBuilder understands how to render the transition. —— AnimatedBuilder 知道如何渲染轉(zhuǎn)場動效。
An AnimatedBuilder doesn’t know how to render the widget, nor does it manage the Animation object. —— AnimatedBuilder 不知道（或者準(zhǔn)確說不應(yīng)）如何渲染組件，也不管理組件對象。
Use AnimatedBuilder to describe an animation as part of a build method for another widget. If you simply want to define a widget with a reusable animation, use an AnimatedWidget. —— 使用 AnimatedBuilder 作為其他組件的動效描述。如果只是想復(fù)用一個帶有動效的組件，那么應(yīng)該使用 AnimatedWidget。這個可以看我們之前關(guān)于 AnimatedWidget 的介紹：Flutter 入門與實戰(zhàn)（九十四）：讓你的組件擁有三維動效
Examples of AnimatedBuilders in the Flutter API: BottomSheet, ExpansionTile, PopupMenu, ProgressIndicator, RefreshIndicator, Scaffold, SnackBar, TabBar, TextField. —— 在 Flutter 中，有很多組件使用 AnimatedBuilder 構(gòu)建動效。

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

const?AnimatedBuilder({
????Key??key,
????required?Listenable?animation,
????required?this.builder,
????this.child,
??})?:?assert(animation?!=?null),
???????assert(builder?!=?null),
???????super(key:?key,?listenable:?animation);

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

Widget?Function(BuildContext?context,?Widget??child)

Transform 組件介紹

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

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 是一個坐標(biāo)偏移量，實際會加入到 Matrix4 的 translation（平移）中。
alignment：即轉(zhuǎn)變進(jìn)行的參考方位。
child：被轉(zhuǎn)換的子組件。

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

應(yīng)用

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

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

class?RotationSwitchAnimatedBuilder?extends?StatelessWidget?{
??final?Widget?child1,?child2;
??final?Animation<double>?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個組件多轉(zhuǎn)了180度，是未來保證停止后正好旋轉(zhuǎn)360度，以免圖片倒過來。另外就是這里的 child1和 child2也可以修改為使用 WidgetBuilder 函數(shù)來在需要的時候再構(gòu)建組件。使用這個RotationSwitchAnimatedBuilder的組件就十分簡單了，將需要操作的兩個組件作為參數(shù)傳過來，然后控制 Animation 對象來刷新界面就好了，對應(yīng)的代碼如下：

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

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

class?_AnimatedBuilderDemoState?extends?State<AnimatedBuilderDemo>
????with?SingleTickerProviderStateMixin?{
??late?Animation<double>?animation;
??late?AnimationController?controller;

??@override
??void?initState()?{
????super.initState();
????controller?=
????????AnimationController(duration:?const?Duration(seconds:?1),?vsync:?this);
????animation?=?Tween<double>(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?==?AnimationStatus.completed)?{
????????????controller.reverse();
??????????}?else?{
????????????controller.forward();
??????????}
????????},
??????),
????);
??}

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

復(fù)用的話也很容易了，比如我們將一個圓形和一個矩形組件傳過去，一樣可以復(fù)用這個動畫效果。

完整源碼

總結(jié)

本篇介紹了 AnimatedBuilder 的概念和應(yīng)用， Flutter 提供 AnimatedBuilder組件的核心理念是為了創(chuàng)建和管理可復(fù)用的動畫效果。在使用的時候，應(yīng)該將動畫效果和組件構(gòu)建分離，從而使得AnimatedBuilder構(gòu)建的動畫效果可以在需要的時候得到復(fù)用。

以上就是Flutter使用AnimatedBuilder實現(xiàn)動效復(fù)用的詳細(xì)內(nèi)容，更多關(guān)于Flutter動效復(fù)用的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: