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

- demo中的按钮背景图片截取自度娘糯米首页,仅供学习参考!
糯米首页应该是collectionView布局吧?也许,这里只是纯粹实现效果,封装了系统的按钮。
关于这个效果,首先不得不提一个概念——点动。
1.关于“点动”按钮
点动这一概念,我是从硬件那边搬过来的。
曾经做单片机时,按键是一个很重要的外设,硬件按键在编写代码实现功能时,一般有两种效果:带锁按钮,不带锁按钮。
所谓带锁按钮,就是点击按钮之后立刻松手,就能实现对应功能,例如我们曾经用过的按键手机的数字键都是这样的。
所谓不带锁按钮,也就是这里要说的“点动”,顾名思义,就是点击就动,松手即停。单片机那边一般在电机控制什么的场景经常用到,在我们软件这边,较普遍的一个应用场景就是“录音按钮”(微信语音神马的)。
录音按钮在点击时进行录音,一旦松手,录音就会停止。
为了便于说明,写了以下效果进行演示,button的showsTouchWhenHighlighted
属性打开以指示按钮正在被点击中。

2.实现“点动”按钮
实现按钮的“点动”其实很简单:
- //按下时
- [myButton addTarget:self
- action:@selector(pressedEvent:)
- forControlEvents:UIControlEventTouchDown];
- //松手后
- [myButton addTarget:self
- action:@selector(unpressedEvent:)
- forControlEvents:UIControlEventTouchUpInside | UIControlEventTouchUpOutside];
接下来在按钮的点击响应实现中:
- - (void)pressedEvent:(id)sender
实现的是按钮按下的响应,例如录音开始并持续。
- - (void)unpressedEvent:(id)sender
则实现的是松开按钮(停止点击)时的响应,此时执行结束录音。
两个响应结合起来,也就实现了硬件按钮的“点动”效果(硬件按键是根据高低电平判定的,所以代码实现十分简单,对单片机有兴趣的朋友可以查阅相关资料,不过硬件按键按下时的电平“抖动”则是十分令人头疼的问题)。
这里还要提一点,就是ControlEvents
,这里写的是UIControlEventTouchUpInside | UIControlEventTouchUpOutside
,意思就是在按钮区域范围内或者范围外(按下之后,手指移动拖移)松手(停止点击),都会执行“松手响应”,这在一些情况下要注意区分,例如接下来要实现的“缩放按钮”。如果我们只写UIControlEventTouchUpInside
,那么,我们在按钮区域范围外松手,也就是点击之后,手指拖动,移到按钮frame外,unpressedEvent
响应是不执行的,我们从而也就实现了一个“取消”效果,当然这个不是用在录音按钮中的。
3.动画缩放按钮
前面啰嗦了一大堆,现在切入正题,其实,正题也就没什么要说的了,实现糯米的这一效果,无非还是上面的“动作拆分”思想,我们只要将按钮按下的缩放动画,以及动画执行之后的真正的响应,分别写在两个响应函数中就可以了。
- //按钮的按下事件 按钮缩小
- - (void)pressedEvent:(JXTPushInButton *)btn
- {
- //缩放比例必须大于0,且小于等于1
- CGFloat scale = (_buttonScale && _buttonScale <=1.0) ? _buttonScale : defaultScale;//defaultScale默认为0.9
- [UIView animateWithDuration:animateDelay animations:^{
- btn.transform = CGAffineTransformMakeScale(scale, scale);
- }];
- }
- //按钮的松开事件 按钮复原 执行响应
- - (void)unpressedEvent:(JXTPushInButton *)btn
- {
- [UIView animateWithDuration:animateDelay animations:^{
- btn.transform = CGAffineTransformMakeScale(1.0, 1.0);
- } completion:^(BOOL finished) {
- //执行动作响应
- if (self.clickBlock) {
- self.clickBlock();
- }
- }];
- }
- 按钮按下真正要执行的响应,封装在了block中,button的封装详见我传到github中的代码,调用很方便,还是一句话:
- JXTPushInButton * btn = [JXTPushInButton touchUpOutsideCancelButtonWithType:UIButtonTypeCustom frame:CGRectMake(, , ScreenWidth - , ) title:@"按钮-1" titleColor:[UIColor blackColor] backgroundColor:[UIColor redColor] backgroundImage:nil andBlock:^{
- NSLog(@"frame内部松手执,行按钮-1");
- }];
- [self.view addSubview:btn];
iOS (UIButton封装)仿糯米首页缩放“按钮”效果的更多相关文章
- 仿淘宝分页按钮效果简单美观易使用的JS分页控件
分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 附件中有完整例子的压缩包下载.已更新到最新版本 先看效果图: 01输入框焦点效果 ...
- iOS 动画队列—仿映客刷礼物效果
http://www.cocoachina.com/ios/20160719/17101.html 最近在研究直播的相关知识,在网上看到了不少优秀的开源项目,但都没有看到映客那个刷礼物的效果,于是手痒 ...
- iOS仿支付宝首页的刷新布局效果
代码地址如下:http://www.demodashi.com/demo/12753.html XYAlipayRefreshDemo 运行效果 动画效果分析 1.UI需要变动,向上滑动的时候,顶部部 ...
- Android控件Gridview实现仿支付宝首页,Fragment底部按钮切换和登录圆形头像
此案例主要讲的是Android控件Gridview(九宫格)完美实现仿支付宝首页,包含添加和删除功能:Fragment底部按钮切换的效果,包含四个模块,登录页面圆形头像等,一个小项目的初始布局. 效果 ...
- iOS仿支付宝首页效果
代码地址如下:http://www.demodashi.com/demo/12776.html 首先看一下效果 状态栏红色是因为使用手机录屏的原因. 1.问题分析 1.导航栏A有两组控件,随着tabl ...
- iOS:UIButton按钮的详解
UIButton的详细介绍: 一.按钮具有的属性: @property(nonatomic,readonly) UIButtonType buttonType; //按钮形状类型 @property ...
- iOS UIButton文字和图片间距随意调整
代码地址如下:http://www.demodashi.com/demo/11606.html 前记 在开发中,我们经常会遇到这么一种情况,就是一个按钮上面有图片也有文字,但是往往设计并不是我们想要的 ...
- IOS UIButton用法详解
这段代码动态的创建了一个UIButton,并且把相关常用的属性都列举了.希望对大家有用. //这里创建一个圆角矩形的按钮UIButton *button1 = [UIButton buttonWi ...
- iOS UIButton 图片文字上下垂直布局 解决方案
实现如图所示效果: 这是一个UIButton,需要改变image和title相对位置. 解决如下: //设置文字偏移:向下偏移图片高度+向左偏移图片宽度 (偏移量是根据[图片]大小来的,这点是关键)b ...
随机推荐
- 让git忽略ignore所有文件,只对某些文件进行版本控制
*.c !frob_*.c !custom.c 或者:*!*/ # 这个的意思是不忽略目录.否则目录被忽略了之后,它里面的所有文件都忽略了!*.c!*.cc!*.cpp!*.cxx 也就是先忽略所有文 ...
- Hadoop MapReduce概念学习系列之map并发任务数和reduce并发任务数的原理和代码实现(十八)
首先,来说的是,reduce并发任务数,默认是1. 即,在jps后,出现一个yarnchild.之后又消失. 这里,我控制reduce并发任务数6 有多少个reduce的并发任务数可以控制,但有多少个 ...
- Spark生态系统BDAS
目前,Spark已经发展成为包含众多子项目的大数据计算平台. 伯克利将Spark的整个生态系统称为伯克利数据分析栈(BDAS). 其核心框架是Spark,同时BDAS涵盖支持结构化数据SQL查询与分析 ...
- LightOJ 1236 Pairs Forming LCM (LCM 唯一分解定理 + 素数筛选)
http://lightoj.com/volume_showproblem.php?problem=1236 Pairs Forming LCM Time Limit:2000MS Memor ...
- C#中自定义消息,与MFc对比
在C#中采用的是事件驱动方式,但在我们使用的过程中,有时候通过调用系统原有的消息,处理起来会比较简单一些,特别是在处理与DLL文件的交互时,的确是非常的方便. 在C#中使用自定义消息 ...
- hdoj 5371 Hotaru's problem
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5371 这道题用到了Manacher算法,首先简单介绍一下Manacher算法: ----------- ...
- 关于heritrix安装配置时出现”必须限制口令文件读取访问权限”的解决方法
转载:http://www.floatinglife.cn/关于heritrix安装配置时出现必须限制口令文件读取访问 最近开始写一个RSS聚合程序,需要爬虫支持,于是就整来heritrix,没想到, ...
- javascript js 内存泄露工具使用
javascript内存泄露工具使用 原文:http://lanhy2000.blog.163.com/blog/static/43678608201121472644851/ 2011-03-14 ...
- 更改VisualStudio默认创建类和接口不加public问题
由于VisualStudio创建类和接口时,默认的是不加public关键字的,而我们大多数时候创建的类都是public的,于是,为了更好工作觉得改之. 首先找到在VisualStudio安装目录下路径 ...
- SQLServer获取随机数据
1.比较常见和好用的一种 SELECT TOP 10 *, NEWID() AS randomFROM tableORDER BY random --newid函数会随机生成一个guid,很长的一个字 ...