ios簡單漸變圓環,表盤畫法

在開發的時候,有時候會用到圓環進度,我的產品還有其他的一些漸變要求,沒辦法,只有查資料,寫代碼,完成需求

我把這些畫圓環,表盤,簡單的封裝來一下,下面是效果,


2018-03-15 14_01_44.gif

簡單的步驟如下
創建背景圖層(CAShapeLayer)
創建填充圖層 (CAShapeLayer)
創建顏色漸變層(CAGradientLayer)
背景貝塞爾曲線繪制(UIBezierPath)
填充貝塞爾曲線繪制(UIBezierPath)
實線虛線判斷
正圓和七分圓的判斷
開始漸變動畫

這里是一些初始化方法

typedef NS_ENUM(NSInteger,CirleProgressType_)
{
    CirleProgressType_SolidLine = 0 ,   /// 實線
    CirleProgressType_DottedLine = 1,   /// 虛線
    CirleProgressType_DottedLine7Round = 2, // 虛線七分圓
    CirleProgressType_SolidLine7Round = 3, // 實線七分圓
};

/**
 初始化圓環

 @param frame frame
 @param lineType 圓環類型
 @param beginColor 初始化漸變顏色
 @param endColor 結束漸變顏色
 @return self
 */
- (instancetype)initWithFrame:(CGRect)frame LineType:(CirleProgressType_)lineType BeginColor:(UIColor*)beginColor EndColor:(UIColor *)endColor;
/**
 設置背景圓環的寬度,和進度圓環的寬度

 @param progressStrokeWidth 進度圓環寬度
 @param backWidth 背景圓環的寬度
 */
- (void)setProgressStrokeWidth:(CGFloat)progressStrokeWidth backstrokWidth:(CGFloat)backWidth;

/**
 開始漸變動畫
 */
- (void)stroke;

圖層相關初始化

- (instancetype)initWithFrame:(CGRect)frame LineType:(CirleProgressType_)lineType BeginColor:(UIColor*)beginColor EndColor:(UIColor *)endColor;
{
    if (self = [super initWithFrame:frame])
    {
        self.curCirleLine = lineType;
        self.progressBeginColor = beginColor;
        self.progressEndColor = endColor;
        self.curPoint = CGPointMake(self.frame.size.width/2, self.frame.size.height/2);
        [self setUp];
        NSLog(@"  x==== %f    y===== %f",self.center.x,self.center.y);
        
    }
    return self;
}


/**
 *  初始化創建圖層
 */
- (void)setUp
{
    //創建背景圖層
    backGroundLayer = [CAShapeLayer layer];
    backGroundLayer.fillColor = nil;
    backGroundLayer.frame = self.bounds;
    backGroundLayer.lineCap = kCALineCapRound;
    backGroundLayer.lineJoin = kCALineJoinRound;
    
    
    //創建填充圖層
    frontFillLayer = [CAShapeLayer layer];
    frontFillLayer.fillColor = nil;
    frontFillLayer.frame = self.bounds;
    frontFillLayer.lineCap = kCALineCapRound; //線終點
    frontFillLayer.lineJoin = kCALineJoinRound; // 線拐角
    
     // 如果是虛線
    if (self.curCirleLine == CirleProgressType_DottedLine7Round ||  self.curCirleLine == CirleProgressType_DottedLine) {
        backGroundLayer.lineDashPattern  = @[@2,@6];  ///
        frontFillLayer.lineDashPattern  = @[@2,@6];  ///
//        frontFillLayer.lineCap = kCALineJoinBevel;
        backGroundLayer.lineCap = kCALineJoinMiter;
        frontFillLayer.lineCap = kCALineJoinMiter;
        [self.layer addSublayer:backGroundLayer];
        [self.layer addSublayer:frontFillLayer];
        
    }
    else
    {
        [self.layer addSublayer:backGroundLayer];
        //    [self.layer addSublayer:frontFillLayer];// 不用漸變

        //
        if (self.curCirleLine == CirleProgressType_SolidLine) {
            [self drawGradientLayer]; // 漸變
            gradientLayer.mask = frontFillLayer;
            [self.layer insertSublayer:backGroundLayer atIndex:0];
        }
        else if (self.curCirleLine == CirleProgressType_SolidLine7Round)
        {
            [self drawGradientLayer]; // 漸變
            gradientLayer.mask = frontFillLayer;
            [self.layer insertSublayer:backGroundLayer atIndex:0];
//            [self.layer insertSublayer:backGroundLayer atIndex:0];
//            [self.layer addSublayer:frontFillLayer];// 不用漸變
        }


    }
}

設置圓環背景顏色并畫出圓環

- (void)setProgressTrackColor:(UIColor *)progressTrackColor
{
    _progressTrackColor = progressTrackColor;
    backGroundLayer.strokeColor = progressTrackColor.CGColor;
    // 判斷是七分圓還是十分圓
    if (self.curCirleLine == CirleProgressType_DottedLine7Round || self.curCirleLine == CirleProgressType_SolidLine7Round) {
        backGroundBezierPath = [UIBezierPath bezierPathWithArcCenter:self.curPoint radius:(CGRectGetWidth(self.bounds)-self.progressStrokeWidth)/2.f startAngle:M_PI_4* 3 endAngle:M_PI_4 clockwise:YES];
    }
    else
    {
        backGroundBezierPath = [UIBezierPath bezierPathWithArcCenter:self.curPoint radius:(CGRectGetWidth(self.bounds)-self.progressStrokeWidth)/2.f startAngle: - M_PI_2 endAngle: M_PI_2 * 3 clockwise:YES]; // 背景和進度開始要保持一致
    }
    
    

    backGroundLayer.path = backGroundBezierPath.CGPath;
}

