支付宝咻一咻动画探究

  过年支付宝升级，新版本多了咻一咻功能，里面动画做得挺不错的，特意研究了里面的动画都是怎么实现的。首先是一进去看到的第一个动画，可以看到屏幕中间的按钮周围有个圈在放大缩小，这个动画不难实现，就是对scale属性的改变，然后设置为一直重复，大概代码如下：

CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"transform.scale"];

ani.fromValue = @0.8;

ani.toValue = @1.1;

ani.repeatCount = HUGE_VALF;

[self.button.layer addAnimation:ani key:nil];

  其实就是几行的代码，要做到和支付宝的效果一样，还要设置一下layer自身的颜色和透明度。

  第二个动画就是点击按钮后，有个圈往外放大，放大完就消失了，没有重复，实现代码和第一个动画差不多，如下：

CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"transform.scale"];

ani.fromValue = @1.0;

ani.toValue = @5.0;

[self.button.layer addAnimation:ani key:nil];

  跟第一个动画相比，就是只有放大，不重复，支付宝应该是在按钮响应了设置了这个动画。第二个动画出现的时候第一个动画会暂时隐藏。