Flutter怎么使用AnimatedBuilder实现动效复用

魁首哥

作者

Flutter怎么使用AnimatedBuilder实现动效复用

这篇文章主要介绍“Flutter怎么使用AnimatedBuilder实现动效复用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Flutter怎么使用AnimatedBuilder实现动效复用”文章能帮助大家解决问题。

前言

我们之前讲述了动画构建的两种方式，Animation和AnimationWidget，这两种构建动画都是将组件和动画一起完成的。有些时候，我们只是想动效复用，而不关心组件构建，这个时候就可以使用AnimatedBuilder了。

AnimatedBuilder 介绍

根据官方文档说明，AnimatedBuilder的使用要点如下：

AnAnimatedBuilderunderstands how to render the transition. —— AnimatedBuilder 知道如何渲染转场动效。
AnAnimatedBuilderdoesn’t know how to render the widget, nor does it manage theAnimationobject. ——AnimatedBuilder不知道（或者准确说不应）如何渲染组件，也不管理组件对象。
UseAnimatedBuilderto 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 入门与实战（九十四）：让你的组件拥有三维动效
Examples of AnimatedBuilders in the Flutter API:BottomSheet,ExpansionTile,PopupMenu,ProgressIndicator,RefreshIndicator,Scaffold,SnackBar,TabBar,TextField. —— 在 Flutter 中，有很多组件使用 AnimatedBuilder 构建动效。

这段话的核心要点就是AnimatedBuilder应该只负责动画效果的管理，而不应该管理组件构建。如果混在一起使用，就失去设计者的初衷了。这就好比我们的状态管理和界面一样，一个负责业务逻辑，一个负责界面渲染，从而实现解耦和复用。这个AnimatedBuilder就是专门复制动效管理的，并且应当努力实现复用。AnimatedBuilder的定义如下：

constAnimatedBuilder({Key?key,requiredListenableanimation,requiredthis.builder,this.child,}):assert(animation!=null),assert(builder!=null),super(key:key,listenable:animation);

其中关键的参数是builder，builder用于构建组件的转变动作，在builder里可以对要渲染的子组件进行转变操作，然后返回变换后的组件。builder的定义如下，其中child实际就是AnimatedBuilder的child参数，可以根据需要是否使用。

WidgetFunction(BuildContextcontext,Widget?child)

Transform 组件介绍

在 Flutter 中，提供了一个专门用于对子组件进行转换操作的，定义如下：

constTransform({Key?key,requiredthis.transform,this.origin,this.alignment,this.transformHitTests=true,Widget?child,}):assert(transform!=null),super(key:key,child:child);

这里的参数说明如下：

transform是一个Matrix4对象，用于定义三维空间的变换操作。
origin是一个坐标偏移量，实际会加入到Matrix4的translation（平移）中。
alignment：即转变进行的参考方位。
child：被转换的子组件。

我们可以通过Transform，实现AnimatedBuilder的动效管理，也就是在AnimatedBuilder中，通过构建Transform对象实现动效。

应用

基本概念讲清楚了（敲黑板：很多时候大家都是直接简单看一下文档就开始用，甚至干脆复制示例代码就上，结果很可能会用得不对），可以开始撸代码了。我们来实现下面的动效。

这里其实是两个组件，通过AnimatedBuilder做了动效转换。在动效的一半时间是文字“点击按钮变出小姐姐”，之后的一半将组件更换为了小姐姐的图片了。使用AnimatedBuilder的实现代码如下：

classRotationSwitchAnimatedBuilderextendsStatelessWidget{finalWidgetchild1,child2;finalAnimation<double>animation;constRotationSwitchAnimatedBuilder({Key?key,requiredthis.animation,requiredthis.child1,requiredthis.child2}):super(key:key);@overrideWidgetbuild(BuildContextcontext){returnAnimatedBuilder(animation:animation,builder:(context,child){if(animation.value<0.5){returnTransform(transform:Matrix4.identity()..rotateZ(animation.value*pi)..setEntry(0,1,-0.003),alignment:Alignment.center,child:child1,);}else{returnTransform(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函数来在需要的时候再构建组件。使用这个RotationSwitchAnimatedBuilder的组件就十分简单了，将需要操作的两个组件作为参数传过来，然后控制Animation对象来刷新界面就好了，对应的代码如下：

classAnimatedBuilderDemoextendsStatefulWidget{constAnimatedBuilderDemo({Key?key}):super(key:key);@override_AnimatedBuilderDemoStatecreateState()=>_AnimatedBuilderDemoState();}class_AnimatedBuilderDemoStateextendsState<AnimatedBuilderDemo>withSingleTickerProviderStateMixin{lateAnimation<double>animation;lateAnimationControllercontroller;@overridevoidinitState(){super.initState();controller=AnimationController(duration:constDuration(seconds:1),vsync:this);animation=Tween<double>(begin:0,end:1.0).animate(controller);}@overrideWidgetbuild(BuildContextcontext){returnScaffold(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();}},),);}@overridevoiddispose(){controller.dispose();super.dispose();}}

复用的话也很容易了，比如我们将一个圆形和一个矩形组件传过去，一样可以复用这个动画效果。