demo傳送門

查看圖片效果復(fù)制下邊gif鏈接

image

效果1gif
(//upload-images.jianshu.io/upload_images/12779815-316a4dfd69b1c3e4.gif?imageMogr2/auto-orient/strip|imageView2/2/w/698)
效果2gif
(//upload-images.jianshu.io/upload_images/12779815-f32a74d67e8502db.gif?imageMogr2/auto-orient/strip|imageView2/2/w/698)
效果3gif
(//upload-images.jianshu.io/upload_images/12779815-40baddec5a5e2f0c.gif?imageMogr2/auto-orient/strip|imageView2/2/w/698)

實(shí)現(xiàn)代碼

#import "LoginSliderView.h"

#pragma mark -- 屏幕
#define SCREEN_BOUNDS [UIScreen mainScreen].bounds
#define SCREEN_WIDTH ([UIScreen mainScreen].bounds.size.width)
#define SCREEN_HEIGHT ([UIScreen mainScreen].bounds.size.height)

//iPhone寬適配
#define WSXFrom8(x) ([[UIScreen mainScreen] bounds].size.width / 375.0 * x)

// 顏色定義
#define kColor(r,g,b) [UIColor colorWithRed:(r / 255.0) green:(g / 255.0) blue:(b / 255.0) alpha:1.0]
#define kColorA(r,g,b,a) [UIColor colorWithRed:(r / 255.0) green:(g / 255.0) blue:(b / 255.0) alpha:a]

@interface LoginSliderView ()

@property (nonatomic,assign)ViewType viewType;

@property (nonatomic,strong)UIView *backView;
@property (nonatomic,strong)UILabel *failLabel;

@property (nonatomic,assign)CGFloat backImageWhidth;
@property (nonatomic,assign)CGFloat leftWhidth;

@property (nonatomic,assign)CGFloat imageWhidth;
@property (nonatomic,assign)CGFloat leftImageWhidth;

@property (nonatomic,assign)CGPoint randomPoint;

@property(nonatomic,strong)NSTimer *myTimer;

@property (nonatomic,strong)UIImageView *backImageView;
@property (nonatomic,strong)UIImageView *leftImageView;
@property (nonatomic,strong)UIView *sliderBackView;
@property (nonatomic,strong)UIView *progressView;
@property (nonatomic,strong)UIImageView *thumbImgView;
@property (nonatomic,strong)UIView *hintView;

@property (nonatomic,strong)UILabel *titleLabel;
@property (nonatomic,copy)NSString *titleString;
@property (nonatomic,copy)NSString *chooseString;

@end

@implementation LoginSliderView

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:SCREEN_BOUNDS];
    if (self) {
    }
    return self;
}

#pragma mark - 初始化
-(void)show:(ViewType)viewType {

    [self initData];
    [self initView];

    _viewType = viewType;
    //    拼圖驗(yàn)證
    if (viewType == ViewTypePuzzle) {
        [self initPuzzleView];
    } else if (viewType == ViewTypeSlider) {
        [self initSliderView];
    } else if (viewType == ViewTypeRandomChar) {
        [self initCharView];

    }

}

#pragma mark - 數(shù)據(jù)初始化
-(void)initData {

    //    背景圖片寬
    _backImageWhidth = WSXFrom8(260);
    //    左邊距
    _leftWhidth = WSXFrom8(20);

    //    拼圖驗(yàn)證截圖大小
    _imageWhidth = WSXFrom8(50);
    //    拼圖驗(yàn)證截圖初始化左邊距
    _leftImageWhidth = WSXFrom8(10);

    //    記錄位置
    _randomPoint = CGPointZero;
}

#pragma mark - 通用背景
-(void)initView {

    /***************************背景模糊*********************************/
    UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
    UIVisualEffectView *visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
    visualEffectView.frame = self.bounds;
    visualEffectView.alpha = 0.7;
    [self addSubview:visualEffectView];

    _backView = [[UIView alloc] initWithFrame:CGRectMake(WSXFrom8(75 / 2), SCREEN_HEIGHT / 2 - WSXFrom8(150), WSXFrom8(300), WSXFrom8(300))];
    _backView.backgroundColor = [UIColor whiteColor];
    _backView.clipsToBounds = YES;
    [self addSubview:_backView];

    UIButton *cancelButton = [UIButton buttonWithType:UIButtonTypeSystem];
    cancelButton.frame = CGRectMake(WSXFrom8(150), SCREEN_HEIGHT / 2 + WSXFrom8(180), WSXFrom8(75), WSXFrom8(45));
    [cancelButton setTitle:@"取消" forState:UIControlStateNormal];
    [cancelButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    [cancelButton setBackgroundColor:[UIColor blueColor]];
    [cancelButton addTarget:self action:@selector(cancelButtonClick:) forControlEvents:UIControlEventTouchUpInside];
    [self addSubview:cancelButton];

    _failLabel = [[UILabel alloc] initWithFrame:CGRectMake(WSXFrom8(20), WSXFrom8(300), WSXFrom8(200), WSXFrom8(30))];
    _failLabel.textColor = [UIColor redColor];
    _failLabel.text = @"小伙子，不行啊!";
    [_backView addSubview:_failLabel];

    UIButton *changeButton = [UIButton buttonWithType:UIButtonTypeCustom];
    changeButton.frame = CGRectMake(WSXFrom8(250), WSXFrom8(250), WSXFrom8(32), WSXFrom8(32));
    [changeButton setImage:[UIImage imageNamed:@"refresh"] forState:UIControlStateNormal];
    [changeButton addTarget:self action:@selector(refreshButtonClick:) forControlEvents:UIControlEventTouchUpInside];
    [_backView addSubview:changeButton];

    if (_viewType == ViewTypeSlider) {
        changeButton.hidden = YES;
    }

    [[UIApplication sharedApplication].keyWindow addSubview:self];
}

#pragma mark -
#pragma mark === 拼圖驗(yàn)證 ===
#pragma mark -
-(void)initPuzzleView {

    //    背景圖片
    _backImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"backImage"]];
    _backImageView.frame = CGRectMake(WSXFrom8(20), WSXFrom8(20), _backImageWhidth, WSXFrom8(150));
    [_backView addSubview:_backImageView];

    [self initRandPuzzleView];

    //    滑塊背景
    _sliderBackView = [[UIView alloc] initWithFrame:CGRectMake(WSXFrom8(20), WSXFrom8(200), _backImageWhidth, WSXFrom8(20))];
    _sliderBackView.backgroundColor = kColor(222, 222, 222);
    _sliderBackView.layer.cornerRadius = WSXFrom8(10);
    [_backView addSubview:_sliderBackView];

    //    已經(jīng)滑動(dòng)部分
    _progressView = [[UIView alloc] initWithFrame:CGRectMake(WSXFrom8(20), WSXFrom8(200), WSXFrom8(30), WSXFrom8(20))];
    _progressView.backgroundColor = [UIColor blueColor];
    _progressView.layer.cornerRadius = WSXFrom8(10);
    [_backView addSubview:_progressView];

    //    滑塊
    _thumbImgView = [[UIImageView alloc] initWithFrame:CGRectMake(WSXFrom8(30), WSXFrom8(185), _imageWhidth, _imageWhidth)];
    _thumbImgView.image = [UIImage imageNamed:@"slide_buttonn"];
    _thumbImgView.userInteractionEnabled = YES;
    [_backView addSubview:_thumbImgView];
    //    添加手勢(shì)
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
    [_thumbImgView addGestureRecognizer:pan];

    //    滑塊上引導(dǎo)動(dòng)畫
    _hintView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, WSXFrom8(60), WSXFrom8(20))];
    [_sliderBackView addSubview:_hintView];

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.colors = @[(__bridge id)kColorA(222, 222, 222, 0).CGColor, (__bridge id)kColorA(255, 0, 0, 0.7).CGColor,(__bridge id)kColorA(222, 222, 222, 0).CGColor];
    gradientLayer.locations = @[@0, @0.5, @1];
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(1, 0);
    gradientLayer.frame = _hintView.bounds;
    [_hintView.layer insertSublayer:gradientLayer atIndex:0];

    [self cycingHintView:YES];
}

