Flutter使用AnimatedBuilder實現(xiàn)動效復用
前言
我們之前講述了動畫構建的兩種方式，Animation 和 AnimationWidget，這兩種構建動畫都是將組件和動畫一起完成的。有些時候，我們只是想動效復用，而不關心組件構建，這個時候就可以使用 AnimatedBuilder 了。
AnimatedBuilder 介紹
根據(jù)官方文檔說明，AnimatedBuilder 的使用要點如下：
- An
AnimatedBuilderunderstands how to render the transition. —— AnimatedBuilder 知道如何渲染轉(zhuǎn)場動效。 - An
AnimatedBuilderdoesn’t know how to render the widget, nor does it manage theAnimationobject. ——AnimatedBuilder不知道（或者準確說不應）如何渲染組件，也不管理組件對象。 - Use
AnimatedBuilderto 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 anAnimatedWidget. —— 使用AnimatedBuilder作為其他組件的動效描述。如果只是想復用一個帶有動效的組件，那么應該使用AnimatedWidget。這個可以看我們之前關于 AnimatedWidget 的介紹：Flutter 入門與實戰(zhàn)（九十四）：讓你的組件擁有三維動效 - Examples of AnimatedBuilders in the Flutter API:
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 用于構建組件的轉(zhuǎn)變動作，在 builder 里可以對要渲染的子組件進行轉(zhuǎn)變操作，然后返回變換后的組件。builder 的定義如下，其中 child 實際就是 AnimatedBuilder 的 child 參數(shù)，可以根據(jù)需要是否使用。
Widget?Function(BuildContext?context,?Widget??child)
Transform 組件介紹
在 Flutter 中，提供了一個專門用于對子組件進行轉(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是一個坐標偏移量，實際會加入到Matrix4的translation（平移）中。alignment：即轉(zhuǎn)變進行的參考方位。child：被轉(zhuǎn)換的子組件。
我們可以通過 Transform，實現(xiàn) AnimatedBuilder 的動效管理，也就是在 AnimatedBuilder 中，通過構建 Transform 對象實現(xiàn)動效。
應用
基本概念講清楚了（敲黑板：很多時候大家都是直接簡單看一下文檔就開始用，甚至干脆復制示例代碼就上，結果很可能會用得不對），可以開始擼代碼了。我們來實現(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ù)來在需要的時候再構建組件。使用這個RotationSwitchAnimatedBuilder的組件就十分簡單了，將需要操作的兩個組件作為參數(shù)傳過來，然后控制 Animation 對象來刷新界面就好了，對應的代碼如下：
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();
??}
}
復用的話也很容易了，比如我們將一個圓形和一個矩形組件傳過去，一樣可以復用這個動畫效果。
總結
本篇介紹了 AnimatedBuilder 的概念和應用， Flutter 提供 AnimatedBuilder組件的核心理念是為了創(chuàng)建和管理可復用的動畫效果。在使用的時候，應該將動畫效果和組件構建分離，從而使得AnimatedBuilder構建的動畫效果可以在需要的時候得到復用。
以上就是Flutter使用AnimatedBuilder實現(xiàn)動效復用的詳細內(nèi)容，更多關于Flutter動效復用的資料請關注腳本之家其它相關文章！
相關文章
Android手機注冊登錄時獲取驗證碼之后倒計時功能(知識點總結)
這篇文章主要介紹了Android手機注冊登錄時獲取驗證碼之后倒計時(知識點總結)功能，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-01-01
這篇文章主要為大家詳細介紹了Android實現(xiàn)引導頁的圓點指示器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要為大家詳細介紹了Android Intent的使用方法，Android如何獲取聯(lián)系人信息，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
本文主要介紹了Android onClick按鈕單擊事件的四種常用寫法，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
Android編程使用加速度傳感器實現(xiàn)搖一搖功能及優(yōu)化的方法詳解
這篇文章主要介紹了Android編程使用加速度傳感器實現(xiàn)搖一搖功能及優(yōu)化的方法,結合實例形式分析了Android傳感器的調(diào)用方法、參數(shù)含義及具體使用技巧,需要的朋友可以參考下2017-08-08
Android實現(xiàn)給TableLayou繪制邊框的方法
這篇文章主要介紹了Android實現(xiàn)給TableLayou繪制邊框的方法,涉及Android TableLayou布局控制相關技巧,需要的朋友可以參考下2016-03-03
本篇文章是對Android中MMS支持進行了詳細的分析介紹，需要的朋友參考下2013-05-05
這篇文章主要為大家詳細介紹了Android手勢識別功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要給大家介紹了關于Android啟動頁出現(xiàn)白屏、黑屏的解決方案，這一個需求是每位Android開發(fā)者都需要的，最近發(fā)現(xiàn)了一個不錯的解決方法，所以分享給大家，文中給出了詳細的介紹，需要的朋友可以參考下。2017-12-12
這篇文章主要介紹了Android SDK Manager無法更新問題解決辦法的相關資料,需要的朋友可以參考下2017-04-04