绘制带渐变色的扇形

本文介绍了如何绘制带有渐变色的扇形，像下面这样。

index.png

思路：渐变色可以用CAGradientLayer来实现，CAShapeLayer可以用来定制layer的形状，UIBezierPath可以描述扇形，所以只需要绘制出渐变layer之后，用UIBezierPath+CAShapeLayer来绘一个扇形就可以了。

下面是具体代码和详解

#import "IPadPlayerSector.h"

@interface IPadPlayerSector ()
{
    CGFloat _centerX;
    CGFloat _radius;
}
@property(nonatomic , strong)CAGradientLayer *gradientLayer;
@property(nonatomic , strong)CAShapeLayer *shapeLayer;
@property(nonatomic , assign)BOOL animated;
@property(nonatomic , assign)BOOL needanimation;
@end

@implementation IPadPlayerSector

- (void)setRange:(CGFloat)range {
    _range = range;
    if (_range != 0 && !self.animated) {
        self.needanimation = YES;
    }
    [self setNeedsLayout];
    [self layoutIfNeeded];
}

- (void)setColors:(NSArray *)colors {
    _colors = [colors copy];
    [self setNeedsLayout];
    [self layoutIfNeeded];
}

- (void)layoutSubviews {
    [super layoutSubviews];
    
    if (!_gradientLayer) {
        self.gradientLayer = [CAGradientLayer layer];
        self.gradientLayer.frame = self.bounds;
        self.gradientLayer.startPoint = CGPointMake(0,0);//渐变色的起始位置
        self.gradientLayer.endPoint = CGPointMake(0,1);//渐变色的结束位置
        [self.layer addSublayer:_gradientLayer];
    }
    self.gradientLayer.colors = _colors;
    if (!_shapeLayer) {
        if (_centerX == 0) {
            _centerX = self.bounds.size.width/2.0;
            _radius = self.bounds.size.width/4.0;
        }
        self.shapeLayer.fillColor = [UIColor clearColor].CGColor;
        self.shapeLayer.strokeColor = KUIColorFromRGB(0x73C3FF).CGColor;
        self.shapeLayer.lineWidth = _centerX;
    }
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(_centerX, _centerX) radius:_radius startAngle:-M_PI_2 endAngle:(M_PI*2*_range-M_PI_2) clockwise:YES];//使用UIBezierPath描述指定角度的扇形
    self.shapeLayer.path = path.CGPath;
    self.gradientLayer.mask = self.shapeLayer;//shapeLayer赋给mask
    
    if (_range != 0&&self.needanimation) {//这是扇形展示时的动画
        self.animated = YES;
        self.needanimation = NO;
        CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
        basic.duration = 1.5;
        basic.fromValue = @(0.1f);
        basic.toValue = @(1.0f);
        basic.removedOnCompletion = YES;
        [self.shapeLayer addAnimation:basic forKey:@"basic"];
    }
}

- (CAGradientLayer *)gradientLayer {
    if (!_gradientLayer) {
        _gradientLayer = [CAGradientLayer layer];
    }
    return _gradientLayer;
}

- (CAShapeLayer *)shapeLayer {
    if (!_shapeLayer) {
        _shapeLayer = [CAShapeLayer layer];
    }
    return _shapeLayer;
}

- (instancetype)init {
    self = [super init];
    if (!self) {
        return nil;
    }
    _range = 0.0;
    _colors = @[(__bridge id)KUIColorFromRGB(0x73C3FF).CGColor,//渐变色开始颜色
                (__bridge id)KUIColorFromRGB(0x407FF3).CGColor];//渐变色结束颜色
    return self;
}

@end

带动画的渐变扇形.gif