写在前面

在日常的开发过程中，获取验证码是一个常见的功能。一般情况下，为了提高用户体验，产品都会在点击获取验证码之后，让这个点击控件做一个渐变动画，设置一个时长，然后可以点击重新获取。这是一个非常简单且经常用到的功能，可以考虑将这个小控件直接封装出来，方便随时使用。

实现效果

效果.gif

实现思路

自定义一个UIView，在这个View上添加一个显示进度的ProgressView，和一个显示文字的UILabel。通过NSTimer修改UILabel上的文字，渐变的动画就是简单的UIView动画，通过改变ProgressView的frame来实现。

实现代码

创建一个XKCaptchaView继承于UIView，在.h头文件中声明需要的属性和方法。

#import <UIKit/UIKit.h>

@class XKCaptchaView;

// 点击XKCaptchaView触发的回调Block
typedef void(^XKCaptchaActionBlock)(XKCaptchaView *view);

@interface XKCaptchaView : UIView

// 间隔时长（指定一个时长，在这个时长之后控件可以重新点击）
@property (nonatomic, assign) NSTimeInterval reEnableTimeInterval;

// 进度视图的背景颜色
@property (nonatomic, strong) UIColor *progressViewBgColor;

// 初始化方法
- (instancetype)initWithFrame:(CGRect)frame reEnableTimeInterval:(NSTimeInterval)interval actionBlock:(XKCaptchaActionBlock)actionBlock;

// 开始动画
- (void)startAnimation;

// 回到最初的状态
- (void)changToNormal;

@end

实现文件的代码如下：

#import "XKCaptchaView.h"

@implementation XKCaptchaView {
    
    UIView *_reEnableProgressView;
    
    UILabel *_titleLabel;
    
    XKCaptchaActionBlock _actionBlock;
    
    NSTimer *_timer;
    
    NSInteger _timerInteger;
}

- (void)dealloc {
    
    [_timer invalidate];
    
    _timer = nil;
    
    [self.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
}

- (instancetype)initWithFrame:(CGRect)frame reEnableTimeInterval:(NSTimeInterval)interval actionBlock:(XKCaptchaActionBlock)actionBlock {
    
    if (self = [super initWithFrame:frame]) {
        
        _reEnableTimeInterval = interval;
        
        _reEnableProgressView = [[UIView alloc] initWithFrame:self.bounds];
        
        self.backgroundColor = [UIColor lightGrayColor];
        
        _reEnableProgressView.backgroundColor = [UIColor orangeColor];
        
        if (actionBlock) {
            _actionBlock = actionBlock;
        }
        
        UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTap)];
        
        [self addGestureRecognizer:tap];
        
        [self addSubview:_reEnableProgressView];
        
        _titleLabel = [[UILabel alloc] initWithFrame:self.bounds];
        
        _titleLabel.text = @"获取验证码";
        
        _titleLabel.textAlignment = NSTextAlignmentCenter;
        
        _titleLabel.textColor = [UIColor whiteColor];
        
        _timerInteger = interval;
        
        [self addSubview:_titleLabel];
    }
    
    return self;
}

- (void)handleTap {
    
    if (_actionBlock) {
     
        _actionBlock(self);
    }
}

- (void)change {
    
    if (_timerInteger == 0) {
        
        [_timer invalidate];
        
        _titleLabel.text = @"获取验证码";
        
        _timerInteger = _reEnableTimeInterval;
        
        return;
    }
    
    _timerInteger--;
    
    _titleLabel.text = [NSString stringWithFormat:@"获取验证码(%ld)",(long)_timerInteger];
}

- (void)startAnimation {
    
    _timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(change) userInfo:nil repeats:YES];
    
    [_timer fire];
    
    self.userInteractionEnabled = NO;
    
    _reEnableProgressView.frame = CGRectMake(0, 0, 0, _reEnableProgressView.frame.size.height);
    
    [UIView animateWithDuration:_reEnableTimeInterval animations:^{
        
        _reEnableProgressView.frame = self.bounds;
        
    } completion:^(BOOL finished) {
        
        self.userInteractionEnabled = YES;
    }];
}

- (void)changToNormal {
    
    [_timer invalidate];
    
    _timerInteger = _reEnableTimeInterval;
    
    [_reEnableProgressView.layer removeAllAnimations];
    
    _titleLabel.text = @"获取验证码";
}

- (void)setProgressViewBgColor:(UIColor *)progressViewBgColor {
    
    _progressViewBgColor = progressViewBgColor;
    
    _reEnableProgressView.backgroundColor = progressViewBgColor;
}

@end

平时写代码有一个坏习惯，就是实现文件不喜欢写注释。这里简单解释一下上面的代码，在初始化方法中向XKCaptchaView添加了reEnableProgressView进度View，显示文字的titleLabel，并且初始化了一些默认的配置信息。向XKCaptchaView添加了单击手势，用来接收处理点击事件。最主要的方法就是- (void)startAnimation这个方法，在这个方法中，初始化了定时器，开始动画之后，XKCaptchaView便不再响应用户操作，直到动画完成，或者手动调用- (void)changToNormal方法。设置reEnableProgressView的frame，然后根据reEnableTimeInterval改变其宽度。定时器每秒执行一次- (void)change方法，在这个方法中改变titleLabel上的文字，当timerInteger为0时，停止定时器，还原titleLabel。- (void)changToNormal该方法是用来还原整个控件的状态的，需要手动调用。这个方法存在的意义是，点击控件发起网络请求去获取验证码，验证码获取成功了之后，reEnableProgressView就没有继续做动画的必要了。所以这里提供这样一个方法。- (void)changToNormal里面也都是简单的操作，首先停止定时器，重新将reEnableTimeInterval赋值给timerInteger，移除reEnableProgressView的动画，还原titleLabel。这里不用将XKCaptchaView的userInteractionEnabled设置为YES。因为在移除reEnableProgressView动画的时候，会执行UIView动画的completion回调。最终，我们就实现了这样一个简单的需求。

简单的使用

在控制器中简单使用自定义的XKCaptchaView测试一下看看是否满足需求。

#import "ViewController.h"
#import "XKCaptchaView.h"

@interface ViewController ()

@property (nonatomic, strong) XKCaptchaView *captchaView;

@end

@implementation ViewController

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    [self.view addSubview:self.captchaView];
}

- (XKCaptchaView *)captchaView {
    
    if (!_captchaView) {
        
        _captchaView = [[XKCaptchaView alloc] initWithFrame:CGRectMake(0, 0, 150, 30) reEnableTimeInterval:60 actionBlock:^(XKCaptchaView *view) {
            
            [view startAnimation];
            
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(10 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
                
                [[[UIAlertView alloc] initWithTitle:@"温馨提示" message:@"验证码获取成功" delegate:nil cancelButtonTitle:@"我知道了" otherButtonTitles:nil, nil] show];
                
                [self.captchaView changToNormal];
                
            });
            
        }];
        
        _captchaView.center = self.view.center;
    }
    return _captchaView;
}
@end

最终的效果如图

最终效果图.gif