IOS Core Animation Advanced Techniques的學習筆記(五)

第六章：Specialized Layers

 

類別	用途
CAEmitterLayer	用於實現基於Core Animation粒子發射系統。發射器層對象控制粒子的生成和起源
CAGradientLayer	用於繪製一個顏色漸變填充圖層的形狀（全部圓角矩形邊界內的部分）
CAEAGLLayer/CAOpenGLLayer	用於設置須要使用OpenGL ES（iOS）或OpenGL（OS X）繪製的內容與內容儲備。
CAReplicatorLayer	當你想自動生成一個或多個子層的拷貝。複製器爲你生成拷貝並使用你指定的屬性值以修改複製品的外觀和屬性。
CAScrollLayer	用於管理由多個子區域組成的大的可滾動區域
CAShaperLayer	用於繪製三次貝塞爾曲線。CAShaperLayer對繪製基於路徑的形狀很是有幫助。由於CAShaperLayer老是生成一個最新的路徑。而若是將路徑畫在圖層儲備中，一旦圖層被縮放，形狀就變形了。
CATextLayer	用於渲染一個無格式或屬性文本字符
CATransformLayer	用於渲染一個真3D的圖層層級。而不是由其餘圖層類實現的2D圖層層級。
QCCompositionLayer	用於渲染一個Quartz組件元素（僅在OS X中有效）

 

CAShapeLayer

 

使用CGPath繪製矢量圖，UIBezierPath類能夠建立基於矢量的路徑，此類是Core Graphics框架關於path的一個封裝。它能夠定義簡單的形狀，如橢圓或者矩形，或者有多個直線和曲線段組成的形狀。

 

源碼在這裏下載：http://www.informit.com/title/9780133440751

 

例子6.1

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *containerView;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    //create path
    UIBezierPath *path = [[UIBezierPath alloc] init];
    [path moveToPoint:CGPointMake(175, 100)];
    [path addArcWithCenter:CGPointMake(150, 100) radius:25 startAngle:0 endAngle:2*M_PI clockwise:YES];
    [path moveToPoint:CGPointMake(150, 125)];
    [path addLineToPoint:CGPointMake(150, 175)];
    [path addLineToPoint:CGPointMake(125, 225)];
    [path moveToPoint:CGPointMake(150, 175)];
    [path addLineToPoint:CGPointMake(175, 225)];
    [path moveToPoint:CGPointMake(100, 150)];
    [path addLineToPoint:CGPointMake(200, 150)];

    //create shape layer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.lineWidth = 5;
    shapeLayer.lineJoin = kCALineJoinRound;
    shapeLayer.lineCap = kCALineCapRound;
    shapeLayer.path = path.CGPath;

    //add it to our view
    [self.containerView.layer addSublayer:shapeLayer];
}

@end

 

 

先說說CAShapeLayer的屬性設置

 

1. 線顏色

@property CGColorRef strokeColor

 

2. 填充色

@property CGColorRef fillColor

3. 填充規則

@property(copy) NSString *fillRule

修改例子6.1

默認值kCAFillRuleNonZero的狀況

- (void)viewDidLoad
{
    [super viewDidLoad];

    //create path
    UIBezierPath *path = [[UIBezierPath alloc] init];
    [path moveToPoint:CGPointMake(200, 150)];
    [path addArcWithCenter:CGPointMake(150, 150) radius:50 startAngle:0 endAngle:2*M_PI clockwise:YES];
    [path moveToPoint:CGPointMake(250, 150)];
    [path addArcWithCenter:CGPointMake(150, 150) radius:100 startAngle:0 endAngle:2*M_PI clockwise:YES];

    //create shape layer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    shapeLayer.fillColor = [UIColor blueColor].CGColor;
    shapeLayer.fillRule = kCAFillRuleNonZero;
    //shapeLayer.fillRule = kCAFillRuleEvenOdd;

    shapeLayer.lineWidth = 5;
    shapeLayer.lineJoin = kCALineJoinBevel;
    shapeLayer.lineCap = kCALineCapRound;
    shapeLayer.path = path.CGPath;

    //add it to our view
    [self.containerView.layer addSublayer:shapeLayer];
}

再修改

