參考文檔1
參考文檔2
參考文檔3
參考文檔4
參考文檔5
參考文檔6
CAShapeLayer
CAShapeLayer 及 CAGradientLayer 是CALayer 兩個重要的類履婉。作為開發(fā)小學(xué)生斟览，認(rèn)真參考了以上所有文檔，碼出來只作標(biāo)記已烤，便于回顧。
CAShapeLayer是通過矢量圖形來繪制的圖層子類胯究。
只需要指定顏色，線寬臣嚣，用CGPath指定路徑费韭，CAShapeLayer會通過GPU自動渲染庭瑰， 節(jié)省性能,渲染速度快，不占內(nèi)存督暂，不會被圖層邊界剪裁,不會出現(xiàn)像素化穷吮。
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];
//設(shè)定變色廣向
_gradientLayer.startPoint = CGPointMake(0, 0);
_gradientLayer.endPoint = CGPointMake(1, 1);
//locations并不是表示顏色值所在位置,
//它表示的是顏色在Layer坐標(biāo)系相對位置處要開始進行漸變顏色了.
_gradientLayer.locations = @[@(0.25),@(0.5),@(0.75)];
//設(shè)定定時器
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];
//設(shè)定變色廣向
_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坐標(biāo)系相對位置處要開始進行漸變顏色了.
_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;
//設(shè)定定時器
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];
}
