支付宝咻一咻动画探究

  过年支付宝升级,新版本多了咻一咻功能,里面动画做得挺不错的,特意研究了里面的动画都是怎么实现的。首先是一进去看到的第一个动画,可以看到屏幕中间的按钮周围有个圈在放大缩小,这个动画不难实现,就是对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];

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

推荐阅读更多精彩内容

  • iOS动画篇之CoreAnimation动画 9月 22, 2016发布在Objective-C App如果想被大...
    白水灬煮一切阅读 488评论 0 0
  • IOS动画+转场动画 #import "ViewController.h" #import "secondView...
    iOS小开发阅读 558评论 0 1
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 4,287评论 4 21
  • CoreAnimation动画入门NOV 1ST, 2015 6:16 PM 一.动画的基础分类 上述我们可以看到...
    xcysuccess阅读 1,743评论 0 6
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 2,955评论 2 10