CAGradientLayer的一些屬性解析
iOS中Layer的坐標系統:
效果:
- (void)viewDidLoad
{
? ? ? ? [super viewDidLoad];
? ? ? ? CAGradientLayer *colorLayer = [CAGradientLayer layer];
? ? ? ? colorLayer.frame? ? = (CGRect){CGPointZero, CGSizeMake(200, 200)};
? ? ? ? colorLayer.position = self.view.center;
? ? ? ? [self.view.layer addSublayer:colorLayer];
? ? ? ? // 顏色分配
? ? ? ? colorLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
? ? ? ? (__bridge id)[UIColor greenColor].CGColor,
? ? ? ? (__bridge id)[UIColor blueColor].CGColor];
? ? ? ? // 顏色分割線
? ? ? ? colorLayer.locations? = @[@(0.25), @(0.5), @(0.75)];
? ? ? ? // 起始點
? ? ? ? colorLayer.startPoint = CGPointMake(0, 0);
? ? ? ? // 結束點
? ? ? ? colorLayer.endPoint? = CGPointMake(1, 0);
}
顏色分配嚴格遵守Layer的坐標系統,locations,startPoint,endPoint都是以Layer坐標系統進行計算的.
而locations并不是表示顏色值所在位置,它表示的是顏色在Layer坐標系相對位置處要開始進行漸變顏色了.
CAGradientLayer 的這四個屬性 colors locations startPoint endPoint 都是可以進行動畫的哦.
附錄:
稍微復雜點的動畫效果
//
//? RootViewController.m
//
//? Copyright (c) 2014年 Y.X. All rights reserved.
//
#import "RootViewController.h"
#import "YXGCD.h"
@interface RootViewController ()
@property (nonatomic, strong) GCDTimer? *timer;
@end
@implementation RootViewController
- (void)viewDidLoad
{
? ? ? ? [super viewDidLoad];
? ? ? ? CAGradientLayer *colorLayer = [CAGradientLayer layer];
? ? ? ? colorLayer.backgroundColor = [UIColor blueColor].CGColor;
? ? ? ? colorLayer.frame? ? = (CGRect){CGPointZero, CGSizeMake(200, 200)};
? ? ? ? colorLayer.position = self.view.center;
? ? ? ? [self.view.layer addSublayer:colorLayer];
? ? ? ? // 顏色分配
? ? ? ? colorLayer.colors = @[(__bridge id)[UIColor cyanColor].CGColor,
? ? ? ? (__bridge id)[UIColor orangeColor].CGColor,
? ? ? ? (__bridge id)[UIColor magentaColor].CGColor];
? ? ? ? // 起始點
? ? ? ? colorLayer.startPoint = CGPointMake(0, 0);
? ? ? ? // 結束點?
? ? ? ? colorLayer.endPoint? = CGPointMake(1, 0);
? ? ? ? _timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
? ? ? ? [_timer event:^{
? ? ? ? ? ? ? ?static CGFloat test = - 0.1f;
? ? ? ? ? ? ? ?if (test >= 1.1)
? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ? ? ?test = - 0.1f;
? ? ? ? ? ? ? ? ? ? ? ?[CATransaction setDisableActions:YES];
? ? ? ? ? ? ? ? ? ? ? ?colorLayer.locations? = @[@(test), @(test + 0.05), @(test + 0.1)];
? ? ? ? ? ? ?}
? ? ? ? ? ? ?else
? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ? ?[CATransaction setDisableActions:NO];
? ? ? ? ? ? ? ? ? ? ?colorLayer.locations? = @[@(test), @(test + 0.05), @(test + 0.1)];
? ? ? ? ? ? ?}
? ? ? ? ? ? ?test += 0.1f;
?}?
timeInterval:NSEC_PER_SEC];
[_timer start];
}
@end
_timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
[_timer event:^{
static CGFloat test = - 0.1f;
if (test >= 1.1)
{
test = - 0.1f;
[CATransaction setDisableActions:NO];
colorLayer.locations? = @[@(test), @(test + 0.01), @(test + 0.011)];
}
else
{
[CATransaction setDisableActions:NO];
colorLayer.locations? = @[@(test), @(test + 0.01), @(test + 0.011)];
}
test += 0.1f;
} timeInterval:NSEC_PER_SEC];
[_timer start];
配合CAShapeLayer使用
//
//? RootViewController.m
//
//? Copyright (c) 2014年 Y.X. All rights reserved.
//
#import "RootViewController.h"
#import "YXGCD.h"
@interface RootViewController ()
@property (nonatomic, strong) GCDTimer? *timer;
@end
// 將常數轉換為度數
#define? DEGREES(degrees)? ((M_PI * (degrees))/ 180.f)
@implementation RootViewController
- (void)viewDidLoad
{
? ? ? ? [super viewDidLoad];
? ? ? ? self.view.backgroundColor = [UIColor blackColor];
? ? ? ? CAGradientLayer *colorLayer = [CAGradientLayer layer];
? ? ? ? colorLayer.backgroundColor = [UIColor blueColor].CGColor;
? ? ? ? colorLayer.frame? ? = (CGRect){CGPointZero, CGSizeMake(200, 200)};
? ? ? ? colorLayer.position = self.view.center;
? ? ? ? [self.view.layer addSublayer:colorLayer];
? ? ? ? // 顏色分配
? ? ? ?colorLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?(__bridge id)[UIColor whiteColor].CGColor,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?(__bridge id)[UIColor redColor].CGColor];
? ? ? ? colorLayer.locations? = @[@(-0.2), @(-0.1), @(0)];
? ? ? ? // 起始點
? ? ? ? colorLayer.startPoint = CGPointMake(0, 0);
? ? ? ? // 結束點
? ? ? ? colorLayer.endPoint? = CGPointMake(1, 0);
? ? ? ? CAShapeLayer *circle = [RootViewController LayerWithCircleCenter:CGPointMake(102, 100) ? ?radius:80 ? ?startAngle:DEGREES(0) ? ?endAngle:DEGREES(360) ? ?clockwise:YES ? ?lineDashPattern:nil];
? ? ? ? circle.strokeColor = [UIColor redColor].CGColor;
? ? ? ? [self.view.layer addSublayer:circle];
? ? ? ? circle.strokeEnd = 1.f;
? ? ? ? colorLayer.mask = circle;
? ? ? ? _timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
? ? ? ?[_timer event:^{?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?static int i = 0;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?if (i++ % 2 == 0)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CABasicAnimation* fadeAnim = [CABasicAnimation?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?animationWithKeyPath:@"locations"];
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?fadeAnim.fromValue = @[@(-0.2), @(-0.1), @(0)];
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?fadeAnim.toValue? = @[@(1.0), @(1.1), @(1.2)];
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?fadeAnim.duration? = 1.5;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?[colorLayer addAnimation:fadeAnim forKey:nil];
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? } timeInterval:NSEC_PER_SEC];
? ? ? ? ? ? ? [_timer start];
}
+ (CAShapeLayer *)LayerWithCircleCenter:(CGPoint)point
radius:(CGFloat)radius
startAngle:(CGFloat)startAngle
endAngle:(CGFloat)endAngle
clockwise:(BOOL)clockwise
lineDashPattern:(NSArray *)lineDashPattern
{
? ? ? ? ? ?CAShapeLayer *layer = [CAShapeLayer layer];
? ? ? ? ? ?// 貝塞爾曲線(創建一個圓)
? ? ? ? ? ?UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(0, 0)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?radius:radius ? startAngle:startAngle ? endAngle:endAngle ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?clockwise:clockwise];
? ? ? ? ? ?// 獲取path
? ? ? ? ? ?layer.path = path.CGPath;
? ? ? ? ? ?layer.position = point;
? ? ? ? ? ?// 設置填充顏色為透明
? ? ? ? ? ?layer.fillColor = [UIColor clearColor].CGColor;
? ? ? ? ? ?// 獲取曲線分段的方式
? ? ? ? ? if (lineDashPattern)
? ? ? ? ?{
? ? ? ? ? ? ? ? ? ?layer.lineDashPattern = lineDashPattern;
? ? ? ? ? }
? ? ? ? ? return layer;
}
@end