#pragma mark - 拼圖驗(yàn)證上面隨機(jī)位置生成
-(void)initRandPuzzleView {

    //    移除上面子視圖
    [_backImageView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
    [_backImageView.layer.sublayers makeObjectsPerformSelector:@selector(removeFromSuperlayer)];

    [self getRandomPoint];

    UIBezierPath *path = [self getCodePath];

    //    在背景圖片上生成一個(gè)目標(biāo)位置
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
    maskLayer.frame = CGRectMake(self.randomPoint.x, self.randomPoint.y, WSXFrom8(50), WSXFrom8(50));
    maskLayer.path = path.CGPath;
    maskLayer.strokeColor = [UIColor orangeColor].CGColor;
    maskLayer.fillColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.5].CGColor;
    [_backImageView.layer addSublayer:maskLayer];

    //    左邊可滑動(dòng)小圖
    UIImage *leftImage = [self imageFromImage:_backImageView.image inRect:CGRectMake(self.randomPoint.x, self.randomPoint.y, _imageWhidth, _imageWhidth)];

    UIImageView *leftImageView = [[UIImageView alloc] init];
    leftImageView.frame = CGRectMake(WSXFrom8(10), self.randomPoint.y, _imageWhidth, _imageWhidth);
    [_backImageView addSubview:leftImageView];
    leftImageView.layer.shadowColor = [UIColor blackColor].CGColor;
    // 設(shè)置陰影偏移量
    leftImageView.layer.shadowOffset = CGSizeMake(0,0);
    // 設(shè)置陰影透明度
    leftImageView.layer.shadowOpacity = 1;
    // 設(shè)置陰影半徑
    leftImageView.layer.shadowRadius = 5;
    leftImageView.clipsToBounds = NO;

    //    截取圖片
    CGSize size = CGSizeMake(_imageWhidth, _imageWhidth);
    //開(kāi)啟上下文
    UIGraphicsBeginImageContextWithOptions(size, NO, 0);
    //實(shí)現(xiàn)裁剪
    [path addClip];
    //把圖片繪制到上下文中
    [leftImage drawAtPoint:CGPointMake(0, 0)];
    //從上下文中取出圖片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    //關(guān)閉上下文
    UIGraphicsEndImageContext();
    leftImageView.image = newImage;
    _leftImageView = leftImageView;
}

