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;finalanimationanimation;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_animatedbuilderdemostateextendsstatewithsingletickerproviderstatemixin{lateanimationanimation;lateanimationcontrollercontroller;@overridevoidinitstate(){super.initstate();controller=animationcontroller(duration:constduration(seconds:1),vsync:this);animation=tween(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();}}

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

关于“flutter怎么使用animatedbuilder实现动效复用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注恰卡编程网行业资讯频道，小编每天都会为大家更新不同的知识点。