- (void)viewDidLoad
{
    [super viewDidLoad];

    //create path
    UIBezierPath *path = [[UIBezierPath alloc] init];
    [path moveToPoint:CGPointMake(200, 150)];
    [path addArcWithCenter:CGPointMake(150, 150) radius:50 startAngle:0 endAngle:2*M_PI clockwise:YES];
    [path moveToPoint:CGPointMake(250, 150)];
    [path addArcWithCenter:CGPointMake(150, 150) radius:100 startAngle:0 endAngle:-2*M_PI clockwise:NO];

    //create shape layer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    shapeLayer.fillColor = [UIColor blueColor].CGColor;
    shapeLayer.fillRule = kCAFillRuleNonZero;
    //shapeLayer.fillRule = kCAFillRuleEvenOdd;

    shapeLayer.lineWidth = 5;
    shapeLayer.lineJoin = kCALineJoinBevel;
    shapeLayer.lineCap = kCALineCapRound;
    shapeLayer.path = path.CGPath;

    //add it to our view
    [self.containerView.layer addSublayer:shapeLayer];
}

 

kCAFillRuleEvenOdd的狀況

修改代碼

- (void)viewDidLoad
{
    [super viewDidLoad];

    //create path
    UIBezierPath *path = [[UIBezierPath alloc] init];
    [path moveToPoint:CGPointMake(200, 150)];
    [path addArcWithCenter:CGPointMake(150, 150) radius:50 startAngle:0 endAngle:2*M_PI clockwise:YES];
    [path moveToPoint:CGPointMake(250, 150)];
    [path addArcWithCenter:CGPointMake(150, 150) radius:100 startAngle:0 endAngle:2*M_PI clockwise:YES];

    //create shape layer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    shapeLayer.fillColor = [UIColor blueColor].CGColor;
    //shapeLayer.fillRule = kCAFillRuleNonZero;
    shapeLayer.fillRule = kCAFillRuleEvenOdd;

    shapeLayer.lineWidth = 5;
    shapeLayer.lineJoin = kCALineJoinBevel;
    shapeLayer.lineCap = kCALineCapRound;
    shapeLayer.path = path.CGPath;

    //add it to our view
    [self.containerView.layer addSublayer:shapeLayer];
}

 

一樣修改

- (void)viewDidLoad
{
    [super viewDidLoad];

    //create path
    UIBezierPath *path = [[UIBezierPath alloc] init];
    [path moveToPoint:CGPointMake(200, 150)];
    [path addArcWithCenter:CGPointMake(150, 150) radius:50 startAngle:0 endAngle:2*M_PI clockwise:YES];
    [path moveToPoint:CGPointMake(250, 150)];
    [path addArcWithCenter:CGPointMake(150, 150) radius:100 startAngle:0 endAngle:-2*M_PI clockwise:NO];

    //create shape layer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    shapeLayer.fillColor = [UIColor blueColor].CGColor;
    //shapeLayer.fillRule = kCAFillRuleNonZero;
    shapeLayer.fillRule = kCAFillRuleEvenOdd;

    shapeLayer.lineWidth = 5;
    shapeLayer.lineJoin = kCALineJoinBevel;
    shapeLayer.lineCap = kCALineCapRound;
    shapeLayer.path = path.CGPath;

    //add it to our view
    [self.containerView.layer addSublayer:shapeLayer];
}

繼續爲了看清奇偶的效果，畫3個同方向圓圈

 

- (void)viewDidLoad
{
    [super viewDidLoad];

    //create path
    UIBezierPath *path = [[UIBezierPath alloc] init];
    [path moveToPoint:CGPointMake(200, 150)];
    [path addArcWithCenter:CGPointMake(150, 150) radius:50 startAngle:0 endAngle:2*M_PI clockwise:YES];
    [path moveToPoint:CGPointMake(250, 150)];
    [path addArcWithCenter:CGPointMake(150, 150) radius:100 startAngle:0 endAngle:2*M_PI clockwise:YES];
    [path moveToPoint:CGPointMake(300, 150)];
    [path addArcWithCenter:CGPointMake(150, 150) radius:150 startAngle:0 endAngle:2*M_PI clockwise:YES];

    //create shape layer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    shapeLayer.fillColor = [UIColor blueColor].CGColor;
    //shapeLayer.fillRule = kCAFillRuleNonZero;
    shapeLayer.fillRule = kCAFillRuleEvenOdd;

    shapeLayer.lineWidth = 5;
    shapeLayer.lineJoin = kCALineJoinBevel;
    shapeLayer.lineCap = kCALineCapRound;
    shapeLayer.path = path.CGPath;

    //add it to our view
    [self.containerView.layer addSublayer:shapeLayer];
}

