iOS实现颜色渐变的几种方法

最新推荐文章于 2024-07-03 17:27:53 发布

xiaochaofeiyu

最新推荐文章于 2024-07-03 17:27:53 发布

阅读量3.4k

点赞数 1

分类专栏： iOS-学习文章标签： ios CAGradient Core-Graph CAShapeLay

本文链接：https://blog.youkuaiyun.com/xiaochaofeiyu/article/details/52850051

版权

本文介绍了在iOS中实现颜色渐变的三种方法：1. 使用CAGradientLayer，通过colors和locations属性设置渐变效果；2. 利用Core Graphics的CGContextDrawLinearGradient和CGContextDrawRadialGradient绘制自定义形状的渐变；3. 结合CAShapeLayer作为layer的mask，生成不同形状的渐变。提供了详细的属性解释和代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ios实现颜色渐变的几种方法

demo地址：https://github.com/xiaochaofeiyu/YSCAnimation
觉得有用的话，点个star吧！

1. CAGradientLayer实现渐变

CAGradientLayer是CALayer的一个特殊子类，用于生成颜色渐变的图层，使用较为方便，下面介绍下它的相关属性：
1. colors 渐变的颜色
2. locations 渐变颜色的分割点
3. startPoint&endPoint 颜色渐变的方向，范围在(0,0)与(1.0,1.0)之间，如(0,0)(1.0,0)代表水平方向渐变,(0,0)(0,1.0)代表竖直方向渐变

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor yellowColor].CGColor, (__bridge id)[UIColor blueColor].CGColor];
    gradientLayer.locations = @[@0.3, @0.5, @1.0];
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(1.0, 0);
    gradientLayer.frame = CGRectMake(0, 100, 300, 100);
    [self.view.layer addSublayer:gradientLayer];

CAGradientLayer实现渐变标间简单直观，但存在一定的局限性，比如无法自定义整个渐变区域的形状，如环形、曲线形的渐变。

2. Core Graphics相关方法实现渐变

iOS Core Graphics中有两个方法用于绘制渐变颜色，CGContextDrawLinearGradient可以用于生成线性渐变，CGContextDrawRadialGradient用于生成圆半径方向颜色渐变。函数可以自定义path，无论是什么形状都可以，原理都是用来做Clip，所以需要在CGContextClip函数前调用CGContextAddPath函数把CGPathRef加入到Context中。
另外一个需要注意的地方是渐变的方向，方向是由两个点控制的，点的单位就是坐标。因此需要正确从CGPathRef中找到正确的点，方法当然有很多种看具体实现，本例中，我就是简单得通过调用CGPathGetBoundingBox函数，返回CGPathRef的矩形区域，然后根据这个矩形取两个点，读者可以根据自行需求修改具体代码。

1-> 线性渐变