#pragma mark - 生成隨機(jī)位置
-(void)getRandomPoint {
    //    圖片大小260*150
    //    中間截圖大小50*50
    //    從80到80+130之間選一個(gè)點(diǎn)當(dāng)起點(diǎn)
    CGFloat x = (arc4random() % 130) + 80;
    //    從0到100之間選一個(gè)點(diǎn)當(dāng)起點(diǎn)
    CGFloat y = (arc4random() % 100);

    self.randomPoint = CGPointMake(WSXFrom8(x), WSXFrom8(y));

}

#pragma mark - 生產(chǎn)一個(gè)花邊的Bezier曲線路徑
-(UIBezierPath *)getCodePath {

    CGFloat codeSize = WSXFrom8(40);
    CGFloat offset = WSXFrom8(10);

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(0, offset)];
    [path addLineToPoint:CGPointMake(codeSize * 0.5 - offset,offset)];
    //    曲線
    [path addQuadCurveToPoint:CGPointMake(codeSize * 0.5 + offset, offset) controlPoint:CGPointMake(codeSize * 0.5, -offset*2 + offset)];
    [path addLineToPoint:CGPointMake(codeSize, offset)];

    [path addLineToPoint:CGPointMake(codeSize,codeSize*0.5-offset + offset)];
    [path addQuadCurveToPoint:CGPointMake(codeSize, codeSize*0.5+offset + offset) controlPoint:CGPointMake(codeSize+offset*2, codeSize*0.5 + offset)];
    [path addLineToPoint:CGPointMake(codeSize, codeSize + offset)];

    [path addLineToPoint:CGPointMake(codeSize*0.5+offset,codeSize + offset)];
    [path addQuadCurveToPoint:CGPointMake(codeSize*0.5-offset, codeSize + offset) controlPoint:CGPointMake(codeSize*0.5, codeSize-offset*2 + offset)];
    [path addLineToPoint:CGPointMake(0, codeSize + offset)];

    [path addLineToPoint:CGPointMake(0,codeSize*0.5+offset + offset)];
    [path addQuadCurveToPoint:CGPointMake(0, codeSize*0.5-offset + offset) controlPoint:CGPointMake(0+offset*2, codeSize*0.5 + offset)];
    [path addLineToPoint:CGPointMake(0, offset)];

    [path stroke];
    return path;
}

