練習(xí)實(shí)現(xiàn)效果:
一.CAGradientLayer屬性
@property(nullable, copy) NSArray *colors;
此數(shù)組存放需要漸變的顏色的CGColorRef對(duì)象。可以做成動(dòng)畫(huà)托猩。
@property(nullable, copy) NSArray*locations;
一個(gè)可選的NSNumber對(duì)象的數(shù)組罪裹，定義每個(gè)對(duì)象的位置在范圍0,1中但指，漸變作為一個(gè)值停止抵恋。值必須單調(diào)遞增。如果給定一個(gè)nil數(shù)組茄菊，則假設(shè)在0,1范圍內(nèi)均勻分布诵棵】衮迹可以做成動(dòng)畫(huà)。
@property CGPoint startPoint;
@property CGPoint endPoint;
當(dāng)繪制到圖層的時(shí)候履澳，漸變的起始點(diǎn)和結(jié)束點(diǎn),范圍都在0~1之間,都可以做成動(dòng)畫(huà),詳細(xì)介紹如下
這個(gè)理需要先介紹一下layer的坐標(biāo)系統(tǒng)如下圖:
其次就是理解這兩個(gè)屬性的效果如下圖:假設(shè)startPoint(0.75,0)? endPoint(1,0.75)
@property(copy) NSString *type;
漸變梯度,目前只有一種kCAGradientLayerAxial
二.結(jié)合CAShapeLayer和CABasicAnimation做的示例練習(xí)
效果就是上邊效果圖提到創(chuàng)建一個(gè)環(huán)形漸變并做旋轉(zhuǎn)動(dòng)畫(huà)
首先分析,CAGradientLayer作出的漸變效果是線性的,因此可以考慮將環(huán)形漸變分為四塊如下圖分析:
代碼實(shí)現(xiàn):
1.首先創(chuàng)建一層背景l(fā)ayer
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.創(chuàng)建背景圓環(huán)作
//創(chuàng)建背景圓環(huán)
CAShapeLayer *trackLayer = [CAShapeLayer layer];
trackLayer.frame = la.bounds;
//清空填充色
trackLayer.fillColor = [UIColor clearColor].CGColor;
//設(shè)置畫(huà)筆顏色 即圓環(huán)背景色
trackLayer.strokeColor =? [UIColor colorWithRed:170/255.0 green:210/255.0 blue:254/255.0 alpha:1].CGColor;
trackLayer.lineWidth = 10;
//設(shè)置畫(huà)筆路徑
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.創(chuàng)建四個(gè)區(qū)域的漸變:
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屬性，他們決定了漸變的方向距贷。這兩個(gè)參數(shù)是以單位坐標(biāo)系進(jìn)行的定義柄冲，所以左上角坐標(biāo)是{0, 0}，右下角坐標(biāo)是{1, 1}
//startPoint和pointEnd 分別指定顏色變換的起始位置和結(jié)束位置.
//當(dāng)開(kāi)始和結(jié)束的點(diǎn)的x值相同時(shí), 顏色漸變的方向?yàn)榭v向變化
//當(dāng)開(kāi)始和結(jié)束的點(diǎn)的y值相同時(shí), 顏色漸變的方向?yàn)闄M向變化
//其余的 顏色沿著對(duì)角線方向變化
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軸旋轉(zhuǎn)動(dòng)畫(huà)
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.
持續(xù)更新中...
