碼上快樂

相關內容    簡體    繁體

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

本文轉載自   查看原文   2014-10-08 18:26   2662 

第六章：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
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. @interface ViewController ()  
  2.   
  3. @property (nonatomic, weak) IBOutlet UIView *containerView;  
  4.   
  5. @end  
  6.   
  7. @implementation ViewController  
  8.   
  9. - (void)viewDidLoad  
  10. {  
  11.     [super viewDidLoad];  
  12.       
  13.     //create path  
  14.     UIBezierPath *path = [[UIBezierPath alloc] init];  
  15.     [path moveToPoint:CGPointMake(175, 100)];  
  16.     [path addArcWithCenter:CGPointMake(150, 100) radius:25 startAngle:0 endAngle:2*M_PI clockwise:YES];  
  17.     [path moveToPoint:CGPointMake(150, 125)];  
  18.     [path addLineToPoint:CGPointMake(150, 175)];  
  19.     [path addLineToPoint:CGPointMake(125, 225)];  
  20.     [path moveToPoint:CGPointMake(150, 175)];  
  21.     [path addLineToPoint:CGPointMake(175, 225)];  
  22.     [path moveToPoint:CGPointMake(100, 150)];  
  23.     [path addLineToPoint:CGPointMake(200, 150)];  
  24.       
  25.     //create shape layer  
  26.     CAShapeLayer *shapeLayer = [CAShapeLayer layer];  
  27.     shapeLayer.strokeColor = [UIColor redColor].CGColor;  
  28.     shapeLayer.fillColor = [UIColor clearColor].CGColor;  
  29.     shapeLayer.lineWidth = 5;  
  30.     shapeLayer.lineJoin = kCALineJoinRound;  
  31.     shapeLayer.lineCap = kCALineCapRound;  
  32.     shapeLayer.path = path.CGPath;  
  33.       
  34.     //add it to our view  
  35.     [self.containerView.layer addSublayer:shapeLayer];  
  36. }  
  37.   
  38. @end  


 
 
先說說CAShapeLayer的屬性設置
 
1. 線顏色
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. @property CGColorRef strokeColor  
 
2. 填充色
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. @property CGColorRef fillColor  

3. 填充規則
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. @property(copy) NSString *fillRule  
修改例子6.1
默認值kCAFillRuleNonZero的情況
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. - (void)viewDidLoad  
  2. {  
  3.     [super viewDidLoad];  
  4.       
  5.     //create path  
  6.     UIBezierPath *path = [[UIBezierPath alloc] init];  
  7.     [path moveToPoint:CGPointMake(200, 150)];  
  8.     [path addArcWithCenter:CGPointMake(150, 150) radius:50 startAngle:0 endAngle:2*M_PI clockwise:YES];  
  9.     [path moveToPoint:CGPointMake(250, 150)];  
  10.     [path addArcWithCenter:CGPointMake(150, 150) radius:100 startAngle:0 endAngle:2*M_PI clockwise:YES];  
  11.   
  12.     //create shape layer  
  13.     CAShapeLayer *shapeLayer = [CAShapeLayer layer];  
  14.     shapeLayer.strokeColor = [UIColor redColor].CGColor;  
  15.     shapeLayer.fillColor = [UIColor blueColor].CGColor;  
  16.     shapeLayer.fillRule = kCAFillRuleNonZero;  
  17.     //shapeLayer.fillRule = kCAFillRuleEvenOdd;  
  18.   
  19.     shapeLayer.lineWidth = 5;  
  20.     shapeLayer.lineJoin = kCALineJoinBevel;  
  21.     shapeLayer.lineCap = kCALineCapRound;  
  22.     shapeLayer.path = path.CGPath;  
  23.       
  24.     //add it to our view  
  25.     [self.containerView.layer addSublayer:shapeLayer];  
  26. }  

