我们在做按钮时，总会遇到按钮不能点击的需求，比如注册时的提交按钮，如果注册信息没有填写完整，就需要提示用户现在无法提交，这时对提交按钮有两种处理：
- 置灰，即无效状态，比如使用以下方法
[button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateDisabled];
[button setBackgroundImage:[ViewController createImageWithColor:[UIColor grayColor]] forState:UIControlStateDisabled];
button.enabled = NO;
- 使用传统的弹出式对话框，点击按钮的时候，根据条件，弹出alert提示用户。
第一种方法，button点击后无反应，界面显得死板；第二种弹出对话框，用户需要多一步操作——在对话框中点击确定——才能回到原界面继续编辑，容易打断用户。
这时我们可以使用一个按钮动效，效果如下：
shakedemo.gif
这样，用户可以在点击时获得即时反馈，又不打断他的编辑过程。
具体实现中我们选用类别，这样可以在已有的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'
快来点亮我的小星星哦！
