专栏首页APP自动化测试CAGradientLayer颜色渐变器

CAGradientLayer颜色渐变器

使用CAGradientLayer可以实现颜色的渐变, 我们先看下头文件

@interface CAGradientLayer : CALayer

@property(nullable, copy) NSArray *colors;
//颜色渐变的数组

@property(nullable, copy) NSArray<NSNumber *> *locations;
//渐变颜色的区间分布,locations的数组长度和color一致,默认是nil,会平均分布

@property CGPoint startPoint;
//映射locations中第一个位置,用单位向量表示,比如(0,0)表示从左上角开始变化。默认值是(0.5,0.0)

@property CGPoint endPoint;
//映射locations中最后一个位置,用单位向量表示,比如(1,1)表示到右下角变化结束。默认值是(0.5,1.0)

@property(copy) NSString *type;
//默认值是kCAGradientLayerAxial,表示按像素均匀变化。除了默认值也无其它选项

@end

下面是我用上面的代码实现的最终效果,startPoint是(0,0),endPoint是(1,1)。

下面我们试试用这个来实现一个渐变色的圆环,

需要说明的是CAGradientLayer只能实现矩形范围内的颜色渐变, 那渐变的圆环要如何实现呢? mask 对了

首先我们创建两个挨着的矩形渐变色块, 并把两个色块添加到同一个layer

再创建一个带有圆弧形状的layer作为mask

上代码:

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //创建圆弧路径
    UIBezierPath * path      = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50, 50) radius:45 startAngle:- 7.0 / 6 * M_PI endAngle:M_PI / 6 clockwise:YES];
    
    //添加圆弧Layer
    [self.view.layer addSublayer:[self createShapeLayerWithPath:path]];
    
    //配置左色块CAGradientLayer
    CAGradientLayer * leftL  = [self createGradientLayerWithColors:@[(id)[UIColor redColor].CGColor,(id)[UIColor yellowColor].CGColor]];
    leftL.position           = CGPointMake(25, 40);
    
    //配置右色块CAGradientLayer
    CAGradientLayer * rightL = [self createGradientLayerWithColors:@[(id)[UIColor greenColor].CGColor,(id)[UIColor yellowColor].CGColor]];
    rightL.position          = CGPointMake(75, 40);
    
    //将两个色块拼接到同一个layer并添加到self.view
    CALayer * layer          = [CALayer layer];
    layer.bounds             = CGRectMake(0, 0, 100, 80);
    layer.position           = self.view.center;
    [layer addSublayer:leftL];
    [layer addSublayer:rightL];
    [self.view.layer addSublayer:layer];
    
    //创建一个ShapeLayer作为mask
    CAShapeLayer * mask = [self createShapeLayerWithPath:path];
    mask.position       = CGPointMake(50, 40);
    layer.mask          = mask;
    //mask.strokeEnd = 1;
}

//依照路径创建并返回一个CAShapeLayer
-(CAShapeLayer *)createShapeLayerWithPath:(UIBezierPath *)path {
    
    CAShapeLayer * layer = [CAShapeLayer layer];
    layer.path           = path.CGPath;
    layer.bounds         = CGRectMake(0, 0, 100, 75);
    layer.position       = self.view.center;
    layer.fillColor      = [UIColor clearColor].CGColor;
    layer.strokeColor    = [UIColor colorWithRed:33 / 255.0 green:192 / 255.0 blue:250 / 255.0 alpha:1].CGColor;
    layer.lineCap        = @"round";
    layer.lineWidth      = 10;
    
    return layer;
}

//依照给定的颜色数组创建并返回一个CAGradientLayer
-(CAGradientLayer *)createGradientLayerWithColors:(NSArray *)colors {
    
    CAGradientLayer * gradientLayer = [CAGradientLayer layer];
    gradientLayer.colors            = colors;
    gradientLayer.locations         = @[@0,@0.8];
    gradientLayer.startPoint        = CGPointMake(0, 1);
    gradientLayer.endPoint          = CGPointMake(0, 0);
    gradientLayer.bounds            = CGRectMake(0, 0, 50, 80);
    
    return gradientLayer;
}

@end

可以改变mask的strokeEnd来实现动画

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用CAShapeLayer绘图

    之前讲过使用UIBezierPath在UIView的drawRect中绘图, 今天我们讲下另外一种方式: CAShaperLayer

    周希
  • CAReplicatorLayer复制Layer和动画, 实现神奇的效果

    今天我们看下CAReplicatorLayer, 官方的解释是一个高效处理复制图层的中间层。他能复制图层的所有属性,包括动画。

    周希
  • Python -- 使用pickle 和 CPickle对数据对象进行归档和解析

    经常遇到在Python程序运行中得到了一些字符串、列表、字典、对象等数据,想要长久的保存下来,方便以后使用,而不是简单的放入内存中关机断电就丢失数据。

    周希
  • python-分解多列表嵌套

        for first_layer in lists:         if isinstance(first_layer,list):          ...

    py3study
  • circos 可视化手册-tile 篇

    tile用来展示基因组上区域的分布,和之前介绍过的highlight不同,这些区域在图中并不是位于同一层的。为了避免不同区域之间的重叠,tile会将有重叠的区域...

    生信修炼手册
  • layer关闭弹窗

    layer.close(index); //此时你只需要把获得的index,轻轻地赋予layer.close即可

    似水的流年
  • 页面弹出层组件layer的用法

    layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用layer.open({ty...

    爱明依
  • layer小提示弹框验证

    当验证失败的时候,会出现弹框进行提示,如果直接写alert的话显得太原始了,放一个layer验证提示弹框代码在里面,ui瞬间变得有模有样了 。

    王小婷
  • PC/移动端弹出层插件之layer

    还在自己写弹出层吗?亲,我来解决你的烦恼,为你推荐一款多样性、易集成的插件:layer。

    Javanx
  • iOS 视图,动画渲染机制探究

    终端的开发,首当其冲的就是视图、动画的渲染,切换等等。用户使用 App 时最直接的体验就是这个界面好不好看,动画炫不炫,滑动流不流畅。UI就是 App 的门面,...

    QQ音乐技术团队

扫码关注云+社区

领取腾讯云代金券