CAShapeLayer和CAGradientLayer使用

原文鏈接：http://www.ganlvji.com/gradient_circle_progress/

下面這個方法就是產生這個弧形：

#define degreesToRadians(x) (M_PI*(x)/180.0) //把角度轉換成PI的方式

#define  PROGREESS_WIDTH 80 //圓直徑

#define PROGRESS_LINE_WIDTH 4 //弧線的寬度

- (CALayer *)generateLayer
{
    CGRect rect = CGRectMake(0, 0, 100, 100);

    CAShapeLayer *_progressLayer = [CAShapeLayer layer];
    _progressLayer.frame = rect;
    _progressLayer.fillColor =  [[UIColor clearColor] CGColor];
    _progressLayer.strokeColor  = [[UIColor redColor] CGColor];
    _progressLayer.lineCap = kCALineCapRound;
    _progressLayer.lineWidth = PROGRESS_LINE_WIDTH;
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(40, 40) radius:(80 - 4)/2 startAngle:degreesToRadians(-210) endAngle:degreesToRadians(30) clockwise:YES];//上面說明過了用來構建圓形
    _progressLayer.path = [path CGPath];
    _progressLayer.strokeEnd = 0.9;
    
    CALayer *gradientLayer = [CALayer layer];
    gradientLayer.frame = rect;
    
    CAGradientLayer *gradientLayer1 =  [CAGradientLayer layer];
    gradientLayer1.frame = CGRectMake(0, 0, CGRectGetWidth(rect) / 2, CGRectGetHeight(rect));
    [gradientLayer1 setColors:[NSArray arrayWithObjects:(id)[[UIColor redColor] CGColor],(id)[[UIColor yellowColor] CGColor], nil]];
    [gradientLayer1 setLocations:@[@0.5,@0.9]];
    [gradientLayer1 setStartPoint:CGPointMake(0.5, 1)];
    [gradientLayer1 setEndPoint:CGPointMake(0.5, 0)];
    [gradientLayer addSublayer:gradientLayer1];
    
    CAGradientLayer *gradientLayer2 =  [CAGradientLayer layer];
    gradientLayer2.frame = CGRectMake(CGRectGetWidth(rect) / 2, 0, CGRectGetWidth(rect) / 2, CGRectGetHeight(rect));
    [gradientLayer2 setColors:[NSArray arrayWithObjects:(id)[[UIColor yellowColor] CGColor],(id)[[UIColor blueColor] CGColor], nil]];
    [gradientLayer2 setLocations:@[@0.1,@0.5]];
    [gradientLayer2 setStartPoint:CGPointMake(0.5, 0)];
    [gradientLayer2 setEndPoint:CGPointMake(0.5, 1)];
    [gradientLayer addSublayer:gradientLayer2];
    
    
    [gradientLayer setMask:_progressLayer]; //用progressLayer來截取漸變層
    
    CAShapeLayer *bgLayer = [CAShapeLayer layer];
    bgLayer.frame = CGRectMake(0, 0, 100, 100);;
    bgLayer.fillColor = [[UIColor clearColor] CGColor];
    bgLayer.strokeColor = [[UIColor blueColor] CGColor];
    bgLayer.opacity = 0.1f;
    bgLayer.lineCap = kCALineCapRound;
    bgLayer.lineWidth = PROGRESS_LINE_WIDTH;
    UIBezierPath *bgPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(40, 40) radius:(80 - 4)/2 startAngle:degreesToRadians(-210) endAngle:degreesToRadians(30) clockwise:YES];//上面說明過了用來構建圓形
    bgLayer.path = [bgPath CGPath];
    
    CALayer *layer = [CALayer layer];
    [layer addSublayer:bgLayer];
    [layer addSublayer:gradientLayer];
    
    return layer;
}

CAShapeLayer有一個strokeEnd的屬性，這個屬性是從0到1的浮點類型，正好可以用表達百分比，而且這個屬性是animatable，可以動態的表示進度的變化。
如下代碼所示：

-(void)setPercent:(NSInteger)percent animated:(BOOL)animated
{
    [CATransaction begin];
    [CATransaction setDisableActions:!animated];
    [CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
    [CATransaction setAnimationDuration:MAIN_SCREEN_ANIMATION_TIME];
    _progressLayer.strokeEnd = percent/100.0;
    [CATransaction commit];
    
    _percent = percent;
}

記錄方便以後理解。