需求来源
最近看到
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];
}
结尾
到这里，长按按钮的逻辑已经实现了，当然在操作的时候，也可以去添加一些交互，比如在短按按钮时，提示用户需要长按按钮才可以等。具体的代码就不在这里赘述了，如果有什么问题，欢迎在评论区留言。
