iOS开发CoreAnimation解读之三——几种常用Layer的使用解析
iOS開(kāi)發(fā)CoreAnimation解讀之三——幾種常用Layer的使用解析
一、CAEmitterLayer
????????CAEmitterLayer是CoreAnimation框架中的粒子發(fā)射層,在以前的一片博客中有詳細(xì)的介紹和范例,這里不再重復(fù),地址如下:
粒子效果的應(yīng)用和火焰范例:http://my.oschina.net/u/2340880/blog/485095
二、CAGradientLayer
????????CAGradientLayer是用于色彩梯度展示的layer圖層,通過(guò)CAGradientLayer,我們可以很輕松的創(chuàng)建出有過(guò)渡效果的色彩圖。其中屬性如下:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | /* 顏色數(shù)組,設(shè)置我們需要過(guò)的的顏色,必須是CGColor對(duì)象 */ @property(nullable,?copy)?NSArray?*colors; /* 顏色開(kāi)始進(jìn)行過(guò)渡的位置 這個(gè)數(shù)組中的元素是NSNumber類型,單調(diào)遞增的,并且在0——1之間 例如,如果我們?cè)O(shè)置兩個(gè)顏色進(jìn)行過(guò)渡,這個(gè)數(shù)組中寫入0.5,則第一個(gè)顏色會(huì)在達(dá)到layer一半的時(shí)候開(kāi)始向第二個(gè)顏色過(guò)渡 */ @property(nullable,?copy)?NSArray<NSNumber?*>?*locations; /* 下面兩個(gè)參數(shù)用于設(shè)置渲染顏色的起點(diǎn)和終點(diǎn)?取值范圍均為0——1 默認(rèn)起點(diǎn)為(0.5?,0)?終點(diǎn)為(0.5?,1),顏色的過(guò)渡范圍就是沿y軸從上向下 */ @property?CGPoint?startPoint; @property?CGPoint?endPoint; /* 渲染風(fēng)格?iOS中只支持一種默認(rèn)的kCAGradientLayerAxial,我們無(wú)需手動(dòng)設(shè)置 */ @property(copy)?NSString?*type; |
用如下代碼創(chuàng)建一個(gè)度過(guò)視圖的效果:
| 1 2 3 4 5 6 7 8 | ????CAGradientLayer?*?layer?=?[CAGradientLayer?layer]; ????layer.colors?=?@[(id)[UIColor?redColor].CGColor,(id)[UIColor?blueColor].CGColor,(id)[UIColor?greenColor].CGColor]; ????layer.locations?=?@[@0.1,@0.7,@1]; ????layer.bounds?=?CGRectMake(0,?0,?100,?100); ????layer.position?=?CGPointMake(100,?100); ????layer.startPoint?=?CGPointMake(0,?0); ????layer.endPoint?=?CGPointMake(1,?1); ????[self.view.layer?addSublayer:layer]; |
效果如下:
三、CAReplicatorLayer
????????CAReplocatorLayer是拷貝視圖容器,我們可以通過(guò)它,將其中的子layer進(jìn)行拷貝,并進(jìn)行一些差異處理,其中常用屬性方法如下:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | //拷貝的次數(shù) @property?NSInteger?instanceCount; //是否開(kāi)啟景深效果 @property?BOOL?preservesDepth; //當(dāng)CAReplicatorLayer的子Layer層進(jìn)行動(dòng)畫的時(shí)候,拷貝的副本執(zhí)行動(dòng)畫的延時(shí) @property?CFTimeInterval?instanceDelay; //拷貝副本的3D變換 @property?CATransform3D?instanceTransform; //拷貝副本的顏色變換 @property(nullable)?CGColorRef?instanceColor; //每個(gè)拷貝副本的顏色偏移參數(shù) @property?float?instanceRedOffset; @property?float?instanceGreenOffset; @property?float?instanceBlueOffset; //每個(gè)拷貝副本的透明度偏移參數(shù) @property?float?instanceAlphaOffset; |
例如,通過(guò)拷貝一個(gè)色塊,使其產(chǎn)生平移排列:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | ????CAReplicatorLayer?*reLayer?=?[CAReplicatorLayer?layer]; ????reLayer.position?=?CGPointMake(0,?0); ????CALayer?*?layer=?[CALayer?layer]; ????[reLayer?addSublayer:layer]; ????[self.view.layer?addSublayer:reLayer]; ????layer.bounds?=?CGRectMake(0,?0,?20,?20); ????layer.position?=?CGPointMake(30,?100); ????layer.backgroundColor?=?[UIColor?redColor].CGColor; ????//每個(gè)副本向右平移25px ????reLayer.instanceTransform=CATransform3DMakeTranslation(25,?0,?0); ????//如果進(jìn)行動(dòng)畫,副本延時(shí)一秒執(zhí)行 ????reLayer.instanceDelay?=?1; ????//拷貝十個(gè)副本 ????reLayer.instanceCount?=?10; |
效果如下:
四、CAShapeLayer
????????CAShapeLayer是圖形layer層,我們可以自定義這個(gè)層的形狀。先來(lái)看其中我們可以使用的屬性和方法:
| 1 | @property(nullable)?CGPathRef?path; |
path屬性為CAShapeLayer設(shè)置一個(gè)邊界路徑,例如我們可以創(chuàng)建一個(gè)三角形的路徑通過(guò)如下代碼:
?| 1 2 3 4 5 6 7 8 | ????CAShapeLayer?*?layer?=?[CAShapeLayer?layer]; ????layer.position=CGPointMake(0,0); ????CGMutablePathRef?path?=?CGPathCreateMutable(); ????CGPathMoveToPoint(path,?0,?100,?100); ????CGPathAddLineToPoint(path,?0,?300,?100); ????CGPathAddLineToPoint(path,?0,?200,?200); ????CGPathAddLineToPoint(path,?0,?100,?100); ????layer.path=path; |
僅僅有路徑,不能將我們想要的形狀畫出來(lái),下面一些屬性可以對(duì)圖形的一些基礎(chǔ)屬性進(jìn)行設(shè)置:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | //設(shè)置圖形的填充顏色 @property(nullable)?CGColorRef?fillColor; /* 設(shè)置圖形的填充規(guī)則?選項(xiàng)如下: 非零填充 ?NSString?*const?kCAFillRuleNonZero; ?奇偶填充 ?NSString?*const?kCAFillRuleEvenOdd; */ @property(copy)?NSString?*fillRule; //設(shè)置線條顏色 @property(nullable)?CGColorRef?strokeColor; //設(shè)置線條的起點(diǎn)與終點(diǎn)?0-1之間 @property?CGFloat?strokeStart; @property?CGFloat?strokeEnd; //設(shè)置線條寬度 @property?CGFloat?lineWidth; //設(shè)置兩條線段相交時(shí)銳角斜面長(zhǎng)度 @property?CGFloat?miterLimit; /* 設(shè)置線條首尾的外觀 可選參數(shù)如下 無(wú)形狀 ?NSString?*const?kCALineCapButt; ?圓形 ?NSString?*const?kCALineCapRound; ?方形 ?NSString?*const?kCALineCapSquare; */ @property(copy)?NSString?*lineCap; /* 設(shè)置線段的鏈接方式 棱角 ?NSString?*const?kCALineJoinMiter; ?平滑 ?NSString?*const?kCALineJoinRound; ?折線 ?NSString?*const?kCALineJoinBevel; */ @property(copy)?NSString?*lineJoin; |
修改一下上面的代碼,如下:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | CAShapeLayer?*?layer?=?[CAShapeLayer?layer]; ????layer.position=CGPointMake(0,0); ????CGMutablePathRef?path?=?CGPathCreateMutable(); ????CGPathMoveToPoint(path,?0,?100,?100); ????CGPathAddLineToPoint(path,?0,?300,?100); ????CGPathAddLineToPoint(path,?0,?200,?200); ????CGPathAddLineToPoint(path,?0,?100,?100); ????layer.path=path; ????layer.fillColor=?[UIColor?redColor].CGColor; ????layer.fillRule?=?kCAFillRuleEvenOdd; ????layer.strokeColor?=?[UIColor?blueColor].CGColor; ????layer.strokeStart?=0; ????layer.strokeEnd?=0.5; ????layer.lineWidth?=?5; ????layer.miterLimit?=?1; ????layer.lineJoin?=?kCALineJoinMiter; ????[self.view.layer?addSublayer:layer]; |
效果如下:
除此之外,我們還可以設(shè)置邊界的線條為虛線,通過(guò)下面兩個(gè)屬性:
?| 1 2 3 4 5 6 7 | ????//設(shè)置線段的寬度為5px?間距為10px ????/* ????這個(gè)數(shù)組中還可以繼續(xù)添加,會(huì)循環(huán)進(jìn)行設(shè)置?例如?5?2?1?3?則第一條線段5px,間距2px,第二條線段1px?間距3px再開(kāi)始第一條線段 ????*/ ????layer.lineDashPattern?=?@[@05,@10]; ????//設(shè)置從哪個(gè)位置開(kāi)始 ????layer.lineDashPhase?=5; |
如下:
五、CATextLayer
????????CATextLayer可以進(jìn)行文本的繪制,屬性方法如下:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | //渲染的文字字符串 @property(nullable,?copy)?id?string; //設(shè)置字體 @property(nullable)?CFTypeRef?font; //設(shè)置字號(hào) @property?CGFloat?fontSize; //設(shè)置文字顏色 @property(nullable)?CGColorRef?foregroundColor; //是否換行 @property(getter=isWrapped)?BOOL?wrapped; /* 設(shè)置截?cái)嗄J? ?NSString?*?const?kCATruncationNone; ?截?cái)嗲安糠? ?NSString?*?const?kCATruncationStart; ?截?cái)嗪蟛糠? ?NSString?*?const?kCATruncationEnd; ?截?cái)嘀虚g ?NSString?*?const?kCATruncationMiddle; */ @property(copy)?NSString?*truncationMode; /* 設(shè)置文字對(duì)齊模式 ?NSString?*?const?kCAAlignmentNatural; ?NSString?*?const?kCAAlignmentLeft; ?NSString?*?const?kCAAlignmentRight; ?NSString?*?const?kCAAlignmentCenter; ?NSString?*?const?kCAAlignmentJustified; */ @property(copy)?NSString?*alignmentMode; |
總結(jié)
以上是生活随笔為你收集整理的iOS开发CoreAnimation解读之三——几种常用Layer的使用解析的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: Amesim液压仿真基础与液压知识经验结
- 下一篇: 目标跟踪算法MOSSE笔记