#pragma mark - 根據(jù)圖片和路徑在圖片上扣一個(gè)小圖出來(lái)
- (UIImage *)imageFromImage:(UIImage *)image inRect:(CGRect)rect{

    //把像 素rect 轉(zhuǎn)化為 點(diǎn)rect（如無(wú)轉(zhuǎn)化則按原圖像素取部分圖片）
    CGFloat scale = [UIScreen mainScreen].scale;
    CGFloat x= rect.origin.x*scale,y=rect.origin.y*scale,w=rect.size.width*scale,h=rect.size.height*scale;
    CGRect dianRect = CGRectMake(x, y, w, h);

    //截取部分圖片并生成新圖片
    CGImageRef sourceImageRef = [image CGImage];
    CGImageRef newImageRef = CGImageCreateWithImageInRect(sourceImageRef, dianRect);
    UIImage *newImage = [UIImage imageWithCGImage:newImageRef scale:[UIScreen mainScreen].scale orientation:UIImageOrientationUp];
    return newImage;
}

#pragma mark - 手勢(shì)處理
- (void)pan:(UIPanGestureRecognizer *)pan {

    [self cycingHintView:NO];

    CGPoint point = [pan translationInView:_thumbImgView];
    //    手勢(shì)結(jié)束
    if (pan.state == UIGestureRecognizerStateEnded) {

        //        滑動(dòng)位置跟目標(biāo)位置重復(fù)度誤差在+—5之內(nèi)算通過(guò)
        if (point.x > (_randomPoint.x - WSXFrom8(15)) && point.x < (_randomPoint.x - WSXFrom8(5))) {
            [self.myTimer invalidate];
            self.myTimer = nil;
            [self removeFromSuperview];
        } else {
            //            滑動(dòng)位置誤差過(guò)大，提示錯(cuò)誤
            [self cycingHintView:YES];
            [self faileHandle];
            _progressView.frame = CGRectMake(WSXFrom8(20), WSXFrom8(200), WSXFrom8(30), WSXFrom8(20));
            _thumbImgView.frame = CGRectMake(WSXFrom8(30), WSXFrom8(185), _imageWhidth, _imageWhidth);
            _leftImageView.frame = CGRectMake(WSXFrom8(10), self.randomPoint.y, _imageWhidth, _imageWhidth);
        }

    } else {

        //        因?yàn)槠鹗嘉恢檬?0，所以小于10就滑出去了，將其設(shè)置為在0位置
        if (point.x < -WSXFrom8(10)) {

            _progressView.frame = CGRectMake(WSXFrom8(20), WSXFrom8(200), WSXFrom8(20), WSXFrom8(20));
            _thumbImgView.frame = CGRectMake(WSXFrom8(20), WSXFrom8(185), _imageWhidth, _imageWhidth);
            _leftImageView.frame = CGRectMake(0, self.randomPoint.y, _imageWhidth, _imageWhidth);

            //            大于200就超過(guò)右邊了滑出去了，將其設(shè)置為在210位置
        } else if ( point.x > WSXFrom8(200)) {

            _progressView.frame = CGRectMake(WSXFrom8(20), WSXFrom8(200), WSXFrom8(260), WSXFrom8(20));
            _thumbImgView.frame = CGRectMake(WSXFrom8(230), WSXFrom8(185), _imageWhidth, _imageWhidth);
            _leftImageView.frame = CGRectMake(WSXFrom8(210), self.randomPoint.y, _imageWhidth, _imageWhidth);

        } else {

            _progressView.frame = CGRectMake(WSXFrom8(20), WSXFrom8(200), WSXFrom8(30) + point.x, WSXFrom8(20));
            _thumbImgView.frame = CGRectMake(WSXFrom8(30) + point.x, WSXFrom8(185), _imageWhidth, _imageWhidth);

            _leftImageView.frame = CGRectMake(WSXFrom8(10) + point.x, self.randomPoint.y, _imageWhidth, _imageWhidth);

        }

    }
}