再修改
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. - (void)viewDidLoad  
  2. {  
  3.     [super viewDidLoad];  
  4.       
  5.     //create path  
  6.     UIBezierPath *path = [[UIBezierPath alloc] init];  
  7.     [path moveToPoint:CGPointMake(200, 150)];  
  8.     [path addArcWithCenter:CGPointMake(150, 150) radius:50 startAngle:0 endAngle:2*M_PI clockwise:YES];  
  9.     [path moveToPoint:CGPointMake(250, 150)];  
  10.     [path addArcWithCenter:CGPointMake(150, 150) radius:100 startAngle:0 endAngle:-2*M_PI clockwise:NO];  
  11.   
  12.     //create shape layer  
  13.     CAShapeLayer *shapeLayer = [CAShapeLayer layer];  
  14.     shapeLayer.strokeColor = [UIColor redColor].CGColor;  
  15.     shapeLayer.fillColor = [UIColor blueColor].CGColor;  
  16.     shapeLayer.fillRule = kCAFillRuleNonZero;  
  17.     //shapeLayer.fillRule = kCAFillRuleEvenOdd;  
  18.   
  19.     shapeLayer.lineWidth = 5;  
  20.     shapeLayer.lineJoin = kCALineJoinBevel;  
  21.     shapeLayer.lineCap = kCALineCapRound;  
  22.     shapeLayer.path = path.CGPath;  
  23.       
  24.     //add it to our view  
  25.     [self.containerView.layer addSublayer:shapeLayer];  
  26. }  


 

kCAFillRuleEvenOdd的情況

修改代碼
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. - (void)viewDidLoad  
  2. {  
  3.     [super viewDidLoad];  
  4.       
  5.     //create path  
  6.     UIBezierPath *path = [[UIBezierPath alloc] init];  
  7.     [path moveToPoint:CGPointMake(200, 150)];  
  8.     [path addArcWithCenter:CGPointMake(150, 150) radius:50 startAngle:0 endAngle:2*M_PI clockwise:YES];  
  9.     [path moveToPoint:CGPointMake(250, 150)];  
  10.     [path addArcWithCenter:CGPointMake(150, 150) radius:100 startAngle:0 endAngle:2*M_PI clockwise:YES];  
  11.   
  12.     //create shape layer  
  13.     CAShapeLayer *shapeLayer = [CAShapeLayer layer];  
  14.     shapeLayer.strokeColor = [UIColor redColor].CGColor;  
  15.     shapeLayer.fillColor = [UIColor blueColor].CGColor;  
  16.     //shapeLayer.fillRule = kCAFillRuleNonZero;  
  17.     shapeLayer.fillRule = kCAFillRuleEvenOdd;  
  18.   
  19.     shapeLayer.lineWidth = 5;  
  20.     shapeLayer.lineJoin = kCALineJoinBevel;  
  21.     shapeLayer.lineCap = kCALineCapRound;  
  22.     shapeLayer.path = path.CGPath;  
  23.       
  24.     //add it to our view  
  25.     [self.containerView.layer addSublayer:shapeLayer];  
  26. }  


 
同樣修改
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. - (void)viewDidLoad  
  2. {  
  3.     [super viewDidLoad];  
  4.       
  5.     //create path  
  6.     UIBezierPath *path = [[UIBezierPath alloc] init];  
  7.     [path moveToPoint:CGPointMake(200, 150)];  
  8.     [path addArcWithCenter:CGPointMake(150, 150) radius:50 startAngle:0 endAngle:2*M_PI clockwise:YES];  
  9.     [path moveToPoint:CGPointMake(250, 150)];  
  10.     [path addArcWithCenter:CGPointMake(150, 150) radius:100 startAngle:0 endAngle:-2*M_PI clockwise:NO];  
  11.   
  12.     //create shape layer  
  13.     CAShapeLayer *shapeLayer = [CAShapeLayer layer];  
  14.     shapeLayer.strokeColor = [UIColor redColor].CGColor;  
  15.     shapeLayer.fillColor = [UIColor blueColor].CGColor;  
  16.     //shapeLayer.fillRule = kCAFillRuleNonZero;  
  17.     shapeLayer.fillRule = kCAFillRuleEvenOdd;  
  18.   
  19.     shapeLayer.lineWidth = 5;  
  20.     shapeLayer.lineJoin = kCALineJoinBevel;  
  21.     shapeLayer.lineCap = kCALineCapRound;  
  22.     shapeLayer.path = path.CGPath;  
  23.       
  24.     //add it to our view  
  25.     [self.containerView.layer addSublayer:shapeLayer];  
  26. }  