以上咱們應該清楚不一樣的規則了吧，挪用別人的描述

 

 

nonzero字面意思是「非零」。按該規則，要判斷一個點是否在圖形內，從該點做任意方向的一條射線，而後檢測射線與圖形路徑的交點狀況。從0開始計數，路徑從左向右穿過射線則計數加1，從右向左穿過射線則計數減1。得出計數結果後，若是結果是0，則認爲點在圖形外部，不然認爲在內部。下圖演示了nonzero規則:

 

evenodd字面意思是「奇偶」。按該規則，要判斷一個點是否在圖形內，從該點做任意方向的一條射線，而後檢測射線與圖形路徑的交點的數量。若是結果是奇數則認爲點在內部，是偶數則認爲點在外部。下圖演示了evenodd 規則:

 

4. 線端點類型

@property(copy) NSString *lineCap

5. 線鏈接類型

@property(copy) NSString *lineJoin

 

6. 線寬

@property CGFloat lineWidth

7. 線型模板

@property(copy) NSArray *lineDashPattern

這是一個NSNumber的數組，索引從1開始記，奇數位數值表示實線長度，偶數位數值表示空白長度

8. 線型模板的起始位置

@property CGFloat lineDashPhase

修改例子6.1，爲了看得更清楚，把lineCap的設置註釋，，本身看看不註釋是什麼結果

- (void)viewDidLoad
{
    [super viewDidLoad];

    //create path
    UIBezierPath *path = [[UIBezierPath alloc] init];
    [path moveToPoint:CGPointMake(175, 100)];
    [path addArcWithCenter:CGPointMake(150, 100) radius:25 startAngle:0 endAngle:2*M_PI clockwise:YES];
    [path moveToPoint:CGPointMake(150, 125)];
    [path addLineToPoint:CGPointMake(150, 175)];
    [path addLineToPoint:CGPointMake(125, 225)];
    [path moveToPoint:CGPointMake(150, 175)];
    [path addLineToPoint:CGPointMake(175, 225)];
    [path moveToPoint:CGPointMake(100, 150)];
    [path addLineToPoint:CGPointMake(200, 150)];

    //create shape layer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;

    shapeLayer.lineWidth = 5;
    shapeLayer.lineDashPattern = [NSArray arrayWithObjects:[NSNumber numberWithInt:20], [NSNumber numberWithInt:10], [NSNumber numberWithInt:10], [NSNumber numberWithInt:2], nil nil];
    //shapeLayer.lineDashPhase = 15;
    shapeLayer.lineJoin = kCALineJoinBevel;
    //shapeLayer.lineCap = kCALineCapRound;
//    shapeLayer.strokeStart = 0.1;
//    shapeLayer.strokeEnd = 0.6;
    shapeLayer.path = path.CGPath;

    //add it to our view
    [self.containerView.layer addSublayer:shapeLayer];
}

再修改lineDashPhase值=15

 

9. 最大斜接長度。

 

@property CGFloat miterLimit

 

斜接長度指的是在兩條線交匯處內角和外角之間的距離。

只有lineJoin屬性爲kCALineJoinMiter時miterLimit纔有效

邊角的角度越小，斜接長度就會越大。

爲了不斜接長度過長，咱們可使用 miterLimit 屬性。

若是斜接長度超過 miterLimit 的值，邊角會以 lineJoin的 "bevel"即kCALineJoinBevel類型來顯示

 

 

 

10. 部分繪線

@property CGFloat strokeStart
@property CGFloat strokeEnd

都是0.0~1.0的取值範圍

具體看修改例子6.1

- (void)viewDidLoad
{
    [super viewDidLoad];

    //create path
    UIBezierPath *path = [[UIBezierPath alloc] init];
    [path moveToPoint:CGPointMake(175, 100)];
    [path addArcWithCenter:CGPointMake(150, 100) radius:25 startAngle:0 endAngle:2*M_PI clockwise:YES];
    [path moveToPoint:CGPointMake(150, 125)];
    [path addLineToPoint:CGPointMake(150, 175)];
    [path addLineToPoint:CGPointMake(125, 225)];
    [path moveToPoint:CGPointMake(150, 175)];
    [path addLineToPoint:CGPointMake(175, 225)];
    [path moveToPoint:CGPointMake(100, 150)];
    [path addLineToPoint:CGPointMake(200, 150)];

    //create shape layer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;

    shapeLayer.lineWidth = 5;
    //shapeLayer.lineDashPattern = [NSArray arrayWithObjects:[NSNumber numberWithInt:20], [NSNumber numberWithInt:10], [NSNumber numberWithInt:10], [NSNumber numberWithInt:2], nil];
    //shapeLayer.lineDashPhase = 15;
    shapeLayer.lineJoin = kCALineJoinBevel;
    shapeLayer.lineCap = kCALineCapRound;
    shapeLayer.strokeStart = 0.1;
    shapeLayer.strokeEnd = 0.6;
    shapeLayer.path = path.CGPath;

    //add it to our view
    [self.containerView.layer addSublayer:shapeLayer];
}

 

 