#pragma mark -
#pragma mark === 滑動(dòng)解鎖 ===
#pragma mark -
//算是拼圖驗(yàn)證簡(jiǎn)化版，為了方便理解，抽離出來(lái)，可以直接在拼圖驗(yàn)證界面上處理
-(void)initSliderView {

    //    背景圖片
    _backImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"backImage"]];
    _backImageView.frame = CGRectMake(WSXFrom8(20), WSXFrom8(20), _backImageWhidth, WSXFrom8(150));
    [_backView addSubview:_backImageView];

    _imageWhidth = WSXFrom8(40);

    //    滑塊背景
    _sliderBackView = [[UIView alloc] initWithFrame:CGRectMake(WSXFrom8(20), WSXFrom8(200), WSXFrom8(260), WSXFrom8(40))];
    _sliderBackView.backgroundColor = kColor(222, 222, 222);
    _sliderBackView.layer.cornerRadius = WSXFrom8(20);
    _sliderBackView.clipsToBounds = YES;
    [_backView addSubview:_sliderBackView];

    //    滑塊上動(dòng)畫
    _hintView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, WSXFrom8(50), WSXFrom8(40))];
    [_sliderBackView addSubview:_hintView];

    //   已經(jīng)滑動(dòng)部分
    _progressView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, WSXFrom8(30), WSXFrom8(40))];
    _progressView.backgroundColor = [UIColor blueColor];
    [_sliderBackView addSubview:_progressView];

    //    滑塊
    _thumbImgView = [[UIImageView alloc] initWithFrame:CGRectMake(WSXFrom8(30), WSXFrom8(200), _imageWhidth, _imageWhidth)];
    _thumbImgView.image = [UIImage imageNamed:@"slide_buttonn"];
    _thumbImgView.userInteractionEnabled = YES;
    [_backView addSubview:_thumbImgView];

    //    引導(dǎo)動(dòng)畫
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panSlider:)];
    [_thumbImgView addGestureRecognizer:pan];

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.colors = @[(__bridge id)kColorA(222, 222, 222, 0).CGColor, (__bridge id)kColorA(255, 0, 0, 0.7).CGColor,(__bridge id)kColorA(222, 222, 222, 0).CGColor];
    gradientLayer.locations = @[@0, @0.5, @1];
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(1, 0);
    gradientLayer.frame = _hintView.bounds;
    [_hintView.layer insertSublayer:gradientLayer atIndex:0];

    [self cycingHintView:YES];
}

