寫在前面

在日常的開發過程中，獲取驗證碼是一個常見的功能。一般情況下，為了提高用戶體驗，產品都會在點擊獲取驗證碼之后，讓這個點擊控件做一個漸變動畫，設置一個時長，然后可以點擊重新獲取。這是一個非常簡單且經常用到的功能，可以考慮將這個小控件直接封裝出來，方便隨時使用。

實現效果

效果.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