練習實現效果:
一.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.
持續更新中...