繼續為了看清奇偶的效果，畫3個同方向圓圈
 
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. - (void)viewDidLoad  
  2. {  
  3.     [super viewDidLoad];  
  4.       
  5.     //create path  
  6.     UIBezierPath *path = [[UIBezierPath alloc] init];  
  7.     [path moveToPoint:CGPointMake(200, 150)];  
  8.     [path addArcWithCenter:CGPointMake(150, 150) radius:50 startAngle:0 endAngle:2*M_PI clockwise:YES];  
  9.     [path moveToPoint:CGPointMake(250, 150)];  
  10.     [path addArcWithCenter:CGPointMake(150, 150) radius:100 startAngle:0 endAngle:2*M_PI clockwise:YES];  
  11.     [path moveToPoint:CGPointMake(300, 150)];  
  12.     [path addArcWithCenter:CGPointMake(150, 150) radius:150 startAngle:0 endAngle:2*M_PI clockwise:YES];  
  13.   
  14.     //create shape layer  
  15.     CAShapeLayer *shapeLayer = [CAShapeLayer layer];  
  16.     shapeLayer.strokeColor = [UIColor redColor].CGColor;  
  17.     shapeLayer.fillColor = [UIColor blueColor].CGColor;  
  18.     //shapeLayer.fillRule = kCAFillRuleNonZero;  
  19.     shapeLayer.fillRule = kCAFillRuleEvenOdd;  
  20.   
  21.     shapeLayer.lineWidth = 5;  
  22.     shapeLayer.lineJoin = kCALineJoinBevel;  
  23.     shapeLayer.lineCap = kCALineCapRound;  
  24.     shapeLayer.path = path.CGPath;  
  25.       
  26.     //add it to our view  
  27.     [self.containerView.layer addSublayer:shapeLayer];  
  28. }  


以上我們應該清楚不同的規則了吧，挪用別人的描述
 
 
nonzero字面意思是“非零”。按該規則，要判斷一個點是否在圖形內，從該點作任意方向的一條射線，然后檢測射線與圖形路徑的交點情況。從0開始計數，路徑從左向右穿過射線則計數加1，從右向左穿過射線則計數減1。得出計數結果后，如果結果是0，則認為點在圖形外部，否則認為在內部。下圖演示了nonzero規則:

 

evenodd字面意思是“奇偶”。按該規則，要判斷一個點是否在圖形內，從該點作任意方向的一條射線，然后檢測射線與圖形路徑的交點的數量。如果結果是奇數則認為點在內部，是偶數則認為點在外部。下圖演示了evenodd 規則:
 
4. 線端點類型
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. @property(copy) NSString *lineCap  


5. 線連接類型
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. @property(copy) NSString *lineJoin  
 
6. 線寬
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. @property CGFloat lineWidth  

7. 線型模板
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. @property(copy) NSArray *lineDashPattern  
這是一個NSNumber的數組，索引從1開始記，奇數位數值表示實線長度，偶數位數值表示空白長度

