CAGradientLayer

2016-09-22 09:58:03 +08:00
 newkengsir

DEMO 地址下载

假期遇上台风天停电 休息了好几天。

今天大概说说 CAGradientLayer 的使用。

CAGradientLayer 是用于处理渐变色的层结构,比如想设置一个背景色的一部分为蓝色,一部分为红色,这时候就可以使用 CAGradientLayer 来设置了。 CAGradientLayer 的渐变色和前面所使用的 CALayer 、 CAShapeLayer 一样都可以做隐式动画。 CAGradientLayer 与 CAShapeLayer 配合使用(CAShapeLayer 上一篇有讲解了), CAShapeLayer 提供一个形状, CAGradientLayer 提供一个渐变色的背景。其实就是把 CAShapeLayer 当作 CAGradientLayer 的 mask 属性(遮罩)来使用了。 CAGradientLayer 可以实现 png 图片遮罩无法实现的效果,而且更效率。

另外, CAGradientLayer 有一个坐标系统,是从(0,0)到( 1,1 )绘制的矩形, CAGradientLayer 的 frame 不为正方形的话,坐标系统就会被拉伸。还有两个属性, startPoint 和 endPoint 的设置会影响颜色的绘制方向,即从上到下或者从左到右等,由坐标系统决定。

画图还是那么差劲,能看懂就好 - - 比如 startPoint 是(0,0) endPoint 是( 0,1 )则颜色的绘制方向由左到右。其他的类推。 CAGradientLayer 的多种颜色的分割由 0->1 的比例决定不由它的 frame 决定。

代码部分

    @property (nonatomic, strong) CAGradientLayer *gradientLayer;

    //初始化
    self.gradientLayer = [CAGradientLayer layer];
    self.gradientLayer.frame = CGRectMake(0, 0, 200, 200);
    //laye 的 position 和 view 的 center 一样 居中属性
    self.gradientLayer.position = self.view.center;
    //边宽
    self.gradientLayer.borderWidth = 1.f;
    [self.view.layer addSublayer:self.gradientLayer];

    //设置颜色
    self.gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
                                  (__bridge id)[UIColor greenColor].CGColor,
                                  (__bridge id)[UIColor blueColor].CGColor];
    
    //设置颜色渐变方向 (0,0)->(1,1)则 45 度方向 (0,0)->(1,0)上->下
    self.gradientLayer.startPoint = CGPointMake(0, 0);
    self.gradientLayer.endPoint = CGPointMake(0, 1);
    
    //设置颜色分割点
    self.gradientLayer.locations = @[@(0.25),@(0.5),@(0.75)];

由于代码较多就不贴出来了,有需要下载的可以去

下面是实现色差动画的效果

下面这些效果我都整理了 放在 demo 中了,可以去这里下载这里就不一一贴出来了,注释也写的比较多,很容易理解。 先放一张截图的吧。运行时的效果。因为视频转成 gif 后不知道为什么变成很差的效果,可能是帧数吧。代码中运行时还是很不错的效果的。。。有大神知道原因的告诉我一下感激不尽。

色差实现,先设定渐变方向,再设置 2 种以上的颜色一种是透明的,另外一种就随意了。如果没有透明色,就会掩盖掉 view ,第三就是颜色分割点的值。注意:分割点的值和颜色的数量要匹配。 色差实现的效果

环形带间隔的进度条实现 或者全部饱满的也有,在代码中。

加载提示框

后续还会继续更新一些其他的内容,如果觉得对你有用请点个喜欢吧。谢谢。

2195 次点击
所在节点    iDev
2 条回复
ma125125t
2016-09-22 10:11:58 +08:00
不错,支持
newkengsir
2016-09-26 15:25:37 +08:00
谢谢您的支持

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/308046

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX