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];
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以使用以下代码来实现 iOS 按钮的背景渐变色:CAGradientLayer *gradient = [CAGradientLayer layer]; gradient.frame = self.btn.bounds; gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor whiteColor] CGColor], (id)[[UIColor blackColor] CGColor], nil]; [self.btn.layer insertSublayer:gradient atIndex:0]; ### 回答2: iOS按钮背景渐变色可以通过以下步骤使用OC代码实现: 1. 导入渐变色所需的头文件: ```objc #import <QuartzCore/QuartzCore.h> ``` 2. 创建按钮: ```objc UIButton *myButton = [[UIButton alloc] initWithFrame:CGRectMake(50, 50, 200, 50)]; [self.view addSubview:myButton]; ``` 3. 创建渐变色图层: ```objc CAGradientLayer *gradient = [CAGradientLayer layer]; gradient.frame = myButton.bounds; ``` 4. 设置渐变色图层的颜色: ```objc gradient.colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor blueColor].CGColor]; ``` 5. 设置渐变色方向: ```objc // 横向渐变 gradient.startPoint = CGPointMake(0, 0.5); gradient.endPoint = CGPointMake(1, 0.5); // 纵向渐变 // gradient.startPoint = CGPointMake(0.5, 0); // gradient.endPoint = CGPointMake(0.5, 1); ``` 6. 将渐变色图层添加到按钮的背景图层中: ```objc [myButton.layer insertSublayer:gradient atIndex:0]; ``` 7. 最后,可以给按钮设置一些其他属性,如标题、字体等: ```objc [myButton setTitle:@"渐变按钮" forState:UIControlStateNormal]; [myButton.titleLabel setFont:[UIFont systemFontOfSize:17]]; [myButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]; ``` 通过以上步骤,即可通过OC代码实现iOS按钮的背景渐变色效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值