iOS滑块拼图验证

滑动拼图.png

实现过程

  1. 初始化UI
[self addSubview:({//背景图片
        self.imageViewBG.frame = CGRectMake(margin, CGRectGetMaxY(self.tipLabel.frame)+margin, self.width-margin*2, imageHeight);
        self.imageViewBG.contentMode =  UIViewContentModeScaleAspectFill;
        self.imageViewBG.clipsToBounds = YES;
        self.imageViewBG;
    })];

//添加右侧遮罩层，并绘制路径
 UIBezierPath *path = getCodePath();
    
    [self.imageViewBG addSubview:({
        self.maskView.frame = CGRectMake(self.randomPoint.x, self.randomPoint.y, codeSize, codeSize);
        
        self.maskLayer.frame = CGRectMake(0, 0, codeSize, codeSize);
        self.maskLayer.path = path.CGPath;
        self.maskLayer.strokeColor = [UIColor whiteColor].CGColor;
        [self.maskView.layer addSublayer:self.maskLayer];
        
        self.maskView;
    })];

//添加左侧可滑动图片，并绘制路径
UIImage * thumbImage = [self.imageViewBG.image dw_SubImageWithRect:self.maskView.frame];
    thumbImage = [thumbImage dw_ClipImageWithPath:path mode:(DWContentModeScaleToFill)];
    [self.imageViewBG addSubview:({
        self.moveImage.frame = CGRectMake(0, self.randomPoint.y-offset, codeSize+offset, codeSize+offset);
        self.moveImage.image = thumbImage;
        self.moveImage;
    })];

[self addSubview:({//滑杆
        self.slider.frame = CGRectMake(margin, CGRectGetMaxY(self.imageViewBG.frame) + margin, self.width-margin*2, 30);
        [self.slider addTarget:self action:@selector(buttonAction:forEvent:) forControlEvents:UIControlEventAllTouchEvents];
        self.slider.minimumTrackTintColor = [UIColor colorWithRed:247/256.0 green:63/256.0 blue:94/256.0 alpha:1.0];
        self.slider.maximumTrackTintColor = [UIColor colorWithRed:251/256.0 green:88/256.0 blue:96/256.0 alpha:1.0];
        UIImage *tempImage = [UIImage imageNamed:@"SliderImage"];
        tempImage = [tempImage imageScaleToSize:CGSizeMake(30, 30)];
        [self.slider setThumbImage:tempImage forState:UIControlStateNormal];
        [self.slider setThumbImage:tempImage forState:UIControlStateHighlighted];
        self.slider;
    })];

绘制滑块贝塞尔曲线

static inline UIBezierPath* getCodePath() {
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(0, 0)];
    [path addLineToPoint:CGPointMake(codeSize*0.5-offset,0)];
    [path addQuadCurveToPoint:CGPointMake(codeSize*0.5+offset, 0) controlPoint:CGPointMake(codeSize*0.5, -offset*2)];
    [path addLineToPoint:CGPointMake(codeSize, 0)];
   
    [path addLineToPoint:CGPointMake(codeSize,codeSize*0.5-offset)];
    [path addQuadCurveToPoint:CGPointMake(codeSize, codeSize*0.5+offset) controlPoint:CGPointMake(codeSize+offset*2, codeSize*0.5)];
    [path addLineToPoint:CGPointMake(codeSize, codeSize)];
    
    [path addLineToPoint:CGPointMake(codeSize*0.5+offset,codeSize)];
    [path addQuadCurveToPoint:CGPointMake(codeSize*0.5-offset, codeSize) controlPoint:CGPointMake(codeSize*0.5, codeSize-offset*2)];
    [path addLineToPoint:CGPointMake(0, codeSize)];
    
    [path addLineToPoint:CGPointMake(0,codeSize*0.5+offset)];
    [path addQuadCurveToPoint:CGPointMake(0, codeSize*0.5-offset) controlPoint:CGPointMake(0+offset*2, codeSize*0.5)];
    [path addLineToPoint:CGPointMake(0, 0)];
    
    [path stroke];
    return path;
}

监听滑竿滑动并改变左侧可移动图片的frame