UIBezierPath貝塞爾曲線的經常使用繪圖方法

 

1. 矩形

+ (UIBezierPath *)bezierPathWithRect:(CGRect)rect

2. 矩形內切橢圓

+ (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect

3. 圓角矩形

+ (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius

4. 可設置的圓角矩形

+ (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii

 

corners有如下幾種類型：

   UIRectCornerTopLeft,

   UIRectCornerTopRight,

   UIRectCornerBottomLeft,

   UIRectCornerBottomRight,

   UIRectCornerAllCorners

 

cornerRadii表示的是四個圓角拼成的橢圓的長、短半徑尺寸。

 

5. 圓弧

+ (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise

 

 

如下須要配合moveToPoint使用

- (void)moveToPoint:(CGPoint)point

 

6. 直線

- (void)addLineToPoint:(CGPoint)point

7. 曲線

- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2

 

8. 二元曲線

- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint

UIBezierPath的屬性設置(這些屬性在使用CAShapeLayer時，只遵循CAShapeLayer的設置)

1. 線寬

@property(nonatomic) CGFloat lineWidth

 

2. 端點類型

@property(nonatomic) CGLineCap lineCapStyle

 

3. 鏈接類型

@property(nonatomic) CGLineJoin lineJoinStyle

 

 

4. 設置線型

- (void)setLineDash:(const CGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase

pattern：C類型的線型數據。如：CGFloat dashStyle[] = { 1.0f, 2.0f };

count：pattern中的數據個數
phase: 開始畫線型的起始位置

其餘的我在這裏就很少說了

 

CATextLayer

 

例子6.2

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *labelView;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    //create a text layer
    CATextLayer *textLayer = [CATextLayer layer];
    textLayer.frame = self.labelView.bounds;
    [self.labelView.layer addSublayer:textLayer];

    //uncomment the line below to fix pixelation on Retina screens
    //textLayer.contentsScale = [UIScreen mainScreen].scale;

    //set text attributes
    textLayer.foregroundColor = [UIColor blackColor].CGColor;
    textLayer.alignmentMode = kCAAlignmentJustified;
    //textLayer.contentsScale = 1;
    textLayer.wrapped = YES;

    //choose a font
    UIFont *font = [UIFont systemFontOfSize:15];

    //set layer font
    CFStringRef fontName = (__bridge CFStringRef)font.fontName;
    CGFontRef fontRef = CGFontCreateWithFontName(fontName);
    textLayer.font = fontRef;
    textLayer.fontSize = font.pointSize;
    CGFontRelease(fontRef);

    //choose some text
    NSString *text = @"Lorem ipsum dolor sit amet, consectetur adipiscing \
    elit. Quisque massa arcu, eleifend vel varius in, facilisis pulvinar \
    leo. Nunc quis nunc at mauris pharetra condimentum ut ac neque. Nunc \
    elementum, libero ut porttitor dictum, diam odio congue lacus, vel \
    fringilla sapien diam at purus. Etiam suscipit pretium nunc sit amet \
    lobortis";

    //set layer text
    textLayer.string = text;
}

@end

仔細看文字周圍很模糊，解決這個問題須要設置contentsScale

 

修改「textLayer.contentsScale = [UIScreen mainScreen].scale;」

 

 

Rich Text

 

例子6.3

代碼不貼了

 

CATextLayer also renders much faster than UILabel. It’s a little-known fact that on iOS6 and earlier,UILabel actually uses WebKit to do its text drawing, which carries a significant performance overhead when you are drawing a lot of text.CATextLayer uses Core Text and is significantlyfaster.

例子6.4使用layer實現的label，有興趣的完善一下

 

 

CATransformLayer

 

例子6.5

代碼不貼了

 

修改一下，能夠實現簡單的拖動旋轉(只是試驗代碼)

@interface ViewController ()
{
    CGPoint startPoint;

    CATransformLayer *s_Cube;

    float pix, piy;
}

@property (nonatomic, weak) IBOutlet UIView *containerView;

@end

@implementation ViewController

- (CALayer *)faceWithTransform:(CATransform3D)transform
{
    //create cube face layer
    CALayer *face = [CALayer layer];
    face.frame = CGRectMake(-50, -50, 100, 100);

    //apply a random color
    CGFloat red = (rand() / (double)INT_MAX);
    CGFloat green = (rand() / (double)INT_MAX);
    CGFloat blue = (rand() / (double)INT_MAX);
    face.backgroundColor = [UIColor colorWithRed:red
                                           green:green
                                            blue:blue
                                           alpha:1.0].CGColor;

    //apply the transform and return
    face.transform = transform;
    return face;
}

- (CALayer *)cubeWithTransform:(CATransform3D)transform
{
    //create cube layer
    CATransformLayer *cube = [CATransformLayer layer];

    //add cube face 1
    CATransform3D ct = CATransform3DMakeTranslation(0, 0, 50);
    [cube addSublayer:[self faceWithTransform:ct]];

    //add cube face 2
    ct = CATransform3DMakeTranslation(50, 0, 0);
    ct = CATransform3DRotate(ct, M_PI_2, 0, 1, 0);
    [cube addSublayer:[self faceWithTransform:ct]];

    //add cube face 3
    ct = CATransform3DMakeTranslation(0, -50, 0);
    ct = CATransform3DRotate(ct, M_PI_2, 1, 0, 0);
    [cube addSublayer:[self faceWithTransform:ct]];

    //add cube face 4
    ct = CATransform3DMakeTranslation(0, 50, 0);
    ct = CATransform3DRotate(ct, -M_PI_2, 1, 0, 0);
    [cube addSublayer:[self faceWithTransform:ct]];

    //add cube face 5
    ct = CATransform3DMakeTranslation(-50, 0, 0);
    ct = CATransform3DRotate(ct, -M_PI_2, 0, 1, 0);
    [cube addSublayer:[self faceWithTransform:ct]];

    //add cube face 6
    ct = CATransform3DMakeTranslation(0, 0, -50);
    ct = CATransform3DRotate(ct, M_PI, 0, 1, 0);
    [cube addSublayer:[self faceWithTransform:ct]];

    //center the cube layer within the container
    CGSize containerSize = self.containerView.bounds.size;
    cube.position = CGPointMake(containerSize.width / 2.0,
                                containerSize.height / 2.0);

    //apply the transform and return
    cube.transform = transform;
    return cube;
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    //set up the perspective transform
    CATransform3D pt = CATransform3DIdentity;
    pt.m34 = -1.0 / 500.0;
    self.containerView.layer.sublayerTransform = pt;

    //set up the transform for cube 1 and add it
    CATransform3D c1t = CATransform3DIdentity;
    c1t = CATransform3DTranslate(c1t, -100, 0, 0);
    CALayer *cube1 = [self cubeWithTransform:c1t];
    s_Cube = (CATransformLayer *)cube1;
    [self.containerView.layer addSublayer:cube1];

    //set up the transform for cube 2 and add it
    CATransform3D c2t = CATransform3DIdentity;
    c2t = CATransform3DTranslate(c2t, 100, 0, 0);
    c2t = CATransform3DRotate(c2t, -M_PI_4, 1, 0, 0);
    c2t = CATransform3DRotate(c2t, -M_PI_4, 0, 1, 0);
    CALayer *cube2 = [self cubeWithTransform:c2t];
    [self.containerView.layer addSublayer:cube2];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];

    startPoint = [touch locationInView:self.view];
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];

    CGPoint currentPosition = [touch locationInView:self.view];

    CGFloat deltaX = startPoint.x - currentPosition.x;

    CGFloat deltaY = startPoint.y - currentPosition.y;

    CATransform3D c1t = CATransform3DIdentity;
    c1t = CATransform3DTranslate(c1t, -100, 0, 0);
    c1t = CATransform3DRotate(c1t, pix+M_PI_2*deltaY/100, 1, 0, 0);
    c1t = CATransform3DRotate(c1t, piy-M_PI_2*deltaX/100, 0, 1, 0);

    s_Cube.transform = c1t;
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];

    CGPoint currentPosition = [touch locationInView:self.view];

    CGFloat deltaX = startPoint.x - currentPosition.x;

    CGFloat deltaY = startPoint.y - currentPosition.y;

    pix = M_PI_2*deltaY/100;
    piy = -M_PI_2*deltaX/100;
}

@end

 

 

 

 

CAGradientLayer

 

產平生滑過渡色，

 

例子6.6

interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *containerView;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    //create gradient layer and add it to our container view
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = self.containerView.bounds;
    [self.containerView.layer addSublayer:gradientLayer];

    //set gradient colors
    gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
                             (__bridge id)[UIColor blueColor].CGColor];

    //set gradient start and end points
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(1, 1);
}

