OC图片滑动验证

没事逛cocoaChina的时候有人问图片验证码怎么做，我看了下，网上有很多第三方的框架，但好多都是收费的，所以考虑自己能否做一个，该封装有点简陋，不过可以根据自己需要自行修改

该代码用到的技术,UIBezierPath可以参考我的另外一篇博客、还UIProgressView的第二次封装、还有手势，这个我之前也有写过博客，和这个大同小异

效果图：

 需要用到的代码：

 CustomProgressView是对UIProgressView的封装，可以通过拖动滑块改变进度条value值,这个地方我用的是一个UILabel，有点难看，后期可以根据自己的需要改为图片，楼主的原则是'只要能用其他的控件代替，就不用图片'

CustomProgressView.h

#import <UIKit/UIKit.h>

@interface CustomProgressView : UIView
/**
 progress的value值 isEnd是否停止滑动
 */
@property(nonatomic,copy)void(^blockProgressValue)(float value,BOOL isEnd);
-(void)setProgress:(float)progress;
@end

 CustomProgressView.m

#import "CustomProgressView.h"

@interface CustomProgressView ()
@property(nonatomic,strong)UIProgressView *preView;
@property(nonatomic,strong)UILabel *trackLab;
@end

@implementation CustomProgressView

-(instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if(self){
        self.preView = [[UIProgressView alloc]initWithFrame:CGRectMake(0, frame.size.height/2.0, frame.size.width, 1)];
        self.preView.progressTintColor = [UIColor redColor];
        self.preView.trackTintColor = [UIColor grayColor];
        [self addSubview:self.preView];
        
        self.trackLab = [[UILabel alloc]initWithFrame:CGRectMake(0,frame.size.height/2.0-10, 20, 20)];
        self.trackLab.backgroundColor = [UIColor redColor];
        self.trackLab.userInteractionEnabled = YES;
        [self addSubview:self.trackLab];
    }
    return self;
}
-(void)setProgress:(float)progress{
    float x = self.bounds.size.width * progress;
    CGRect rect = self.trackLab.frame;
    rect.origin.x = x;
    self.trackLab.frame = rect;
    [self.preView setProgress:progress];
}
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
}
-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];
    if([touch.view isKindOfClass:[UILabel class]]){
        CGPoint point = [touch locationInView:[touch.view superview]];
        float x = point.x;
        CGRect rect = self.trackLab.frame;
        if(x < 0 ){
            rect.origin.x = 0;
            self.trackLab.frame = rect;
            
            return;
        }
        if(x > self.bounds.size.width-20){
            rect.origin.x = self.bounds.size.width-20;
            self.trackLab.frame = rect;
            return;
        }
        rect.origin.x = x;
        self.trackLab.frame = rect;
        [self.preView setProgress:x/self.bounds.size.width];
        if(self.blockProgressValue){
            self.blockProgressValue(x/self.bounds.size.width,NO);
        }
    }
}

-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [touches anyObject];
    if([touch.view isKindOfClass:[UILabel class]]){
        if(self.blockProgressValue){
            self.blockProgressValue(self.preView.progress,YES);
        }
    }
    
}


@end

ImageLockView.h

#import <UIKit/UIKit.h>

@interface ImageLockView : UIView
-(void)show;
-(void)hidden;
@end

 ImageLockView.m

#import "ImageLockView.h"
#import "CustomProgressView.h"
//屏幕的宽度
#define ScreenWidth  [UIScreen mainScreen].bounds.size.width
//屏幕的高度
#define ScreenHeight  [UIScreen mainScreen].bounds.size.height
//内容的宽度
#define ContentWidth 200
//内容的高度
#define ContentHeight 230
//间距
#define Margin 10
@interface ImageLockView (){
    CGRect frontRect;//
}
/**半透明背景蒙版*/
@property(nonatomic,strong)UIView *backView;
/**内容view，白的的圆角矩形*/
@property(nonatomic,strong)UIView *contentView;
/**底下一层的Img*/
@property(nonatomic,strong)UIImageView *backImg;
/**滑动Img*/
@property(nonatomic,strong)UIImageView *frontImg;
/***最下方可以滑动的ProgressView*/
@property(nonatomic,strong)CustomProgressView *progressView;
@end

@implementation ImageLockView

