练习实现效果:
一.CAGradientLayer属性
@property(nullable, copy) NSArray *colors;
此数组存放需要渐变的颜色的CGColorRef对象。可以做成动画。
@property(nullable, copy) NSArray*locations;
一个可选的NSNumber对象的数组，定义每个对象的位置在范围0,1中，渐变作为一个值停止。值必须单调递增。如果给定一个nil数组，则假设在0,1范围内均匀分布。可以做成动画。
@property CGPoint startPoint;
@property CGPoint endPoint;
当绘制到图层的时候，渐变的起始点和结束点,范围都在0~1之间,都可以做成动画,详细介绍如下
这个理需要先介绍一下layer的坐标系统如下图:
其次就是理解这两个属性的效果如下图:假设startPoint(0.75,0) endPoint(1,0.75)
@property(copy) NSString *type;
渐变梯度,目前只有一种kCAGradientLayerAxial
二.结合CAShapeLayer和CABasicAnimation做的示例练习
效果就是上边效果图提到创建一个环形渐变并做旋转动画
首先分析,CAGradientLayer作出的渐变效果是线性的,因此可以考虑将环形渐变分为四块如下图分析:
代码实现:
1.首先创建一层背景layer
CALayer *la = [CALayer layer];
la.frame = CGRectMake(self.view.bounds.size.width / 2.0f - 50.0f,
self.view.bounds.size.height / 2.0f - 50.0f, 100, 100);
[self.view.layer addSublayer:la];
2.创建背景圆环作
//创建背景圆环
CAShapeLayer *trackLayer = [CAShapeLayer layer];
trackLayer.frame = la.bounds;
//清空填充色
trackLayer.fillColor = [UIColor clearColor].CGColor;
//设置画笔颜色 即圆环背景色
trackLayer.strokeColor = [UIColor colorWithRed:170/255.0 green:210/255.0 blue:254/255.0 alpha:1].CGColor;
trackLayer.lineWidth = 10;
//设置画笔路径
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(la.frame.size.width/2.0, la.frame.size.height/2.0) radius:45 startAngle:- M_PI_2 endAngle:-M_PI_2 + M_PI * 2 clockwise:YES];
//path 决定layer将被渲染成何种形状
trackLayer.path = path.CGPath;
[la addSublayer:trackLayer];
3.创建四个区域的渐变:
CGRect rect = CGRectMake(0, 0, 100, 100);
CGFloat width = rect.size.width;
CGFloat height = rect.size.height;
CALayer *gradientLayer = [CALayer layer];
gradientLayer.frame = CGRectMake(0, 0, 100, 100);
CAGradientLayer *gradientLayer1 = [CAGradientLayer layer];
gradientLayer1.frame = CGRectMake(width/2.0, 0, width/2.0, height/2.0);
gradientLayer1.colors = @[(__bridge id)[UIColor blackColor].CGColor, (__bridge id)COLOR_WITH_RGB16(0x333333).CGColor];
//startPoint和endPoint属性，他们决定了渐变的方向。这两个参数是以单位坐标系进行的定义，所以左上角坐标是{0, 0}，右下角坐标是{1, 1}
//startPoint和pointEnd 分别指定颜色变换的起始位置和结束位置.
//当开始和结束的点的x值相同时, 颜色渐变的方向为纵向变化
//当开始和结束的点的y值相同时, 颜色渐变的方向为横向变化
//其余的 颜色沿着对角线方向变化
gradientLayer1.startPoint = CGPointMake(0.2, 0);
gradientLayer1.endPoint = CGPointMake(0.8, 1);
[la addSublayer:gradientLayer1];
CAGradientLayer *gradientLayer2 = [CAGradientLayer layer];
gradientLayer2.frame = CGRectMake(width/2.0, width/2.0, width/2.0, height/2.0);
gradientLayer2.colors = @[(__bridge id)COLOR_WITH_RGB16(0x333333).CGColor, (__bridge id)COLOR_WITH_RGB16(0x666666).CGColor];
[gradientLayer2 setLocations:@[@0.3, @0.8,@1]];
gradientLayer2.startPoint = CGPointMake(0, 0);
gradientLayer2.endPoint = CGPointMake(0, 1);
[la addSublayer:gradientLayer2];
CAGradientLayer *gradientLayer3 = [CAGradientLayer layer];
gradientLayer3.frame = CGRectMake(0, width/2.0, width/2.0, height/2.0);
gradientLayer3.colors = @[(__bridge id)COLOR_WITH_RGB16(0x666666).CGColor, (__bridge id)COLOR_WITH_RGB16(0x999999).CGColor];
[gradientLayer3 setLocations:@[@0.2,@0.8]];
gradientLayer3.startPoint = CGPointMake(0.6, 1);
gradientLayer3.endPoint = CGPointMake(0.4, 0);
[la addSublayer:gradientLayer3];
CAGradientLayer *gradientLayer4 = [CAGradientLayer layer];
gradientLayer4.frame = CGRectMake(0, 0, width/2.0, height/2.0);
gradientLayer4.colors = @[(__bridge id)COLOR_WITH_RGB16(0x999999).CGColor, (__bridge id)[UIColor clearColor].CGColor];
gradientLayer4.startPoint = CGPointMake(0.5, 1);
gradientLayer4.endPoint = CGPointMake(0.5, 0);
[la addSublayer:gradientLayer4];
[la addSublayer:gradientLayer];
4.给背景添加遮罩层
la.mask = trackLayer;
5.做z轴旋转动画
CABasicAnimation* rotationAnimation;
rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation.toValue = [NSNumber numberWithFloat: -M_PI /3 ];
rotationAnimation.duration = 0.3;
rotationAnimation.cumulative = YES;
rotationAnimation.repeatCount = CGFLOAT_MAX;
rotationAnimation.removedOnCompletion = NO;
[gradientLayer addAnimation:rotationAnimation forKey:@"ss"];
Copyright © 2017年ZaneWangWang. All rights reserved.
持续更新中...
