二.iOS贝塞尔曲线与CAGradientLayer详解

练习实现效果:

二.iOS贝塞尔曲线与CAGradientLayer详解_第1张图片
创建一个环形渐变并左旋转动画

一.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的坐标系统如下图:

二.iOS贝塞尔曲线与CAGradientLayer详解_第2张图片
layer坐标系统

其次就是理解这两个属性的效果如下图:假设startPoint(0.75,0)  endPoint(1,0.75)


二.iOS贝塞尔曲线与CAGradientLayer详解_第3张图片
渐变startPoint、endPoint理解

@property(copy) NSString *type;

渐变梯度,目前只有一种kCAGradientLayerAxial

二.结合CAShapeLayer和CABasicAnimation做的示例练习

效果就是上边效果图提到创建一个环形渐变并做旋转动画

首先分析,CAGradientLayer作出的渐变效果是线性的,因此可以考虑将环形渐变分为四块如下图分析:

二.iOS贝塞尔曲线与CAGradientLayer详解_第4张图片
实现分析图

代码实现:

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.

持续更新中...

你可能感兴趣的:(二.iOS贝塞尔曲线与CAGradientLayer详解)