需求来源

最近看到keep跑步结束按钮，长按效果还是挺不错的，正好和我们的业务逻辑一致，就仿照keep的效果，实现了一个长按按钮。具体的思路和核心代码如下:

实现思路

查看keep的效果后，发现是在长按按钮之后，将控件放大一定的倍数，然后按照控件原来的大小，绘制一个圆，等到圆形绘制完成之后，长按结束，进行相应的业务逻辑的操作。总体的思路大概是这样，接下来就是具体的实现代码了。

实现代码

创建一个按钮，并添加长按手势

//结束按钮
@property (nonatomic, strong) UIButton *endBtn;
[self addSubview:self.endBtn];
[self.endBtn mas_makeConstraints:^(MASConstraintMaker *make) {
       
        make.centerX.equalTo(self).offset(0);
        make.width.height.equalTo(@(Width_Real(60)));
        make.top.equalTo(self).offset(topHeight);
    }];
- (UIButton *)endBtn
{
    if (!_endBtn) {
        _endBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        [_endBtn setImage:[UIImage imageNamed:@"icon_new_endBtn"] forState:(UIControlStateNormal)];
        _endBtn.hidden = NO;
        UILongPressGestureRecognizer *longPG=[[UILongPressGestureRecognizer alloc]initWithTarget:self action:@selector(longPG:)];
        longPG.minimumPressDuration = 0.1;
        [_endBtn addGestureRecognizer:longPG];
    }
    return _endBtn;
}

绘制圆的代码,这个代码相对比较简单，这里就不再赘述了,直接贴代码了

#define degreesToRadians(x) (M_PI*(x)/180.0) //把角度转换成PI的方式
@property (nonatomic, weak) CAShapeLayer *progressLayer;
@property (nonatomic,weak)  UIBezierPath *path;
@property (nonatomic,weak) CAShapeLayer *trackLayer;

- (void)drawRect:(CGRect)rect {
    
    CGFloat topHeight = 0.0;
    if ([SGMJCommonTool judgeIsSafeAres]) {
       
        topHeight = Width_Real(53) + Width_Real(40);
    }
    else
    {
        topHeight = Width_Real(35);
    }
    
    // 创建一个tracker(轨道layer)圆环内部
    CAShapeLayer *trackLayer = [CAShapeLayer layer];
    trackLayer.frame = rect;
    [self.layer addSublayer:trackLayer];
    trackLayer.fillColor =[[UIColor blackColor] colorWithAlphaComponent:0.5].CGColor;
    trackLayer.strokeColor = [UIColor whiteColor].CGColor;
    self.trackLayer=trackLayer;
    // 背景透明度
    trackLayer.opacity = 0.6f;
    trackLayer.lineCap = kCALineCapRound;
    trackLayer.lineWidth = Width_Real(3);
    // 创建轨道
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(rect.size.width / 2, topHeight + Width_Real(60)/2) radius:Width_Real(60)/2 - Width_Real(3) / 2 startAngle:degreesToRadians(-90) endAngle:degreesToRadians(270) clockwise:YES];
    //    trackLayer.path = [path CGPath];
    self.path=path;
    path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(rect.size.width / 2, topHeight + Width_Real(60)/2) radius:Width_Real(60)/2 - Width_Real(3) / 2 startAngle:degreesToRadians(Width_Real(3) / 2 - 90) endAngle:degreesToRadians(270 - Width_Real(3) / 2) clockwise:YES];
    CAShapeLayer *progressLayer = [CAShapeLayer layer];
    progressLayer.frame = rect;
    progressLayer.fillColor = [UIColor clearColor].CGColor;
    progressLayer.strokeColor = [UIColor redColor].CGColor;
    progressLayer.lineCap = kCALineCapRound;
    progressLayer.lineWidth = Width_Real(3);
    progressLayer.path = [path CGPath];
    progressLayer.strokeEnd = 0.00f;
    self.progressLayer = progressLayer;
    
    CALayer *gradientLayer = [CALayer layer];
    CAGradientLayer *gradientLayer1 = [CAGradientLayer layer];
    gradientLayer1.frame = CGRectMake(0, 0, rect.size.width , rect.size.height);
    [gradientLayer1 setColors:[NSArray arrayWithObjects:(id)[[UIColor whiteColor] CGColor],(id)[[UIColor whiteColor] CGColor],(id)[[UIColor whiteColor] CGColor], nil]];
    [gradientLayer1 setStartPoint:CGPointMake(0.5, 0)];
    [gradientLayer1 setEndPoint:CGPointMake(0.5, 1)];
    [gradientLayer addSublayer:gradientLayer1];
    
    
    // progressLayer来截取渐变层, fill是clear stroke有颜色
    [gradientLayer setMask:progressLayer];
    [self.layer addSublayer:gradientLayer];
}

处理手势回调，在开始长按时，将按钮的大小变为之前的1.2倍，并开启一个定时器,因为需求要求的是在2秒内进度达到百分之百，所以每隔0.02秒调用下绘制的方法，在长按按钮结束时，判断进度是否达到100，并将控件大小恢复原样，具体代码如下:

@property (nonatomic , strong)NSTimer *timer;

@property (nonatomic, assign) CGFloat currentProgress;

@property (nonatomic, assign) NSInteger index;

//长按按钮回调方法
-(void)longPG:(UILongPressGestureRecognizer *)pg{
    
    switch (pg.state) {
        case UIGestureRecognizerStateBegan:{
            
            [UIView animateWithDuration:0.1
                             animations:^{
                self.endBtn.transform = CGAffineTransformMakeScale(1.2, 1.2);
            }completion:^(BOOL finish){
                
            }];
            self.index = 1;
            self.currentProgress = 1;
            self.timer = [NSTimer timerWithTimeInterval:0.02 target:self selector:@selector(timerEvent) userInfo:nil
                                                repeats:YES];
            [[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
            
            break;
        }
            
        case UIGestureRecognizerStateEnded:{
            
            if (self.currentProgress >= 100) {
                
                //处理长按结束业务逻辑
            }
            
            //清除定时器
            if (self.timer) {
                
                [self.timer invalidate];
                self.timer = nil;
            }
            
            [UIView animateWithDuration:0.1
                             animations:^{
                self.endBtn.transform = CGAffineTransformMakeScale(1.0, 1.0);
            }completion:^(BOOL finish){

            }];
           
            [self setPercet:00 withTimer:0.1];
            
            break;
        }
            
           
        case UIGestureRecognizerStateChanged:
        {
            
        }
        default:
            break;
    }
}

- (void)timerEvent {
    self.index+=1;
    [self setPercet:self.index withTimer:0.02];
    if (self.index >=100) {
        [self.timer invalidate];
        self.timer = nil;
    }
}

- (void)setPercet:(CGFloat)percent withTimer:(CGFloat)time {
    [CATransaction begin];
    [CATransaction setDisableActions:NO];
    [CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
    [CATransaction setAnimationDuration:time];
    _progressLayer.strokeStart=0.00f;
    _progressLayer.strokeEnd = percent / 100.0f;
    _currentProgress = percent;
    [CATransaction commit];
}

结尾

到这里，长按按钮的逻辑已经实现了，当然在操作的时候，也可以去添加一些交互，比如在短按按钮时，提示用户需要长按按钮才可以等。具体的代码就不在这里赘述了，如果有什么问题，欢迎在评论区留言。