8. 線型模板的起始位置
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. @property CGFloat lineDashPhase  
修改例子6.1，為了看得更清楚，把lineCap的設置注釋，，自己看看不注釋是什么結果
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. - (void)viewDidLoad  
  2. {  
  3.     [super viewDidLoad];  
  4.   
  5.     //create path  
  6.     UIBezierPath *path = [[UIBezierPath alloc] init];  
  7.     [path moveToPoint:CGPointMake(175, 100)];  
  8.     [path addArcWithCenter:CGPointMake(150, 100) radius:25 startAngle:0 endAngle:2*M_PI clockwise:YES];  
  9.     [path moveToPoint:CGPointMake(150, 125)];  
  10.     [path addLineToPoint:CGPointMake(150, 175)];  
  11.     [path addLineToPoint:CGPointMake(125, 225)];  
  12.     [path moveToPoint:CGPointMake(150, 175)];  
  13.     [path addLineToPoint:CGPointMake(175, 225)];  
  14.     [path moveToPoint:CGPointMake(100, 150)];  
  15.     [path addLineToPoint:CGPointMake(200, 150)];  
  16.   
  17.     //create shape layer  
  18.     CAShapeLayer *shapeLayer = [CAShapeLayer layer];  
  19.     shapeLayer.strokeColor = [UIColor redColor].CGColor;  
  20.     shapeLayer.fillColor = [UIColor clearColor].CGColor;  
  21.   
  22.     shapeLayer.lineWidth = 5;  
  23.     shapeLayer.lineDashPattern = [NSArray arrayWithObjects:[NSNumber numberWithInt:20], [NSNumber numberWithInt:10], [NSNumber numberWithInt:10], [NSNumber numberWithInt:2], nil nil];  
  24.     //shapeLayer.lineDashPhase = 15;  
  25.     shapeLayer.lineJoin = kCALineJoinBevel;  
  26.     //shapeLayer.lineCap = kCALineCapRound;  
  27. //    shapeLayer.strokeStart = 0.1;  
  28. //    shapeLayer.strokeEnd = 0.6;  
  29.     shapeLayer.path = path.CGPath;  
  30.   
  31.     //add it to our view  
  32.     [self.containerView.layer addSublayer:shapeLayer];  
  33. }  

再修改lineDashPhase值=15



 

9. 最大斜接長度。

 

