iOS使用CAGradientLayer实现颜色渐变

释放双眼,带上耳机,听听看~!

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];

人已赞赏
iOS文章

iOS UITextField简介

2020-2-22 4:15:04

iOS文章

Xcode真机运行,总是提示输入用户名和密码的解决方法

2020-2-22 5:18:52

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索