IOS 设置颜色渐变和透明度渐变

项目中用到地图设置渐变色，查找资料找到两种方法：一种设置颜色，一种设置透明度；

//为颜色设置渐变效果：

    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)]

    CAGradientLayer *gradient = [CAGradientLayer layer]

//设置开始和结束位置(设置渐变的方向)

    gradient.startPoint = CGPointMake(0, 0)

    gradient.endPoint = CGPointMake(1, 0)

gradient.frame =CGRectMake(0,0,40,40)

gradient.colors = [NSArray arrayWithObjects:(id)[UIColor redColor].CGColor,(id)[UIColorwhiteColor].CGColor,nil]

    [view.layer insertSublayer:gradient atIndex:0]

    [self.view addSubview:view]

    //为透明度设置渐变效果

    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)]

    UIColor *colorOne = [UIColor colorWithRed:(216/255.0)  green:(0/255.0)  blue:(18/255.0)  alpha:1.0]

    UIColor *colorTwo = [UIColor colorWithRed:(216/255.0)  green:(0/255.0)  blue:(18/255.0)  alpha:0.0]

    NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, colorTwo.CGColor, nil]

CAGradientLayer *gradient = [CAGradientLayer layer]

//设置开始和结束位置(设置渐变的方向)

    gradient.startPoint = CGPointMake(0, 0)

    gradient.endPoint = CGPointMake(1, 0)

gradient.colors = colors

    gradient.frame = CGRectMake(0, 0, 40, 40)

[view.layerinsertSublayer:gradientatIndex:0]

    [self.view addSubview:view]

本文主要介绍一种绘制颜色渐变的进度圆环. 先上效果图:

实现思路:

CAShapeLayer+UIBezierPath+CAGradientLayer

步骤:

2.绘制背景圆环, 并将其添加到view的layer层上.

3. 使用CAGradientLayer 绘制渐变的背景色

由于CAShapeLayer不能顺着弧线进行渐变只能指定两个点之间进行渐变, 所以四种颜色的渐变只能是将view分成四个小的部分, 分别实现两种颜色间的渐变. 最后在组合在一起, 形成四种颜色的渐变.

4. 将颜色图层切成圆环

@property (nonatomic, strong) CAShapeLayer *progressLayer

_progressLayer = [CAShapeLayer layer]

_progressLayer.frame = self.bounds

_progressLayer.fillColor = [UIColor clearColor].CGColor

_progressLayer.strokeColor = [UIColor colorWithRed:170/255.0 green:210/255.0 blue:254/255.0 alpha:1].CGColor

_progressLayer.lineWidth = 20

_progressLayer.path = path.CGPath

gradientLayer.mask = _progressLayer

5. 利用locations 属性调整颜色空间

根据上面的运行结果可以看出底部的颜色交接的地方有颜色的断层. 主要是第三部分底部的黄色区域较小导致的. 可以利用locations数组进行微调.

默认情况下，这些颜色在空间上均匀地被渲染，但是我们可以用locations属性来调整空间。locations属性是一个浮点数值的数组(以NSNumber包装)。这些浮点数定义了colors属性中每个不同颜色的位置，同样的，也是以单位坐标系进行标定。0.0代表着渐变的开始，1.0代表着结束。

[gradientLayer2 setLocations:@[@0.3, @0.8]]

---