[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. @property CGFloat miterLimit  

 

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

只有lineJoin屬性為kCALineJoinMiter時miterLimit才有效

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

為了避免斜接長度過長，我們可以使用 miterLimit 屬性。

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

 
 
 
10. 部分繪線
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. @property CGFloat strokeStart  
  2. @property CGFloat strokeEnd  

都是0.0~1.0的取值范圍
具體看修改例子6.1
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. - (void)viewDidLoad  
  2. {  
  3.     [super viewDidLoad];  
  4.   
  5.     //create path  
  6.     UIBezierPath *path = [[UIBezierPath alloc] init];  
  7.     [path moveToPoint:CGPointMake(175, 100)];  
  8.     [path addArcWithCenter:CGPointMake(150, 100) radius:25 startAngle:0 endAngle:2*M_PI clockwise:YES];  
  9.     [path moveToPoint:CGPointMake(150, 125)];  
  10.     [path addLineToPoint:CGPointMake(150, 175)];  
  11.     [path addLineToPoint:CGPointMake(125, 225)];  
  12.     [path moveToPoint:CGPointMake(150, 175)];  
  13.     [path addLineToPoint:CGPointMake(175, 225)];  
  14.     [path moveToPoint:CGPointMake(100, 150)];  
  15.     [path addLineToPoint:CGPointMake(200, 150)];  
  16.   
  17.     //create shape layer  
  18.     CAShapeLayer *shapeLayer = [CAShapeLayer layer];  
  19.     shapeLayer.strokeColor = [UIColor redColor].CGColor;  
  20.     shapeLayer.fillColor = [UIColor clearColor].CGColor;  
  21.   
  22.     shapeLayer.lineWidth = 5;  
  23.     //shapeLayer.lineDashPattern = [NSArray arrayWithObjects:[NSNumber numberWithInt:20], [NSNumber numberWithInt:10], [NSNumber numberWithInt:10], [NSNumber numberWithInt:2], nil];  
  24.     //shapeLayer.lineDashPhase = 15;  
  25.     shapeLayer.lineJoin = kCALineJoinBevel;  
  26.     shapeLayer.lineCap = kCALineCapRound;  
  27.     shapeLayer.strokeStart = 0.1;  
  28.     shapeLayer.strokeEnd = 0.6;  
  29.     shapeLayer.path = path.CGPath;  
  30.   
  31.     //add it to our view  
  32.     [self.containerView.layer addSublayer:shapeLayer];  
  33. }  


 
 
UIBezierPath貝塞爾曲線的常用繪圖方法
 
1. 矩形
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. + (UIBezierPath *)bezierPathWithRect:(CGRect)rect  

2. 矩形內切橢圓
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. + (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect  

3. 圓角矩形
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. + (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius  

4. 可設置的圓角矩形
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. + (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii  

 

corners有以下幾種類型：

   UIRectCornerTopLeft,

   UIRectCornerTopRight,

   UIRectCornerBottomLeft,

   UIRectCornerBottomRight,

   UIRectCornerAllCorners

 

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

 
5. 圓弧
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. + (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise  
  2. - (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise  
 


 
以下需要配合moveToPoint使用
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. - (void)moveToPoint:(CGPoint)point  
 
6. 直線
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. - (void)addLineToPoint:(CGPoint)point  

7. 曲線
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. - (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2  
 
8. 二元曲線
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. - (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint  


UIBezierPath的屬性設置(這些屬性在使用CAShapeLayer時，只遵循CAShapeLayer的設置)
1. 線寬
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. @property(nonatomic) CGFloat lineWidth  

 

2. 端點類型
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. @property(nonatomic) CGLineCap lineCapStyle  
 
3. 連接類型
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. @property(nonatomic) CGLineJoin lineJoinStyle  
 
 
4. 設置線型
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. - (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
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. @interface ViewController ()  
  2.   
  3. @property (nonatomic, weak) IBOutlet UIView *labelView;  
  4.   
  5. @end  
  6.   
  7. @implementation ViewController  
  8.   
  9. - (void)viewDidLoad  
  10. {  
  11.     [super viewDidLoad];  
  12.       
  13.     //create a text layer  
  14.     CATextLayer *textLayer = [CATextLayer layer];  
  15.     textLayer.frame = self.labelView.bounds;  
  16.     [self.labelView.layer addSublayer:textLayer];  
  17.   
  18.     //uncomment the line below to fix pixelation on Retina screens  
  19.     //textLayer.contentsScale = [UIScreen mainScreen].scale;  
  20.       
  21.     //set text attributes  
  22.     textLayer.foregroundColor = [UIColor blackColor].CGColor;  
  23.     textLayer.alignmentMode = kCAAlignmentJustified;  
  24.     //textLayer.contentsScale = 1;  
  25.     textLayer.wrapped = YES;  
  26.       
  27.     //choose a font  
  28.     UIFont *font = [UIFont systemFontOfSize:15];  
  29.       
  30.     //set layer font  
  31.     CFStringRef fontName = (__bridge CFStringRef)font.fontName;  
  32.     CGFontRef fontRef = CGFontCreateWithFontName(fontName);  
  33.     textLayer.font = fontRef;  
  34.     textLayer.fontSize = font.pointSize;  
  35.     CGFontRelease(fontRef);  
  36.       
  37.     //choose some text  
  38.     NSString *text = @"Lorem ipsum dolor sit amet, consectetur adipiscing \ 
  39.     elit. Quisque massa arcu, eleifend vel varius in, facilisis pulvinar \ 
  40.     leo. Nunc quis nunc at mauris pharetra condimentum ut ac neque. Nunc \ 
  41.     elementum, libero ut porttitor dictum, diam odio congue lacus, vel \ 
  42.     fringilla sapien diam at purus. Etiam suscipit pretium nunc sit amet \ 
  43.     lobortis";  
  44.       
  45.     //set layer text  
  46.     textLayer.string = text;  
  47. }  
  48.   
  49. @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
代碼不貼了
 
修改一下，可以實現簡單的拖動旋轉(只是試驗代碼)
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. @interface ViewController ()  
  2. {  
  3.     CGPoint startPoint;  
  4.   
  5.     CATransformLayer *s_Cube;  
  6.   
  7.     float pix, piy;  
  8. }  
  9.   
  10. @property (nonatomic, weak) IBOutlet UIView *containerView;  
  11.   
  12. @end  
  13.   
  14. @implementation ViewController  
  15.   
  16. - (CALayer *)faceWithTransform:(CATransform3D)transform  
  17. {  
  18.     //create cube face layer  
  19.     CALayer *face = [CALayer layer];  
  20.     face.frame = CGRectMake(-50, -50, 100, 100);  
  21.       
  22.     //apply a random color  
  23.     CGFloat red = (rand() / (double)INT_MAX);  
  24.     CGFloat green = (rand() / (double)INT_MAX);  
  25.     CGFloat blue = (rand() / (double)INT_MAX);  
  26.     face.backgroundColor = [UIColor colorWithRed:red  
  27.                                            green:green  
  28.                                             blue:blue  
  29.                                            alpha:1.0].CGColor;  
  30.   
  31.     //apply the transform and return  
  32.     face.transform = transform;  
  33.     return face;  
  34. }  
  35.   
  36. - (CALayer *)cubeWithTransform:(CATransform3D)transform  
  37. {  
  38.     //create cube layer  
  39.     CATransformLayer *cube = [CATransformLayer layer];  
  40.       
  41.     //add cube face 1  
  42.     CATransform3D ct = CATransform3DMakeTranslation(0, 0, 50);  
  43.     [cube addSublayer:[self faceWithTransform:ct]];  
  44.       
  45.     //add cube face 2  
  46.     ct = CATransform3DMakeTranslation(50, 0, 0);  
  47.     ct = CATransform3DRotate(ct, M_PI_2, 0, 1, 0);  
  48.     [cube addSublayer:[self faceWithTransform:ct]];  
  49.       
  50.     //add cube face 3  
  51.     ct = CATransform3DMakeTranslation(0, -50, 0);  
  52.     ct = CATransform3DRotate(ct, M_PI_2, 1, 0, 0);  
  53.     [cube addSublayer:[self faceWithTransform:ct]];  
  54.       
  55.     //add cube face 4  
  56.     ct = CATransform3DMakeTranslation(0, 50, 0);  
  57.     ct = CATransform3DRotate(ct, -M_PI_2, 1, 0, 0);  
  58.     [cube addSublayer:[self faceWithTransform:ct]];  
  59.       
  60.     //add cube face 5  
  61.     ct = CATransform3DMakeTranslation(-50, 0, 0);  
  62.     ct = CATransform3DRotate(ct, -M_PI_2, 0, 1, 0);  
  63.     [cube addSublayer:[self faceWithTransform:ct]];  
  64.       
  65.     //add cube face 6  
  66.     ct = CATransform3DMakeTranslation(0, 0, -50);  
  67.     ct = CATransform3DRotate(ct, M_PI, 0, 1, 0);  
  68.     [cube addSublayer:[self faceWithTransform:ct]];  
  69.       
  70.     //center the cube layer within the container  
  71.     CGSize containerSize = self.containerView.bounds.size;  
  72.     cube.position = CGPointMake(containerSize.width / 2.0,  
  73.                                 containerSize.height / 2.0);  
  74.       
  75.     //apply the transform and return  
  76.     cube.transform = transform;  
  77.     return cube;  
  78. }  
  79.   
  80. - (void)viewDidLoad  
  81. {  
  82.     [super viewDidLoad];  
  83.       
  84.     //set up the perspective transform  
  85.     CATransform3D pt = CATransform3DIdentity;  
  86.     pt.m34 = -1.0 / 500.0;  
  87.     self.containerView.layer.sublayerTransform = pt;  
  88.       
  89.     //set up the transform for cube 1 and add it  
  90.     CATransform3D c1t = CATransform3DIdentity;  
  91.     c1t = CATransform3DTranslate(c1t, -100, 0, 0);  
  92.     CALayer *cube1 = [self cubeWithTransform:c1t];  
  93.     s_Cube = (CATransformLayer *)cube1;  
  94.     [self.containerView.layer addSublayer:cube1];  
  95.       
  96.     //set up the transform for cube 2 and add it  
  97.     CATransform3D c2t = CATransform3DIdentity;  
  98.     c2t = CATransform3DTranslate(c2t, 100, 0, 0);  
  99.     c2t = CATransform3DRotate(c2t, -M_PI_4, 1, 0, 0);  
  100.     c2t = CATransform3DRotate(c2t, -M_PI_4, 0, 1, 0);  
  101.     CALayer *cube2 = [self cubeWithTransform:c2t];  
  102.     [self.containerView.layer addSublayer:cube2];  
  103. }  
  104.   
  105. - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event  
  106. {  
  107.     UITouch *touch = [touches anyObject];  
  108.   
  109.     startPoint = [touch locationInView:self.view];  
  110. }  
  111.   
  112. - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event  
  113. {  
  114.     UITouch *touch = [touches anyObject];  
  115.   
  116.     CGPoint currentPosition = [touch locationInView:self.view];  
  117.   
  118.     CGFloat deltaX = startPoint.x - currentPosition.x;  
  119.   
  120.     CGFloat deltaY = startPoint.y - currentPosition.y;  
  121.   
  122.     CATransform3D c1t = CATransform3DIdentity;  
  123.     c1t = CATransform3DTranslate(c1t, -100, 0, 0);  
  124.     c1t = CATransform3DRotate(c1t, pix+M_PI_2*deltaY/100, 1, 0, 0);  
  125.     c1t = CATransform3DRotate(c1t, piy-M_PI_2*deltaX/100, 0, 1, 0);  
  126.   
  127.     s_Cube.transform = c1t;  
  128. }  
  129.   
  130. - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event  
  131. {  
  132.     UITouch *touch = [touches anyObject];  
  133.   
  134.     CGPoint currentPosition = [touch locationInView:self.view];  
  135.   
  136.     CGFloat deltaX = startPoint.x - currentPosition.x;  
  137.   
  138.     CGFloat deltaY = startPoint.y - currentPosition.y;  
  139.   
  140.     pix = M_PI_2*deltaY/100;  
  141.     piy = -M_PI_2*deltaX/100;  
  142. }  
  143.   
  144. @end  


 
 
 
 
CAGradientLayer
 
產生平滑過渡色，
 
例子6.6
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. interface ViewController ()  
  2.   
  3. @property (nonatomic, weak) IBOutlet UIView *containerView;  
  4.   
  5. @end  
  6.   
  7. @implementation ViewController  
  8.   
  9. - (void)viewDidLoad  
  10. {  
  11.     [super viewDidLoad];  
  12.       
  13.     //create gradient layer and add it to our container view  
  14.     CAGradientLayer *gradientLayer = [CAGradientLayer layer];  
  15.     gradientLayer.frame = self.containerView.bounds;  
  16.     [self.containerView.layer addSublayer:gradientLayer];  
  17.       
  18.     //set gradient colors  
  19.     gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,  
  20.                              (__bridge id)[UIColor blueColor].CGColor];  
  21.       
  22.     //set gradient start and end points  
  23.     gradientLayer.startPoint = CGPointMake(0, 0);  
  24.     gradientLayer.endPoint = CGPointMake(1, 1);      
  25. }  
  26.   
  27. @end  


 

CAGradientLayer的屬性設置

1. 類型
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. @property(copy) NSString *type  
目前只有NSString * const kCAGradientLayerAxial
即線性梯度變化

2. 顏色
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. @property(copy) NSArray *colors  

3. 位置參數
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. @property(copy) NSArray *locations  
顏色的區間分布，locations的數組長度和colors一致， 取值范圍(0, 1)，而且必須是單調遞增的
 

修改例子6.6，增加
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. <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>  

[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. gradientLayer.locations = @[[NSNumber numberWithFloat:0.5], [NSNumber numberWithFloat:0.7]];  


 
4. startPoint和endPoint
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. @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
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. - (void)viewDidLoad  
  2. {  
  3.     [super viewDidLoad];  
  4.       
  5.     //create gradient layer and add it to our container view  
  6.     CAGradientLayer *gradientLayer = [CAGradientLayer layer];  
  7.     gradientLayer.frame = self.containerView.bounds;  
  8.     [self.containerView.layer addSublayer:gradientLayer];  
  9.       
  10.     //set gradient colors  
  11.     gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,  
  12.                              (__bridge id)[UIColor blueColor].CGColor];  
  13.       
  14.     gradientLayer.locations = @[[NSNumber numberWithFloat:0.5], [NSNumber numberWithFloat:0.7]];  
  15.   
  16.     //set gradient start and end points  
  17.     gradientLayer.startPoint = CGPointMake(0.75, 0.0);  
  18.     gradientLayer.endPoint = CGPointMake(1.0, 1.0);  
  19. }  


 
從以上可以看出startPoint和endPoint詩表示的漸變方向，locations是漸變區域。
也可以看出locations的取值是相對於startPoint和endPoint線段的。
 
在網上找的描述讓我很是不能理解
 
 
 
CAReplicatorLayer
 
例子6.8，修改一下看得更清楚些
[objc]  view plain copy print ? 在CODE上查看代碼片 派生到我的代碼片
  1. @interface ViewController ()  
  2.   
  3. @property (nonatomic, weak) IBOutlet UIView *containerView;  
  4.   
  5. @end  
  6.   
  7. @implementation ViewController  
  8.   
  9. - (void)viewDidLoad  
  10. {  
  11.     [super viewDidLoad];  
  12.       
  13.     //create a replicator layer and add it to our view  
  14.     CAReplicatorLayer *replicator = [CAReplicatorLayer layer];  
  15.     replicator.frame = self.containerView.bounds;  
  16.     [self.containerView.layer addSublayer:replicator];  
  17.       
  18.     //configure the replicator  
  19.     replicator.instanceCount = 20;  
  20.       
  21.     //apply a transform for each instance  
  22.     CATransform3D transform = CATransform3DIdentity;  
  23.     transform = CATransform3DTranslate(transform, 0, -10, 0);  
  24.     transform = CATransform3DRotate(transform, M_PI / 10.0, 0, 0, 1);  
  25.     transform = CATransform3DTranslate(transform, 0, 10, 0);  
  26.     replicator.instanceTransform = transform;  
  27.       
  28.     //apply a color shift for each instance  
  29.     replicator.instanceBlueOffset = -0.1;  
  30.     replicator.instanceGreenOffset = -0.1;  
  31.       
  32.     //create a sublayer and place it inside the replicator  
  33.     CALayer *layer = [CALayer layer];  
  34.     layer.frame = CGRectMake(137.5f, 25.0f, 25.0f, 25.0f);  
  35.     layer.backgroundColor = [UIColor whiteColor].CGColor;  
  36.     [replicator addSublayer:layer];  
  37. }  
  38.   
  39. @end  

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

 
 
后面的幾個特殊layer我就不在這里列舉了，自己去研究吧
 
下一次，就將進入真正的動畫部分了


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Kaggle比賽（二）House Prices: Advanced Regression Techniques 簡析iOS動畫原理及實現——Core Animation ios開發學習--動畫（Animation）效果源碼分享--系列教程1 iOS學習筆記（二）——Hello iOS Core Animation2-CABasicAnimation IOS6學習筆記（三） iOS學習筆記（5）— UITextField ios UnitTest 學習筆記 NET Core-學習筆記（二） NET Core-學習筆記（一）
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM