先看一下效果圖
介紹一下：就是長(zhǎng)按圓圈部位，進(jìn)度條出現(xiàn)瓷们，當(dāng)你長(zhǎng)按的時(shí)間到達(dá)規(guī)定時(shí)間（時(shí)間可自己設(shè)置）业栅，完成當(dāng)前操作。
共有兩個(gè)難點(diǎn)
1谬晕、按壓開(kāi)始碘裕，進(jìn)度條開(kāi)始運(yùn)動(dòng)
2、進(jìn)度條的漸變
一固蚤、界面繪制
1娘汞、自定義View，LHButton
2夕玩、LHButton上添加長(zhǎng)按手勢(shì)
3、添加timer,每次timer結(jié)束繪制一次界面
4惊豺、添加CAShapeLayer 加入path路徑 根據(jù)它的strokeEnd屬性來(lái)繪制
@property (nonatomic, assign) CGFloat progress;
@property (nonatomic, strong) NSTimer *displayline;
/** 進(jìn)度條圖層 */
@property (nonatomic, strong) CAShapeLayer *progressLayer;
-(CAShapeLayer *)progressLayer{
if (_progressLayer == nil) {
_progressLayer = [CAShapeLayer layer];
_progressLayer.fillColor = [UIColor clearColor].CGColor;
_progressLayer.strokeColor = KWhiteColor.CGColor;
_progressLayer.lineWidth = 0;
_progressLayer.strokeEnd = 0;
_progressLayer.lineCap = kCALineCapRound;
CGRect progressFrame = CGRectMake(3, 3, self.bounds.size.width-6, self.bounds.size.width-6);
UIBezierPath *progressPath = [UIBezierPath bezierPathWithRoundedRect:progressFrame cornerRadius:progressFrame.size.height/2];
_progressLayer.path = progressPath.CGPath;
}
return _progressLayer;
}
-(NSTimer *)displayline{
if (_displayline == nil) {
_displayline = [NSTimer timerWithTimeInterval:0.1 target:self selector:@selector(lineRun) userInfo:nil repeats:YES];
[[NSRunLoop currentRunLoop]addTimer:_displayline forMode:NSRunLoopCommonModes];
[self.displayline setFireDate:[NSDate distantFuture]];
}
return _displayline;
}
-(void)lineRun{
self.temInterval = self.temInterval+1/10.0;
self.progress = self.temInterval/self.interval;
// NSLog(@"%.2f",self.progress);
if (self.temInterval >= self.interval) {
[self stop];
self.actionState(LHProgressButtonStateEnd);
}
[self setNeedsDisplay];
}
二燎孟、進(jìn)度條漸變的問(wèn)題
剛開(kāi)始是想通過(guò)layer的strokeColor來(lái)設(shè)置，但是發(fā)現(xiàn)strokeColor只能設(shè)置一次尸昧，無(wú)法達(dá)到漸變效果揩页，然后就改變思路，通過(guò)蒙版來(lái)實(shí)現(xiàn)
-(UIView *)gradientBackgroundView{
if (_gradientBackgroundView == nil) {
// 漸變背景視圖（不包含坐標(biāo)軸）
_gradientBackgroundView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height)];
/** 創(chuàng)建并設(shè)置漸變背景圖層 */
//初始化CAGradientlayer對(duì)象烹俗，使它的大小為漸變背景視圖的大小
self.gradientLayer = [CAGradientLayer layer];
self.gradientLayer.frame = self.gradientBackgroundView.bounds;
//設(shè)置漸變區(qū)域的起始和終止位置（范圍為0-1）爆侣，即漸變路徑
self.gradientLayer.startPoint = CGPointMake(0, 0.0);
self.gradientLayer.endPoint = CGPointMake(0.0, 1.0);
//設(shè)置顏色的漸變過(guò)程
self.gradientLayerColors = [NSMutableArray arrayWithArray:@[(__bridge id)[UIColor colorWithRed:253 / 255.0 green:164 / 255.0 blue:8 / 255.0 alpha:1.0].CGColor, (__bridge id)[UIColor colorWithRed:251 / 255.0 green:37 / 255.0 blue:45 / 255.0 alpha:1.0].CGColor]];
self.gradientLayer.colors = self.gradientLayerColors;
//將CAGradientlayer對(duì)象添加在我們要設(shè)置背景色的視圖的layer層
[_gradientBackgroundView.layer addSublayer:self.gradientLayer];
}
return _gradientBackgroundView;
}
然后上蒙版
mask的理解
mask是CALayer的一個(gè)屬性，它本身也是一個(gè)CALayer類幢妄。我們使用該屬性主要是為了讓兩個(gè)圖層搭配出一個(gè)新的視覺(jué)效果兔仰，簡(jiǎn)單理解就是一個(gè)遮罩，mask圖層區(qū)域外的任何區(qū)域不顯示蕉鸳。
// 設(shè)置折線圖層為漸變圖層的mask
self.gradientBackgroundView.layer.mask = self.progressLayer;
三乎赴、到這就基本差不多了
