参考文档1
参考文档2
参考文档3
参考文档4
参考文档5
参考文档6
CAShapeLayer
CAShapeLayer 及 CAGradientLayer 是CALayer 两个重要的类。作为开发小学生，认真参考了以上所有文档，码出来只作标记，便于回顾。
CAShapeLayer是通过矢量图形来绘制的图层子类。
只需要指定颜色，线宽，用CGPath指定路径，CAShapeLayer会通过GPU自动渲染， 节省性能,渲染速度快，不占内存，不会被图层边界剪裁,不会出现像素化。
DrawRect:属于CoreGraphic框架，占用CPU,消耗性能。
UIBeziePath只提供路径，具体样式由shape属性决定
展示两个效果
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(200 *0.25, 200*0.5)];
[path addLineToPoint:CGPointMake(200 * 0.45, 200 *0.70)];
[path addLineToPoint:CGPointMake(200 * 0.75, 200 *0.3)];
CAShapeLayer *layer = [CAShapeLayer layer];
layer.path = path.CGPath;
layer.strokeColor = [UIColor redColor].CGColor;
layer.strokeStart = 0;
layer.lineWidth = 15;
layer.lineCap = kCALineCapRound;
layer.lineJoin = kCALineJoinRound;
layer.fillColor = nil;
[self.bgView.layer addSublayer:layer];
CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
basicAnimation.duration = 0.5;
basicAnimation.fromValue = @0;
basicAnimation.toValue = @1;
[layer addAnimation:basicAnimation forKey:nil];
}
- (void)animationWithSlider{
self.slider.bottom = self.bgView.top- 10;
self.slider.width = self.bgView.width;
self.slider.centerX = self.bgView.centerX;
[self.view addSubview:self.slider];
//将原先正方形的橙色背景变成柱状
CAShapeLayer *layer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 50, 200) cornerRadius:25];
layer.lineWidth = 2;
layer.lineCap = kCALineCapRound;
layer.lineJoin = kCALineJoinRound;
layer.path = path.CGPath;
layer.strokeColor = [UIColor grayColor].CGColor;
self.bgView.layer.mask = layer;
}
- (void)valueChangeAction:(UISlider*)sender{
NSArray *array = [self.bgView.layer sublayers];
if (array) {
NSLog(@"%ld",array.count);
for (CALayer *layer in array) {
[layer removeFromSuperlayer];
}
}
CAShapeLayer *layer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(25, 175)]; //总高200,线宽40，起始点各方向延长20
[path addLineToPoint:CGPointMake(25, 25)];//总高200，线宽40，终点各方向延长20
layer.lineWidth = 40;
layer.lineCap = kCALineCapRound;
layer.strokeColor = [UIColor redColor].CGColor;
layer.path = path.CGPath;
layer.strokeStart = 0;
layer.strokeEnd = sender.value;
[self.bgView.layer addSublayer:layer];
}
CAGradientLayer
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.bgView];
//[self animationWithSlider];
_gradientLayer = [CAGradientLayer layer];
_gradientLayer.frame = self.bgView.bounds;
[self.bgView.layer addSublayer:_gradientLayer];
//设定变色广向
_gradientLayer.startPoint = CGPointMake(0, 0);
_gradientLayer.endPoint = CGPointMake(1, 1);
//locations并不是表示颜色值所在位置,
//它表示的是颜色在Layer坐标系相对位置处要开始进行渐变颜色了.
_gradientLayer.locations = @[@(0.25),@(0.5),@(0.75)];
//设定定时器
self.timer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(change:) userInfo:nil repeats:YES];
}
-(void)change:(NSTimer*)timer{
//定时改变颜色
self.gradientLayer.colors = @[(__bridge id)[UIColor colorWithRed:arc4random() % 255 / 255.0
green:arc4random() % 255 / 255.0
blue:arc4random() % 255 / 255.0
alpha:1.0].CGColor,
(__bridge id)[UIColor colorWithRed:arc4random() % 255 / 255.0
green:arc4random() % 255 / 255.0
blue:arc4random() % 255 / 255.0
alpha:1.0].CGColor,
(__bridge id)[UIColor colorWithRed:arc4random() % 255 / 255.0
green:arc4random() % 255 / 255.0
blue:arc4random() % 255 / 255.0
alpha:1.0].CGColor];
//定时改变分割点
self.gradientLayer.locations = @[@(arc4random() % 10 / 10.0f),@(arc4random() % 10 / 10.0f), @(1.0f)];
}
示例
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.bgView];
//[self animationWithSlider];
_gradientLayer = [CAGradientLayer layer];
_gradientLayer.frame = self.bgView.bounds;
[self.bgView.layer addSublayer:_gradientLayer];
//设定变色广向
_gradientLayer.startPoint = CGPointMake(0, 0);
_gradientLayer.endPoint = CGPointMake(1, 0);
_gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
(__bridge id)[UIColor whiteColor].CGColor,
(__bridge id)[UIColor redColor].CGColor
];
//locations并不是表示颜色值所在位置,
//它表示的是颜色在Layer坐标系相对位置处要开始进行渐变颜色了.
_gradientLayer.locations = @[@(-2),@(-1),@(0)];
CAShapeLayer *layer = [CAShapeLayer layer];
layer.path =[UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:50 startAngle:0 endAngle:2*M_PI clockwise:YES].CGPath;
layer.strokeColor = [UIColor redColor].CGColor;
layer.strokeStart = 0;
layer.strokeEnd = 1;
layer.lineWidth = 5;
layer.fillColor = [UIColor clearColor].CGColor;
[self.bgView.layer addSublayer:layer];
_gradientLayer.mask = layer;
//设定定时器
self.timer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(changeAction:) userInfo:nil repeats:YES];
}
- (void)changeAction:(NSTimer*)timer{
[self.gradientLayer removeAllAnimations];
CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"locations"];
basicAnimation.duration = 0.8;
basicAnimation.fromValue = @[@(-2),@(-1),@(0)];
basicAnimation.toValue = @[@(1),@(1.2),@(1.5)];
[self.gradientLayer addAnimation:basicAnimation forKey:nil];
}