#pragma mark - 滑動(dòng)解鎖手勢(shì)處理
- (void)panSlider:(UIPanGestureRecognizer *)pan {

    [self cycingHintView:NO];

    CGPoint point = [pan translationInView:_thumbImgView];

    if (pan.state == UIGestureRecognizerStateEnded) {
//
//        結(jié)束了回到原位置
        [self cycingHintView:YES];
        [self faileHandle];
        _progressView.frame = CGRectMake(0, 0, WSXFrom8(30), WSXFrom8(40));
        _thumbImgView.frame = CGRectMake(WSXFrom8(30), WSXFrom8(200), _imageWhidth, _imageWhidth);

    } else {

        //        因?yàn)槠鹗嘉恢檬?0，所以小于10就滑出去了，將其設(shè)置為在0位置
        if (point.x < -WSXFrom8(10)) {

            _progressView.frame = CGRectMake(0, 0, WSXFrom8(20), WSXFrom8(40));
            _thumbImgView.frame = CGRectMake(WSXFrom8(20), WSXFrom8(200), _imageWhidth, _imageWhidth);

        //            大于210，說(shuō)明滑到頭了，成功
        } else if ( point.x > WSXFrom8(210)) {

            [self.myTimer invalidate];
            self.myTimer = nil;
            [self removeFromSuperview];

        } else {

            _progressView.frame = CGRectMake(0, 0, WSXFrom8(30) + point.x, WSXFrom8(40));
            _thumbImgView.frame = CGRectMake(WSXFrom8(30) + point.x, WSXFrom8(200), _imageWhidth, _imageWhidth);

        }

    }

}

#pragma mark -
#pragma mark === 隨機(jī)字符驗(yàn)證 ===
#pragma mark -
-(void)initCharView {

    //    背景圖片
    _backImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"backImage"]];
    _backImageView.frame = CGRectMake(WSXFrom8(20), WSXFrom8(20), _backImageWhidth, WSXFrom8(150));
    _backImageView.userInteractionEnabled = YES;
    [_backView addSubview:_backImageView];

    //    提示文字
    _titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(WSXFrom8(20), WSXFrom8(180), WSXFrom8(260), WSXFrom8(30))];
    _titleLabel.textAlignment = NSTextAlignmentCenter;
    _titleLabel.font = [UIFont systemFontOfSize:15];
    [_backView addSubview:_titleLabel];

    [self initRandomCharView];

}