設置圓環進度顏色(漸變之后這些顏色無效)并畫出圓環

/*****
 設置圓弧進度百分比
 ArcCenter: 原點
 radius: 半徑
 startAngle: 開始角度
 endAngle: 結束角度
 clockwise: 是否順時針方向 */
- (void)setProgressValue:(CGFloat)progressValue
{
    _progressValue = progressValue;
    
    // 判斷是七分圓還是十分圓
    if (self.curCirleLine == CirleProgressType_DottedLine7Round || self.curCirleLine == CirleProgressType_SolidLine7Round)
    {
        frontFillBezierPath = [UIBezierPath bezierPathWithArcCenter:self.curPoint radius:(CGRectGetWidth(self.bounds)-self.progressStrokeWidth)/2.f startAngle: M_PI_4 * 3 endAngle:(3*M_PI_2)*progressValue + M_PI_4 * 3 clockwise:YES];

    }
    else
    {

         frontFillBezierPath = [UIBezierPath bezierPathWithArcCenter:self.curPoint radius:(CGRectGetWidth(self.bounds)-self.progressStrokeWidth)/2.f startAngle: - M_PI_2 endAngle:(2*M_PI)*progressValue - M_PI_2 clockwise:YES];
    }
    frontFillLayer.path = frontFillBezierPath.CGPath;
    

}

繪制漸變圖層

-(void)drawGradientLayer{
    
    gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = self.bounds;
    gradientLayer.colors = @[(id)self.progressBeginColor.CGColor,(id)self.progressEndColor.CGColor];
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(0, 1);
    [self.layer insertSublayer:gradientLayer atIndex:0];
    
}

開始漸變動畫


/// 動畫效果
- (void)stroke
{
    //畫圖動畫
    self.hidden = NO;
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.duration  = kAnimationDuration;
    animation.fromValue = @0.0f;
    animation.toValue   = @1.0f;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    animation.removedOnCompletion = YES;
    [frontFillLayer addAnimation:animation forKey:@"circleAnimation"];
    
}

調用使用

@interface ViewController ()
{
    CirleProgeressView *solidprogressView;
    CirleProgeressView *dottedprogressView;
    CirleProgeressView *solid7progressView;
    CirleProgeressView *dotted7progressView;
}
@end

#pragma 實線漸變圓環
- (void)solidLine
{
    solidprogressView = [[CirleProgeressView alloc]initWithFrame:CGRectMake(50,50, 90, 90) LineType:(CirleProgressType_SolidLine) BeginColor:homeRingBegincolor EndColor:homeRingEndcolor];
    //solidprogressView.backgroundColor = [UIColor yellowColor];
    solidprogressView.progressColor = homeRingBegincolor;
    [solidprogressView setProgressStrokeWidth:15 backstrokWidth:15];
    solidprogressView.progressTrackColor = [UIColor grayColor];
    [self.view addSubview:solidprogressView];
    solidprogressView.progressValue = 0.7;
    [solidprogressView stroke];/// 開始圓環動畫
}

#pragma 虛線圓環
- (void)dottedLine
{
    dottedprogressView = [[CirleProgeressView alloc]initWithFrame:CGRectMake(50,150, 90, 90) LineType:(CirleProgressType_DottedLine) BeginColor:homeRingBegincolor EndColor:homeRingEndcolor];
    //dottedprogressView.backgroundColor = [UIColor yellowColor];
    dottedprogressView.progressColor = homeRingBegincolor;
    [dottedprogressView setProgressStrokeWidth:15 backstrokWidth:15];
    dottedprogressView.progressTrackColor = [UIColor grayColor];
    [self.view addSubview:dottedprogressView];
    dottedprogressView.progressValue = 0.7;
    [dottedprogressView stroke];/// 開始圓環動畫
}
#pragma 虛線七分圓環
- (void)dottedLineRound7
{
    solid7progressView = [[CirleProgeressView alloc]initWithFrame:CGRectMake(50,250, 90, 90) LineType:(CirleProgressType_DottedLine7Round) BeginColor:homeRingBegincolor EndColor:homeRingEndcolor];
    //solid7progressView.backgroundColor = [UIColor blueColor];
    solid7progressView.progressColor = homeRingBegincolor;
    [solid7progressView setProgressStrokeWidth:15 backstrokWidth:15];
    solid7progressView.progressTrackColor = [UIColor grayColor];
    [self.view addSubview:solid7progressView];
    solid7progressView.progressValue = 0.7;
    [solid7progressView stroke];/// 開始圓環動畫
}


#pragma 實線七分圓環
- (void)solidLineRound7
{
    dotted7progressView = [[CirleProgeressView alloc]initWithFrame:CGRectMake(50,350, 90, 90) LineType:(CirleProgressType_SolidLine7Round) BeginColor:homeRingBegincolor EndColor:homeRingEndcolor];
    //dotted7progressView.backgroundColor = [UIColor redColor];
    dotted7progressView.progressColor = homeRingBegincolor;
    [dotted7progressView setProgressStrokeWidth:15 backstrokWidth:15];
    dotted7progressView.progressTrackColor = [UIColor grayColor];
    [self.view addSubview:dotted7progressView];
    dotted7progressView.progressValue = 0.7;
    [dotted7progressView stroke];/// 開始圓環動畫
}

下面是完整demo地址
demo

ios簡單的股票分時線

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容