@end

 

CAGradientLayer的屬性設置

1. 類型

@property(copy) NSString *type

目前只有NSString * const kCAGradientLayerAxial
即線性梯度變化

2. 顏色

@property(copy) NSArray *colors

3. 位置參數

@property(copy) NSArray *locations

顏色的區間分佈，locations的數組長度和colors一致， 取值範圍(0, 1)，並且必須是單調遞增的

 

修改例子6.6，增長

<p class="p1">    gradientLayer.<span class="s1">locations</span> = <span class="s2">@[</span>[<span class="s1">NSNumber</span> <span class="s3">numberWithFloat</span>:<span class="s2">0.0</span>], [<span class="s1">NSNumber</span> <span class="s3">numberWithFloat</span>:<span class="s2">0.2</span>]<span class="s2">]</span>;</p>

gradientLayer.locations = @[[NSNumber numberWithFloat:0.5], [NSNumber numberWithFloat:0.7]];

 

4. startPoint和endPoint

@property CGPoint startPoint, endPoint;

取值都是相對於layer的bounds的。startPoint默認值爲(0.5, 0)，endPoint默認值爲(0.5, 1)

 

修改例子6.6

gradientLayer.startPoint 分別設爲 CGPointMake(0, 0); 

 

  CGPointMake(0.25, 0); 

 

  CGPointMake(0.5, 0); 

 

  CGPointMake(0.75, 0); 

 

  CGPointMake(1, 0); 

 

 

