前言

过年期间,少不了各种聚会,当下聚会大多数情况下自然是团购,然后就是用各种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封装)仿糯米首页缩放“按钮”效果的更多相关文章

  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. 成为IBM精英讲师-一分耕耘 一份收获 同时也多了一份责任!

    成为IBM精英讲师 一分耕耘 一份收获 同时也多了一份责任! http://www.webspherechina.net/?action-iste-type-lecturerlist 650) thi ...

  2. 查看MySql中每个IP的连接数

    要统计数据库的连接数,我们通常情况下是统计总数,没有细分到每个IP上.现在要监控每个IP的连接数,实现方式如下: ) as ip , count(*) from information_schema. ...

  3. HD2046骨牌铺方格

    骨牌铺方格 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submiss ...

  4. HDU 2147 kiki's game (简单博弈,找规律)

    kiki's game Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 40000/1000 K (Java/Others)Total ...

  5. Redis初步

    Redis目录下文件: redis-server.exe:服务程序 redis-check-dump.exe:本地数据库检查 redis-check-aof.exe:更新日志检查 redis-benc ...

  6. Struts2 高危漏洞补丁版本为: Struts 2.3.15.1

    Struts2 昨天爆出高危漏洞,黑客利用这个漏洞可以执行任意命令(包括恶意的jsp代码),轻松绕过您的验证系统,登陆您的网站后台,使您的网站后台密码形同虚设!! 目前Struts2官方已经发布了一个 ...

  7. [LeetCode] Consecutive Numbers 连续的数字 --数据库知识(mysql)

    1. 题目名称   Consecutive Numbers 2 .题目地址 https://leetcode.com/problems/consecutive-numbers/ 3. 题目内容 写一个 ...

  8. Routed Events【pluralsight】

    Routing Strategies: Direct Bubbling Tunneling WHy use them? Any UIElement can be a listener Common h ...

  9. Ubuntu12.10 下搭建基于KVM-QEMU的虚拟机环境(十六)

    今天我们继续实验Bridge方式的网络配置. Bridge的逻辑原理图如下: 上图中的“br0”就充当了一个桥的作用,主机上的物理网口eth0等根据需要加入到这个桥里面,所有虚拟机要跟外界通信都通过这 ...

  10. [Unity3D]Unity3D游戏开发之在3D场景中选择物体并显示轮廓效果

    大家好,我是秦元培,欢迎大家关注我的博客,我的博客地址是blog.csdn.net/qinyuanpei. 在<仙剑奇侠传>.<古剑奇谭>等游戏中,常常须要玩家在一个3D场景中 ...