iOS开发 | 实现一个即时反应的无效按钮

我们在做按钮时，总会遇到按钮不能点击的需求，比如注册时的提交按钮，如果注册信息没有填写完整，就需要提示用户现在无法提交，这时对提交按钮有两种处理：

1. 置灰，即无效状态，比如使用以下方法

[button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateDisabled];
[button setBackgroundImage:[ViewController createImageWithColor:[UIColor grayColor]] forState:UIControlStateDisabled];
button.enabled = NO;

2. 使用传统的弹出式对话框，点击按钮的时候，根据条件，弹出alert提示用户。

第一种方法，button点击后无反应，界面显得死板；第二种弹出对话框，用户需要多一步操作——在对话框中点击确定——才能回到原界面继续编辑，容易打断用户。

这时我们可以使用一个按钮动效，效果如下：

这样，用户可以在点击时获得即时反馈，又不打断他的编辑过程。
具体实现中我们选用类别，这样可以在已有的UIButton中快速集成，而不需要替换原来的类，类别的使用请参看《iOS开发基础：如何使用类别（Category）》
震动的效果用CAAnimation（显式动画）实现：

- (void)shakingAnimation {
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    anim.delegate = self;
    anim.keyPath = @"transform.rotation";
    
    anim.values = @[@(Angle2Radian(-5)), @(Angle2Radian(5)), @(Angle2Radian(-5))];
    anim.duration = 0.2;

    anim.repeatCount = 3;
    // 动画执行完毕后恢复状态
    anim.removedOnCompletion = YES;
    anim.fillMode = kCAFillModeForwards;
    
    [self.layer addAnimation:anim forKey:@"shake"];
}

为了在动画结束后让调用者能进一步处理，要求调用者传入一个stoppedBlock，在动画结束的代理方法里调用：

- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag {
    self.userInteractionEnabled = YES;
    self.stoppedBlock();
}

由于类别不能自动合成属性，这里需要用个runtime的小技巧：

- (void)setStoppedBlock:(void(^)())stoppedBlock
{
    objc_setAssociatedObject(self, @"KeyStoppedBlock", stoppedBlock, OBJC_ASSOCIATION_COPY);
}

- (void(^)())stoppedBlock
{
    return objc_getAssociatedObject(self, @"KeyStoppedBlock");
}

使用时非常简单：

// 引入类别头文件
#import "UIButton+XSAShakingButton.h"
// ...
// 和普通按钮一样创建实例：
UIButton *button1 = [[UIButton alloc] initWithFrame:
                        CGRectMake((ScreenWidth - kWidth) / 2,
                                   (ScreenHeight - kHeight) / 2 + kHeight + 20,
                                   kWidth,
                                   kHeight)];
button1.backgroundColor = [UIColor blueColor];
[button1 setTitle:@"提交" forState:UIControlStateNormal];
[button1 addTarget:self action:@selector(pressedOkButton1:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:button1];


- (void)pressedOkButton1:(id)sender {
     UIButton *btn = (UIButton *)sender;
    // ... 省略判断按钮是否有效的逻辑
    // 显示动画
    [btn shakeWithStoppedBlock:^{
        // 动画结束后的处理
        NSLog(@"shaking end2");
    }];
}

实际实现上我们还要注意，加入了动画后，播放动画需要一个时延，这期间如果用户再次点击，会造成不必要的调用，所以需要在动画过程中，关闭用户事件的响应：

self.userInteractionEnabled = NO;

在动画结束后恢复响应：

- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag {
    self.userInteractionEnabled = YES;
    self.stoppedBlock();
}

完整的源码及demo在这里：
https://github.com/XiShiiOS/XiShiAnimation
使用时在Podfile中添加以下行：

pod "XiShiAnimation", :git => 'https://github.com/XiShiiOS/XiShiAnimation.git'

快来点亮我的小星星哦！