Flutter(十八)——支付宝咻一咻动画实践

本文目录

咻一咻设计
代码实现咻一咻
- 三个动画的实现
构建圆
透明效果

咻一咻设计

对于支付宝咻一咻功能，是在2016年的时候上线到支付宝的，那个时候好像是专门为了集五福而设计的功能，现在肯定已经不在了，不过这也是一个动画功能，对于实践Flutter动画在合适不过了。（下图是我们最后实现的效果）

首先，我们来看看上图，具体有那些设计，比如它有三个圆圈匀速放大的动画，其次，中间有一个按钮，用户点击之后，就会出现如上动画的效果，ok，也就是这么多，弄清楚几个动画，我们就来实践一下。

代码实现咻一咻

三个动画的实现

对于代码的实现，我们肯定首先实现其3个动画，前面已经讲过了，要实现这种动画的效果，会用到AnimationController，Animation以及Tween，下面我们直接上代码：

 AnimationController controller;Animation<double> animation1,animation2,animation3;@overridevoid initState() {// TODO: implement initStatesuper.initState();controller=AnimationController(duration: widget.duration,vsync: this)..repeat();//初始化，动画控制器执行实践为2秒animation1=Tween(begin: 0.0,end: 1.0).animate(CurvedAnimation(parent: controller,curve: const Interval(0.0, 0.5,curve: Curves.linear)))..addListener(()=>setState(()=><String,void>{}));//线性动画animation2=Tween(begin: 0.0,end: 1.0).animate(CurvedAnimation(parent: controller,curve: const Interval(0.25, 0.75,curve: Curves.linear)))..addListener(()=>setState(()=><String,void>{}));//线性动画animation3=Tween(begin: 0.0,end: 1.0).animate(CurvedAnimation(parent: controller,curve: const Interval(0.5, 1.0,curve: Curves.linear)))..addListener(()=>setState(()=><String,void>{}));//线性动画}@overridevoid dispose() {// TODO: implement disposecontroller.dispose();//销毁释放super.dispose();}

每次操作动画，记得控制器一定要销毁，上面有三个动画，分别是（0.0，0.5），（0.25，0.75），（0.5，1.0）三段动画，都是Curves.linear匀速效果。

构建圆

既然我们写好的动画，动画肯定需要执行在组件之上，而我们放大的效果就是圆边框组件，所以我们需要实现一个圆边框组件，代码如下：

Widget _itemBuilder(index){return SizedBox.fromSize(//创建具有指定大小的框size: Size.square(widget.size),//宽高一致child: widget.itemBuidler!=null?widget.itemBuidler(context,index):DecoratedBox(decoration: BoxDecoration(shape: BoxShape.circle,//圆border: Border.all(color: widget.color,width: widget.borderWidth), //指定边框颜色和宽),),);

透明效果

咻一咻不仅仅只有放大的动画效果，在放大的过程之中，圆圈也会慢慢淡去，所以我们还需要实现Opacity组件，而且圆圈都是居中显示叠加的效果，所以我们需要使用到Stack组件，代码如下：

@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("咻一咻功能实现"),),body: Center(child: Stack(alignment: Alignment.center,children: <Widget>[CircleAvatar(backgroundImage: AssetImage("assets/timg.jpg"),radius: 30.0,),Opacity(opacity: 1.0-animation1.value,child: Transform.scale(scale: animation1.value,child: _itemBuilder(0),),),Opacity(opacity: 1.0-animation2.value,child: Transform.scale(scale: animation2.value,child: _itemBuilder(1),),),Opacity(opacity: 1.0-animation3.value,child: Transform.scale(scale: animation3.value,child: _itemBuilder(2),),),],),),);}

Transform.scale是放大的方法，opacity: 1.0-animation3.value,监测透明度的变化，从大到小慢慢消失，中间还有一个按钮组件CircleAvatar，如果想通过点击实现也可以套一层前面介绍的手势组件GestureDetector，监听onTap()属性就行。

到这里，我们就完成了支付宝咻一咻的所有代码，相信用Flutter实现起来还是非常简单的，当然，还有其他代码和一些参数，如下：

class MyHomePage extends StatefulWidget {MyHomePage({Key key,this.title,this.size=500.0,this.borderWidth=16.0,this.itemBuidler,this.duration=const Duration(milliseconds: 1800),this.color=Colors.orange,}) : assert(color!=null),assert(size!=null),assert(borderWidth!=null),super(key: key);final String title;final double size;final double borderWidth;final Color color;final Duration duration;final IndexedWidgetBuilder itemBuidler;@override_MyHomePageState createState() => _MyHomePageState();
}