CAGradientLayer_实现颜色渐变

最新推荐文章于 2021-01-27 18:19:52 发布

xiao_yuly

最新推荐文章于 2021-01-27 18:19:52 发布

阅读量572

点赞数

分类专栏： OC基础文章标签： CAGradient 颜色渐变 CGColor

本文链接：https://blog.csdn.net/jacob_ios/article/details/50100059

版权

OC基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CAGradientLayer可以实现多种颜色平滑渐变，以下是参数介绍：

colors，颜色的数组，需要是CGColor类型，需要使用(__bridge id)
startPoint,endPoint,这两个参数是以单位坐标系进行的定义，左上角坐标是{0, 0}，右下角坐标是{1, 1},是决定渐变的方向
locations:颜色分割线的位置

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    self.gradLayer = gradientLayer;
    NSArray *colorsArr = @[(__bridge id)[UIColor grayColor].CGColor,
(__bridge id)[UIColor greenColor].CGColor,
(__bridge id)[UIColor yellowColor].CGColor,
(__bridge id)[UIColor blueColor].CGColor];
    NSArray *locations = @[@0.0,@0.2,@0.4,@0.6,@0.8];
    gradientLayer.colors = colorsArr;
    gradientLayer.locations = locations;
    gradientLayer.startPoint = CGPointMake(0, 0.5);
    gradientLayer.endPoint = CGPointMake(1, 0.5);


    gradientLayer.frame = CGRectMake(0, 100, self.view.bounds.size.width, 50);
    [self.view.layer addSublayer:gradientLayer];
    //动画
    CABasicAnimation *baseAnimation = [CABasicAnimation animation];
    baseAnimation.keyPath = @"locations";
    baseAnimation.fromValue = @[@0,@0,@0.1,@0.15,@0.25];
    baseAnimation.toValue = @[@0.45,@0.6,@0.85,@0.9,@1.0];
    baseAnimation.duration = 3.0;
    baseAnimation.repeatCount = INFINITY;//无穷大
    [gradientLayer addAnimation:baseAnimation forKey:nil];

效果如下：
这里写图片描述

补充：实现UILabel的字体颜色渐变

设置gradientLayer的mask属性即可实现。

    gradientLayer.mask = self.label.layer;

方法二：

typedef NS_ENUM(NSUInteger, GradientType) {
    GradientTypeTopToBottom = 0,//从上到小
    GradientTypeLeftToRight = 1,//从左到右
    GradientTypeUpleftToLowright = 2,//左上到右下
    GradientTypeUprightToLowleft = 3,//右上到左下
};

定义接口:

@interface UIImage (GradientColor)

+ (UIImage *)gradientColorImageFromColors:(NSArray*)colors gradientType:(GradientType)gradientType imgSize:(CGSize)imgSize;

@end

+ (UIImage *)gradientColorImageFromColors:(NSArray*)colors gradientType:(GradientType)gradientType imgSize:(CGSize)imgSize {
    NSMutableArray *ar = [NSMutableArray array];
    for(UIColor *c in colors) {
        [ar addObject:(id)c.CGColor];
    }
    UIGraphicsBeginImageContextWithOptions(imgSize, YES, 1);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);
    CGColorSpaceRef colorSpace = CGColorGetColorSpace([[colors lastObject] CGColor]);
    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (CFArrayRef)ar, NULL);
    CGPoint start;
    CGPoint end;
    switch (gradientType) {
        case GradientTypeTopToBottom:
            start = CGPointMake(0.0, 0.0);
            end = CGPointMake(0.0, imgSize.height);
            break;
        case GradientTypeLeftToRight:
            start = CGPointMake(0.0, 0.0);
            end = CGPointMake(imgSize.width, 0.0);
            break;
        case GradientTypeUpleftToLowright:
            start = CGPointMake(0.0, 0.0);
            end = CGPointMake(imgSize.width, imgSize.height);
            break;
        case GradientTypeUprightToLowleft:
            start = CGPointMake(imgSize.width, 0.0);
            end = CGPointMake(0.0, imgSize.height);
            break;
        default:
            break;
    }
    CGContextDrawLinearGradient(context, gradient, start, end, kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    CGGradientRelease(gradient);
    CGContextRestoreGState(context);
    CGColorSpaceRelease(colorSpace);
    UIGraphicsEndImageContext();
    return image;
}

使用方法如下:

UIColor *topleftColor = [UIColor colorWithRed:48/255.0f green:127/255.0f blue:202/255.0f alpha:1.0f];
UIColor *bottomrightColor = [UIColor colorWithRed:35/255.0f green:195/255.0f blue:95/255.0f alpha:1.0f];
UIImage *bgImg = [UIImage gradientColorImageFromColors:@[topleftColor, bottomrightColor] gradientType:GradientTypeUpleftToLowright imgSize:SCREEN_SIZE];
self.view.backgroundColor = [UIColor colorWithPatternImage:bgImg];