假期遇上台风天停电 休息了好几天。
今天大概说说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)];
由于代码较多就不贴出来了,有需要下载的可以去http://www.code4app.com/thread-10691-1-1.html
下面是实现色差动画的效果
下面这些效果我都整理了 放在demo中了,可以去这里下载这里就不一一贴出来了,注释也写的比较多,很容易理解。
先放一张截图的吧。运行时的效果。因为视频转成gif后不知道为什么变成很差的效果,可能是帧数吧。代码中运行时还是很不错的效果的。。。有大神知道原因的告诉我一下感激不尽。
色差实现,先设定渐变方向,再设置2种以上的颜色一种是透明的,另外一种就随意了。如果没有透明色,就会掩盖掉view,第三就是颜色分割点的值。注意:分割点的值和颜色的数量要匹配。
色差实现的效果
环形带间隔的进度条实现 或者全部饱满的也有,在代码中。
加载提示框
后续还会继续更新一些其他的内容,如果觉得对你有用请点个喜欢吧。谢谢。