前言

过年期间,少不了各种聚会,当下聚会大多数情况下自然是团购,然后就是用各种APP。。。使用度娘糯米时(不是广告,不是广告,不是广告!),偶然注意到了它的首页中一个有意思的效果,就是那些“按钮”点击时的缩放动画,有一种“按下去”的赶脚,恰逢前阵子做过一个录音按钮的“点动”效果,忍不住便封装了这个按钮效果:GitHub

动态缩放按钮,“按下去”的效果
  1. demo中的按钮背景图片截取自度娘糯米首页,仅供学习参考!

糯米首页应该是collectionView布局吧?也许,这里只是纯粹实现效果,封装了系统的按钮。

关于这个效果,首先不得不提一个概念——点动。

1.关于“点动”按钮

点动这一概念,我是从硬件那边搬过来的。
曾经做单片机时,按键是一个很重要的外设,硬件按键在编写代码实现功能时,一般有两种效果:带锁按钮,不带锁按钮。
所谓带锁按钮,就是点击按钮之后立刻松手,就能实现对应功能,例如我们曾经用过的按键手机的数字键都是这样的。
所谓不带锁按钮,也就是这里要说的“点动”,顾名思义,就是点击就动,松手即停。单片机那边一般在电机控制什么的场景经常用到,在我们软件这边,较普遍的一个应用场景就是“录音按钮”(微信语音神马的)。
录音按钮在点击时进行录音,一旦松手,录音就会停止。
为了便于说明,写了以下效果进行演示,button的showsTouchWhenHighlighted属性打开以指示按钮正在被点击中。

点动按钮效果

2.实现“点动”按钮

实现按钮的“点动”其实很简单:

  1. //按下时
  2. [myButton addTarget:self
  3. action:@selector(pressedEvent:)
  4. forControlEvents:UIControlEventTouchDown];
  5. //松手后
  6. [myButton addTarget:self
  7. action:@selector(unpressedEvent:)
  8. forControlEvents:UIControlEventTouchUpInside | UIControlEventTouchUpOutside];

接下来在按钮的点击响应实现中:

  1. - (void)pressedEvent:(id)sender

实现的是按钮按下的响应,例如录音开始并持续。

  1. - (void)unpressedEvent:(id)sender

则实现的是松开按钮(停止点击)时的响应,此时执行结束录音。

两个响应结合起来,也就实现了硬件按钮的“点动”效果(硬件按键是根据高低电平判定的,所以代码实现十分简单,对单片机有兴趣的朋友可以查阅相关资料,不过硬件按键按下时的电平“抖动”则是十分令人头疼的问题)。

这里还要提一点,就是ControlEvents,这里写的是UIControlEventTouchUpInside | UIControlEventTouchUpOutside,意思就是在按钮区域范围内或者范围外(按下之后,手指移动拖移)松手(停止点击),都会执行“松手响应”,这在一些情况下要注意区分,例如接下来要实现的“缩放按钮”。如果我们只写UIControlEventTouchUpInside,那么,我们在按钮区域范围外松手,也就是点击之后,手指拖动,移到按钮frame外,unpressedEvent响应是不执行的,我们从而也就实现了一个“取消”效果,当然这个不是用在录音按钮中的。

3.动画缩放按钮

前面啰嗦了一大堆,现在切入正题,其实,正题也就没什么要说的了,实现糯米的这一效果,无非还是上面的“动作拆分”思想,我们只要将按钮按下的缩放动画,以及动画执行之后的真正的响应,分别写在两个响应函数中就可以了。

  1. //按钮的按下事件 按钮缩小
  2. - (void)pressedEvent:(JXTPushInButton *)btn
  3. {
  4. //缩放比例必须大于0,且小于等于1
  5. CGFloat scale = (_buttonScale && _buttonScale <=1.0) ? _buttonScale : defaultScale;//defaultScale默认为0.9
  6.  
  7. [UIView animateWithDuration:animateDelay animations:^{
  8. btn.transform = CGAffineTransformMakeScale(scale, scale);
  9. }];
  10. }
  11. //按钮的松开事件 按钮复原 执行响应
  12. - (void)unpressedEvent:(JXTPushInButton *)btn
  13. {
  14. [UIView animateWithDuration:animateDelay animations:^{
  15. btn.transform = CGAffineTransformMakeScale(1.0, 1.0);
  16. } completion:^(BOOL finished) {
  17. //执行动作响应
  18. if (self.clickBlock) {
  19. self.clickBlock();
  20. }
  21. }];
  22. }
  1. 按钮按下真正要执行的响应,封装在了block中,button的封装详见我传到github中的代码,调用很方便,还是一句话:
  1. JXTPushInButton * btn = [JXTPushInButton touchUpOutsideCancelButtonWithType:UIButtonTypeCustom frame:CGRectMake(, , ScreenWidth - , ) title:@"按钮-1" titleColor:[UIColor blackColor] backgroundColor:[UIColor redColor] backgroundImage:nil andBlock:^{
  2. NSLog(@"frame内部松手执,行按钮-1");
  3. }];
  4. [self.view addSubview:btn];

iOS (UIButton封装)仿糯米首页缩放“按钮”效果的更多相关文章

  1. 仿淘宝分页按钮效果简单美观易使用的JS分页控件

    分页按钮思想:  1.少于9页,全部显示  2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码  附件中有完整例子的压缩包下载.已更新到最新版本  先看效果图:  01输入框焦点效果  ...

  2. iOS 动画队列—仿映客刷礼物效果

    http://www.cocoachina.com/ios/20160719/17101.html 最近在研究直播的相关知识,在网上看到了不少优秀的开源项目,但都没有看到映客那个刷礼物的效果,于是手痒 ...

  3. iOS仿支付宝首页的刷新布局效果

    代码地址如下:http://www.demodashi.com/demo/12753.html XYAlipayRefreshDemo 运行效果 动画效果分析 1.UI需要变动,向上滑动的时候,顶部部 ...

  4. Android控件Gridview实现仿支付宝首页,Fragment底部按钮切换和登录圆形头像

    此案例主要讲的是Android控件Gridview(九宫格)完美实现仿支付宝首页,包含添加和删除功能:Fragment底部按钮切换的效果,包含四个模块,登录页面圆形头像等,一个小项目的初始布局. 效果 ...

  5. iOS仿支付宝首页效果

    代码地址如下:http://www.demodashi.com/demo/12776.html 首先看一下效果 状态栏红色是因为使用手机录屏的原因. 1.问题分析 1.导航栏A有两组控件,随着tabl ...

  6. iOS:UIButton按钮的详解

    UIButton的详细介绍: 一.按钮具有的属性: @property(nonatomic,readonly) UIButtonType buttonType;  //按钮形状类型 @property ...

  7. iOS UIButton文字和图片间距随意调整

    代码地址如下:http://www.demodashi.com/demo/11606.html 前记 在开发中,我们经常会遇到这么一种情况,就是一个按钮上面有图片也有文字,但是往往设计并不是我们想要的 ...

  8. IOS UIButton用法详解

    这段代码动态的创建了一个UIButton,并且把相关常用的属性都列举了.希望对大家有用.   //这里创建一个圆角矩形的按钮UIButton *button1 = [UIButton buttonWi ...

  9. iOS UIButton 图片文字上下垂直布局 解决方案

    实现如图所示效果: 这是一个UIButton,需要改变image和title相对位置. 解决如下: //设置文字偏移:向下偏移图片高度+向左偏移图片宽度 (偏移量是根据[图片]大小来的,这点是关键)b ...

随机推荐

  1. 让git忽略ignore所有文件,只对某些文件进行版本控制

    *.c !frob_*.c !custom.c 或者:*!*/ # 这个的意思是不忽略目录.否则目录被忽略了之后,它里面的所有文件都忽略了!*.c!*.cc!*.cpp!*.cxx 也就是先忽略所有文 ...

  2. Hadoop MapReduce概念学习系列之map并发任务数和reduce并发任务数的原理和代码实现(十八)

    首先,来说的是,reduce并发任务数,默认是1. 即,在jps后,出现一个yarnchild.之后又消失. 这里,我控制reduce并发任务数6 有多少个reduce的并发任务数可以控制,但有多少个 ...

  3. Spark生态系统BDAS

    目前,Spark已经发展成为包含众多子项目的大数据计算平台. 伯克利将Spark的整个生态系统称为伯克利数据分析栈(BDAS). 其核心框架是Spark,同时BDAS涵盖支持结构化数据SQL查询与分析 ...

  4. LightOJ 1236 Pairs Forming LCM (LCM 唯一分解定理 + 素数筛选)

    http://lightoj.com/volume_showproblem.php?problem=1236 Pairs Forming LCM Time Limit:2000MS     Memor ...

  5. C#中自定义消息,与MFc对比

    在C#中采用的是事件驱动方式,但在我们使用的过程中,有时候通过调用系统原有的消息,处理起来会比较简单一些,特别是在处理与DLL文件的交互时,的确是非常的方便.    在C#中使用自定义消息      ...

  6. hdoj 5371 Hotaru's problem

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5371 这道题用到了Manacher算法,首先简单介绍一下Manacher算法: ----------- ...

  7. 关于heritrix安装配置时出现”必须限制口令文件读取访问权限”的解决方法

    转载:http://www.floatinglife.cn/关于heritrix安装配置时出现必须限制口令文件读取访问 最近开始写一个RSS聚合程序,需要爬虫支持,于是就整来heritrix,没想到, ...

  8. javascript js 内存泄露工具使用

    javascript内存泄露工具使用 原文:http://lanhy2000.blog.163.com/blog/static/43678608201121472644851/ 2011-03-14 ...

  9. 更改VisualStudio默认创建类和接口不加public问题

    由于VisualStudio创建类和接口时,默认的是不加public关键字的,而我们大多数时候创建的类都是public的,于是,为了更好工作觉得改之. 首先找到在VisualStudio安装目录下路径 ...

  10. SQLServer获取随机数据

    1.比较常见和好用的一种 SELECT TOP 10 *, NEWID() AS randomFROM tableORDER BY random --newid函数会随机生成一个guid,很长的一个字 ...