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

咻一咻设计

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

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

代码实现咻一咻

三个动画的实现

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

 AnimationController controller;
  Animation<double> animation1,animation2,animation3;
  @override
  void initState() {
    // TODO: implement initState
    super.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>{})
      );//线性动画
  }

  @override
  void dispose() {
    // TODO: implement dispose
    controller.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组件，代码如下：

@override
  Widget 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();
}