綜合修改例子6.6

- (void)viewDidLoad
{
    [super viewDidLoad];

    //create gradient layer and add it to our container view
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = self.containerView.bounds;
    [self.containerView.layer addSublayer:gradientLayer];

    //set gradient colors
    gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
                             (__bridge id)[UIColor blueColor].CGColor];

    gradientLayer.locations = @[[NSNumber numberWithFloat:0.5], [NSNumber numberWithFloat:0.7]];

    //set gradient start and end points
    gradientLayer.startPoint = CGPointMake(0.75, 0.0);
    gradientLayer.endPoint = CGPointMake(1.0, 1.0);
}

 

從以上能夠看出startPoint和endPoint詩表示的漸變方向，locations是漸變區域。

也能夠看出locations的取值是相對於startPoint和endPoint線段的。

 

在網上找的描述讓我非常不能理解

 

 

 

CAReplicatorLayer

 

例子6.8，修改一下看得更清楚些

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *containerView;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    //create a replicator layer and add it to our view
    CAReplicatorLayer *replicator = [CAReplicatorLayer layer];
    replicator.frame = self.containerView.bounds;
    [self.containerView.layer addSublayer:replicator];

    //configure the replicator
    replicator.instanceCount = 20;

    //apply a transform for each instance
    CATransform3D transform = CATransform3DIdentity;
    transform = CATransform3DTranslate(transform, 0, -10, 0);
    transform = CATransform3DRotate(transform, M_PI / 10.0, 0, 0, 1);
    transform = CATransform3DTranslate(transform, 0, 10, 0);
    replicator.instanceTransform = transform;

    //apply a color shift for each instance
    replicator.instanceBlueOffset = -0.1;
    replicator.instanceGreenOffset = -0.1;

    //create a sublayer and place it inside the replicator
    CALayer *layer = [CALayer layer];
    layer.frame = CGRectMake(137.5f, 25.0f, 25.0f, 25.0f);
    layer.backgroundColor = [UIColor whiteColor].CGColor;
    [replicator addSublayer:layer];
}

@end

CAReplicatorLayer應用最多的多是倒影了，下面的連接是個很好的圖片倒影例子

https://github.com/nicklockwood/ReflectionView

 

 

後面的幾個特殊layer我就不在這裏列舉了，本身去研究吧

 

下一次，就將進入真正的動畫部分了