- (instancetype)initWithFrame:(CGRect)frame{
    frame = CGRectMake(0, 0, ScreenWidth, ScreenHeight);
    self = [super initWithFrame:frame];
    if(self){
       
        self.backView = [[UIView alloc]initWithFrame:self.bounds];
        self.backView.backgroundColor = [UIColor blackColor];
        
        [self addSubview:self.backView];
        
        
        self.contentView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, ContentWidth, ContentHeight)];
        self.contentView.backgroundColor = [UIColor whiteColor];
        self.contentView.layer.cornerRadius = 8.0f;
        self.contentView.center = self.center;
        [self addSubview:self.contentView];
        
        
        self.backImg = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"WechatIMG"]];
        self.frontImg = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"WechatIMG"]];
        
        self.backImg.frame = CGRectMake(Margin, Margin, ContentWidth-Margin*2, ContentWidth-Margin*2);
        self.frontImg.frame = CGRectMake(Margin, Margin, ContentWidth-Margin*2, ContentWidth-Margin*2);
        [self.contentView addSubview:self.backImg];
        [self.contentView addSubview:self.frontImg];
        
        self.progressView = [[CustomProgressView alloc]initWithFrame:CGRectMake(Margin, CGRectGetMaxY(self.backImg.frame)+Margin, ContentWidth-Margin*2, Margin*2)];
        [self.contentView addSubview:self.progressView];
        __block typeof(self)weakSelf = self;
        self.progressView.blockProgressValue = ^(float value,BOOL isEnd) {
            if(isEnd){
                //这个地方判断5只是为了给滑动的图片一个容错性，偏离5个像素也判断是对的
                CGRect frontRect = weakSelf.frontImg.frame;
                CGRect backRect = weakSelf.backImg.frame;
                if(frontRect.origin.x-backRect.origin.x < 5 && frontRect.origin.x-backRect.origin.x > -5){
                    //成功了移除
                    [weakSelf hidden];
                }else{
                    //失败了刷新继续拼图
                   
                    [weakSelf refreshView];
                }
               
            }else{
                float width = frame.size.width * value;
                CGRect rect = weakSelf.frontImg.frame;
                rect.origin.x = self->frontRect.origin.x+width;
                
                weakSelf.frontImg.frame = rect;
            }
           
        };

        
        [self refreshView];
        
    }
    return self;
}
/**
 刷新当前界面
 */
-(void)refreshView{
    //刷新的时候progressView的值为0，设置到原始值
     [self.progressView setProgress:0];
    //如果self.backImg上有上次停留的Layer，则删除
    for(CALayer *layer in [self.backImg.layer sublayers]){
        [layer removeFromSuperlayer];
    }
    
    int width = self.backImg.frame.size.width - 40;
    //x-50的原因以及height-40是不想让模块出现在边框之外
    int x = arc4random() % width ;
    if(x < 50){
        x = 50;
    }
    int height = self.backImg.frame.size.height - 40;
    int y = arc4random() % height;
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = [self getPath].CGPath;
    [shapeLayer setFillColor:[UIColor whiteColor].CGColor];
    shapeLayer.frame = CGRectMake(x, y, 36, 36);
    [self.backImg.layer addSublayer:shapeLayer];
    //-x+Margin是因为backImg前面有Margin个空白间距
    frontRect = CGRectMake(-x+Margin, self.backImg.frame.origin.y, self.backImg.frame.size.width, self.backImg.frame.size.height);
    self.frontImg.frame = frontRect;
    UIBezierPath *path = [self getPath];
    CGAffineTransform transform = CGAffineTransformMakeTranslation(x, y);
    [path applyTransform: transform];
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.path = path.CGPath;

    self.frontImg.layer.mask = maskLayer;
}

-(void)show{
    UIWindow *window = [[UIApplication sharedApplication]keyWindow];
    [window addSubview:self];
    __block typeof(self)weakSelf = self;
    [UIView animateWithDuration:.5f animations:^{
        weakSelf.backView.alpha = .3f;
    }];
}
-(void)hidden{
    __block typeof(self)weakSelf = self;
    [UIView animateWithDuration:.5f animations:^{
        CGRect rect = weakSelf.frame;
        rect.size.height = 0;
        weakSelf.frame = rect;
        weakSelf.alpha = 0;
    } completion:^(BOOL finished) {
        [weakSelf removeFromSuperview];
    }];
}


//画蒙版的形状
-(UIBezierPath *)getPath{
    UIBezierPath * path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(0.f, 4.0f)];
    [path addLineToPoint:CGPointMake(12.f, 4.0f)];
    [path addArcWithCenter:CGPointMake(16.f,4.0f) radius:4.0 startAngle:M_PI endAngle:2*M_PI clockwise:YES];
    [path addLineToPoint:CGPointMake(32.f, 4.0f)];
    [path addLineToPoint:CGPointMake(32.f, 12.f)];
    [path addArcWithCenter:CGPointMake(32.f,20.f) radius:4.0 startAngle:1.5*M_PI endAngle:2.5*M_PI clockwise:YES];
    [path addLineToPoint:CGPointMake(32.f, 36.f)];
    [path addLineToPoint:CGPointMake(24.f, 36.f)];
    [path addArcWithCenter:CGPointMake(16.f,36.f) radius:4.0 startAngle:2*M_PI endAngle:M_PI clockwise:NO];
    [path addLineToPoint:CGPointMake(0.f, 36.f)];
    [path addLineToPoint:CGPointMake(0.f, 28.f)];
    [path addArcWithCenter:CGPointMake(0.f,20.f) radius:4.0 startAngle:2.5*M_PI endAngle:1.5*M_PI clockwise:NO];
    [path closePath];
    return path;
}
@end

 使用