-(void)initRandomCharView {

    NSInteger index = 8;
    NSString *chooseText = @"";
    NSMutableArray *dataArray = [NSMutableArray array];
//    生產(chǎn)8個(gè)漢字
    while (index) {

        NSString *randStr = [self getRandomChinese];
        if (![dataArray containsObject:randStr]) {
            [dataArray addObject:randStr];
            if (index > 4) {
                chooseText = [chooseText stringByAppendingFormat:@"%@",randStr];
            }
            index --;
        }

    }

//    提示文字顯示
    NSMutableAttributedString *tipsString = [[NSMutableAttributedString alloc] initWithString:[NSString stringWithFormat:@"請(qǐng)按順序點(diǎn)擊 %@ 完成驗(yàn)證",chooseText]];
    [tipsString addAttributes:@{NSFontAttributeName: [UIFont systemFontOfSize:17],NSForegroundColorAttributeName : [UIColor redColor]} range:NSMakeRange(7, 4)];
    _titleLabel.attributedText = tipsString;

    _titleString = chooseText;
    _chooseString = @"";
    _randomPoint = CGPointZero;

    //    移除上面子視圖
    [_backImageView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];

//    生成隨機(jī)按鈕
    for (NSInteger i = 0; i < 8; i ++) {
        NSInteger index = arc4random() % dataArray.count;
        NSString *titString = dataArray[index];
        [dataArray removeObject:titString];

        _randomPoint = [self getRanPoint:i];

        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
        button.frame = CGRectMake(_randomPoint.x, _randomPoint.y, WSXFrom8(32), WSXFrom8(32));
        button.tag = i;
        [button setBackgroundColor:[UIColor whiteColor]];
        button.layer.cornerRadius = WSXFrom8(16);
        [button setTitle:titString forState:UIControlStateNormal];
        [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        [button setTitleColor:[UIColor whiteColor] forState:UIControlStateSelected];
        button.transform = CGAffineTransformMakeRotation(M_PI / 100.0 * (arc4random() % 200));
        [button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];
        [_backImageView addSubview:button];
    }
}

#pragma mark - 生成一個(gè)隨機(jī)漢字
-(NSString *)getRandomChinese {

    NSStringEncoding gbkEncoding = CFStringConvertEncodingToNSStringEncoding(kCFStringEncodingGB_18030_2000);

    NSInteger randomH = 0xA1+arc4random()%(0xFE - 0xA1+1);
    NSInteger randomL = 0xB0+arc4random()%(0xF7 - 0xB0+1);
    NSInteger number = (randomH<<8)+randomL;
    NSData *data = [NSData dataWithBytes:&number length:2];

    NSString *string = [[NSString alloc] initWithData:data encoding:gbkEncoding];

    return string;

}

#pragma mark - 生產(chǎn)一個(gè)隨機(jī)起始位置
-(CGPoint)getRanPoint:(NSInteger)index {

    CGFloat defaultW = (index % 4 + 1) * WSXFrom8(65);
    CGFloat defaultH = index > 3 ? WSXFrom8(75) : 0;

    CGPoint randomPoint = CGPointZero;

    CGFloat fromX = (index % 4) == 0 ? 0 : (_randomPoint.x + WSXFrom8(32));

    randomPoint.x = [self getRandomNumberFrom:fromX To:defaultW - WSXFrom8(32)];
    randomPoint.y = [self getRandomNumberFrom:defaultH To:defaultH + WSXFrom8(75) - WSXFrom8(32)];

    return randomPoint;
}

-(CGFloat)getRandomNumberFrom:(CGFloat)from To:(CGFloat)to {

    NSInteger scope = [[NSString stringWithFormat:@"%lf",floorf(to - from)] integerValue];

    NSInteger rand = arc4random();

    CGFloat number = (rand % scope) + from;

    return number;

}

#pragma mark - 選擇處理
-(void)buttonClick:(UIButton *)button {
    if (!button.selected) {
        button.selected = YES;
        [button setBackgroundColor:[UIColor orangeColor]];
        NSLog(@"%@",button.titleLabel.text);

        _chooseString = [_chooseString stringByAppendingFormat:@"%@",button.titleLabel.text];
        if (_chooseString.length >= 4) {
            if ([_chooseString isEqualToString:_titleString]) {

                [self removeFromSuperview];

            } else {
                [self faileHandle];
                [self initRandomCharView];
            }
        }

    }
}

#pragma mark -
#pragma mark === 通用 ===
#pragma mark -

#pragma mark - 引導(dǎo)手勢(shì)是否開(kāi)啟
-(void)cycingHintView:(BOOL)isSlide {

    if (isSlide) {
        if (!self.myTimer) {
            self.myTimer = [NSTimer scheduledTimerWithTimeInterval:0.5 target:self selector:@selector(upData) userInfo:nil repeats:YES];
        } else {
            [self.myTimer setFireDate:[NSDate distantPast]];
        }
    } else {
        [self.myTimer setFireDate:[NSDate distantFuture]];
    }
}

-(void)upData {

    [UIView animateWithDuration:0.5 animations:^{

        self.hintView.transform = CGAffineTransformMakeTranslation(WSXFrom8(200), 0);

    } completion:^(BOOL finished) {

        self.hintView.transform = CGAffineTransformIdentity;

    }];
}

#pragma mark - 退出
-(void)cancelButtonClick:(UIButton *)button {
    [self.myTimer invalidate];
    self.myTimer = nil;
    [self removeFromSuperview];
}

#pragma mark - 刷新
-(void)refreshButtonClick:(UIButton *)button {

    if (_viewType == ViewTypePuzzle) {
        [self initRandPuzzleView];
    } else if (_viewType == ViewTypeRandomChar) {
        [self initRandomCharView];

    }
}

#pragma mark - 失敗提示
-(void)faileHandle {

    _failLabel.frame = CGRectMake(WSXFrom8(20), WSXFrom8(250), WSXFrom8(200), WSXFrom8(30));

    [NSObject cancelPreviousPerformRequestsWithTarget:self selector:@selector(boom) object:nil];

    [self performSelector:@selector(boom) withObject:nil afterDelay:4];

}

-(void)boom {
    _failLabel.frame = CGRectMake(WSXFrom8(20), WSXFrom8(300), WSXFrom8(200), WSXFrom8(30));
}

@end

作者鏈接：http://www.itdecent.cn/p/ce6a39825c6f