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

iOS （UIButton封装）仿糯米首页缩放“按钮”效果
前言
1.关于“点动”按钮
2.实现“点动”按钮
3.动画缩放按钮

动态缩放按钮，“按下去”的效果

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];

View Code

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

- (void)pressedEvent:(id)sender

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

- (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   }

View Code


按钮按下真正要执行的响应，封装在了block中，button的封装详见我传到github中的代码，调用很方便，还是一句话：

1 JXTPushInButton * btn = [JXTPushInButton touchUpOutsideCancelButtonWithType:UIButtonTypeCustom frame:CGRectMake(0, 0, ScreenWidth - 20, 80) title:@"按钮-1" titleColor:[UIColor blackColor] backgroundColor:[UIColor redColor] backgroundImage:nil andBlock:^{
2     NSLog(@"frame内部松手执，行按钮-1");
3 }];
4 [self.view addSubview:btn];

View Code

iOS （UIButton封装）仿糯米首页缩放“按钮”效果 前言 1.关于“点动”按钮 2.实现“点动”按钮 3.动画缩放按钮

1.关于“点动”按钮

2.实现“点动”按钮

3.动画缩放按钮

相关推荐

iOS （UIButton封装）仿糯米首页缩放“按钮”效果前言 1.关于“点动”按钮 2.实现“点动”按钮 3.动画缩放按钮