- (void)buttonAction:(UISlider*)slider forEvent:(UIEvent *)event{
    UITouchPhase phase = event.allTouches.anyObject.phase;
    if (phase == UITouchPhaseBegan) {
        dispatch_queue_t global = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
        self.seconds = 0;
        timer = dispatch_source_create(DISPATCH_SOURCE_TYPE_TIMER, 0, 0, global);
        dispatch_source_set_timer(timer, DISPATCH_TIME_NOW, 0.1 * NSEC_PER_SEC, 0 * NSEC_PER_SEC);
        dispatch_source_set_event_handler(timer, ^{
            self.seconds+=0.1;
            NSLog(@"%.1f",self.seconds);
        });
        dispatch_resume(timer);
    }
    else if(phase == UITouchPhaseEnded){
        if (timer) {
            dispatch_source_cancel(timer);
        }
        
        CGFloat x = self.maskView.frame.origin.x;
        if (fabs(self.moveImage.frame.origin.x-x)<=5.00) {
            [self.layer addAnimation:successAnimal() forKey:@"successAnimal"];
            [self showToast:YES];
        }else{
            [self.layer addAnimation:failAnimal() forKey:@"failAnimal"];
            [self defaultSlider];
            [self showToast:NO];
        }
    }else if (phase == UITouchPhaseMoved){
        if (slider.value>self.width-margin*2-codeSize) {
            slider.value = self.width-margin*2-codeSize;
            return;
        }
        [self changeMoveImageFrameWithVlue:slider.value];
        
    }
}

//设置默认的滑动
- (void)defaultSlider{
    self.slider.value = 0;
    [self changeMoveImageFrameWithVlue:self.slider.value];
}

//图片位置随着Slider滑动改变frame
- (void)changeMoveImageFrameWithVlue:(CGFloat)value{
    CGRect rect = self.moveImage.frame;
    CGFloat x = value * (self.imageViewBG.frame.size.width)-(value*codeSize);
    rect.origin.x = x;
    self.moveImage.frame = rect;
}

成功和失败的动画及提示

//成功动画
static inline CABasicAnimation *successAnimal(){
    CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    animation.duration = 0.2;
    animation.autoreverses = YES;
    animation.fromValue = @1;
    animation.toValue = @0;
    animation.removedOnCompletion = YES;
    return animation;
}

//失败动画
static inline CABasicAnimation *failAnimal(){
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    [animation setDuration:0.08];
    animation.fromValue = @(-M_1_PI/16);
    animation.toValue = @(M_1_PI/16);
    animation.repeatCount = 2;
    animation.autoreverses = YES;
    return animation;
}

//成功的操作
- (void)showToast:(BOOL)success {
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        __weak WMZCodeView *codeView = self;
        NSString *tip = @"";
        if (self.seconds>0) {
            tip = [NSString stringWithFormat:@"耗时%.1fs",self.seconds];
        }
        UIAlertController *alert = [UIAlertController alertControllerWithTitle:success ? @"验证成功" : @"验证失败" message:tip preferredStyle:UIAlertControllerStyleAlert];
        UIAlertAction *action = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
            if (codeView.block) {
                codeView.block(success);
            }
            [codeView refreshAction];
        }];
        [alert addAction:action];
        [[self getCurrentVC] presentViewController:alert animated:YES completion:nil];
    });
   
}

http://code.cocoachina.com/view/137862
https://www.jianshu.com/p/93d83018e5cd
https://github.com/AlbertXYZ/PuzzleVerify
https://github.com/wsl2ls/YanZhengCode
https://www.jianshu.com/p/a7021d87864b
https://github.com/zekunyan/TTGPuzzleVerify
https://github.com/kang558/eros-plugin-ios-TencentCaptcha
自定义滑杆样式

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 2017年收藏的IOS知识点总结
    不知不觉2017年的余额已经所剩无几了 下面是我这一年来收藏的关于IOS开发的一些知识点 . iOS功能 iOS ...
    临渊还在阅读 699评论 0赞 0
  • 假如有一天我离开了
    昨天参加雅集成长营的周检视，晓萍问了一个之前从没想过的问题：“假如有一天你不幸离开了，你会为你的孩子招...
    自然之美0608阅读 329评论 0赞 0
  • 候鸟
    听说他出家了 他二十年前做艺术评论 现在做了方丈 经常给人摸顶 他住在山上 孩子和孩子的妈 住在山下 我没问那是哪...
    灰鸟张学海阅读 514评论 1赞 0
  • 茶
    从前两年，机缘巧合下接触了茶叶，就爱上了。对于茶最初的印象是家里大人们总爱泡一口浓浓的绿茶，自己尝一口，重重的苦涩...
    星星醒了阅读 258评论 0赞 2
  • 成龙大哥客串过哪些电影？三部只有5秒钟镜头，还有一部没有正脸
    时值六一儿童节，许多人纷纷怀念自己曾经的岁月，成龙大哥也不例外，放出多张老照片，包含他的父母、妻子林凤娇以及七小福...
    电影聚焦阅读 567评论 0赞 2