CALayer精讲
CALayer精講
CALayer包含在QuartzCore框架中,這是一個(gè)跨平臺(tái)的框架,既可以用在iOS中又可以用在Mac OS X中。后面要學(xué)Core Animation就應(yīng)該先學(xué)好Layer(層)。
我們看一下UIView與Layer之間的關(guān)系圖(圖片來(lái)源于網(wǎng)絡(luò)):
我們知道,UIView有一個(gè)屬性layer,這個(gè)是在視圖創(chuàng)建時(shí)就會(huì)自動(dòng)創(chuàng)建一個(gè)圖層。想要呈現(xiàn)出來(lái),就需要到Layer。層是可以放很多個(gè)子層的,也就可以實(shí)現(xiàn)多種多樣的效果。
CALayer關(guān)鍵屬性說(shuō)明
// 與UIView的bounds類似的,獲取或設(shè)置圖層的大小 @property CGRect bounds;/* The position in the superlayer that the anchor point of the layer's* bounds rect is aligned to. Defaults to the zero point. Animatable. */ // 獲取或設(shè)置在父圖層中對(duì)齊位置,默認(rèn)為(0,0),也就是左上角。 // 這個(gè)屬性與UIView的center屬性類似,不過(guò)在圖層中使用的是position // 這里關(guān)系到錨點(diǎn),關(guān)于錨點(diǎn)在游戲世界里是非常關(guān)鍵的概念 // 支持隱式動(dòng)畫(huà) @property CGPoint position;/* The Z component of the layer's position in its superlayer. Defaults* to zero. Animatable. */ // 層與層之間有上下層的關(guān)系,設(shè)置Z軸方向的值,可以指定哪個(gè)層在上,哪個(gè)層在下 // 支持隱式動(dòng)畫(huà) @property CGFloat zPosition;/* Defines the anchor point of the layer's bounds rect, as a point in* normalized layer coordinates - '(0, 0)' is the bottom left corner of* the bounds rect, '(1, 1)' is the top right corner. Defaults to* '(0.5, 0.5)', i.e. the center of the bounds rect. Animatable. */ // 這個(gè)就是游戲中必須要懂的錨點(diǎn),默認(rèn)為(0.5, 0.5),也就是正中央。 // 關(guān)于錨點(diǎn)的知識(shí),當(dāng)年自學(xué)cocos2d-x的時(shí)候也困擾過(guò)我一段時(shí)間,這個(gè)有專門的文章講解的 // 大家可以查一查相關(guān)專題講解。因?yàn)檫@個(gè)確實(shí)不好理解,一時(shí)說(shuō)不通。 // 支持隱式動(dòng)畫(huà) @property CGPoint anchorPoint;/* A transform applied to the layer relative to the anchor point of its* bounds rect. Defaults to the identity transform. Animatable. */ // 圖層形變,做動(dòng)畫(huà)常用 // 支持隱式動(dòng)畫(huà) @property CATransform3D transform;
溫馨提示:在CALayer中很少使用frame屬性,因?yàn)閒rame本身不支持動(dòng)畫(huà)效果,通常使用bounds和position代替。CALayer中透明度使用opacity表示而不是alpha;中心點(diǎn)使用position表示而不是center。
實(shí)戰(zhàn)點(diǎn)擊放大移動(dòng)效果
先看看效果圖:
實(shí)現(xiàn)代碼邏輯:
#define kLayerWidth 50@interface HYBMoveCircleLayerController ()@property (nonatomic, strong) CALayer *movableCircleLayer;@end@implementation HYBMoveCircleLayerController- (void)viewDidLoad {[super viewDidLoad];self.movableCircleLayer = [CALayer layer];// 指定大小self.movableCircleLayer.bounds = CGRectMake(0, 0, kLayerWidth, kLayerWidth);// 指定中心點(diǎn)self.movableCircleLayer.position = self.view.center;// 變成圓形self.movableCircleLayer.cornerRadius = kLayerWidth / 2;// 指定背景色self.movableCircleLayer.backgroundColor = [UIColor blueColor].CGColor;// 設(shè)置陰影self.movableCircleLayer.shadowColor = [UIColor grayColor].CGColor;self.movableCircleLayer.shadowOffset = CGSizeMake(3, 3);self.movableCircleLayer.shadowOpacity = 0.8;[self.view.layer addSublayer:self.movableCircleLayer]; }- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {CGFloat width = kLayerWidth;if (self.movableCircleLayer.bounds.size.width <= kLayerWidth) {width = kLayerWidth * 2.5;}// 修改大小self.movableCircleLayer.bounds = CGRectMake(0, 0, width, width);// 將中心位置放到點(diǎn)擊位置self.movableCircleLayer.position = [[touches anyObject] locationInView:self.view];// 再修改成圓形self.movableCircleLayer.cornerRadius = width / 2; }@end這里需要注意的是每次更新位置時(shí),這個(gè)圖層的大小和cornerRadius都需要更新,否則就不成圓形了!
通過(guò)層內(nèi)容呈現(xiàn)圖片
效果圖片:
代碼實(shí)現(xiàn):
- (void)drawImageWithContent {CALayer *layer = [CALayer layer];layer.bounds = CGRectMake(0, 0, kPhotoWidth, kPhotoWidth);layer.position = self.view.center;layer.cornerRadius = kPhotoWidth / 2;// 要設(shè)置此屬性才能裁剪成圓形,但是添加此屬性后,下面設(shè)置的陰影就沒(méi)有了。layer.masksToBounds = YES;layer.borderColor = [UIColor whiteColor].CGColor;layer.borderWidth = 1;// 如果只是顯示圖片,不做其它處理,直接設(shè)置contents就可以了,也就不會(huì)出現(xiàn)// 繪圖和圖像倒立的問(wèn)題了layer.contents = (__bridge id _Nullable)([UIImage imageNamed:@"bb"].CGImage);[self.view.layer addSublayer:layer]; }如果我們只是需要顯示圖片到圖層上,通過(guò)設(shè)置contents屬性就可以了,也就不用繪圖,也不會(huì)出現(xiàn)圖像倒立的問(wèn)題了。
通過(guò)層代理繪制圖片
上面的內(nèi)容呈現(xiàn)是很簡(jiǎn)單的,但是如果我們要增加其它效果呢?那就需要?jiǎng)e的方式了。如下效果圖:
代碼實(shí)現(xiàn):
- (void)drawImage {CALayer *layer = [CALayer layer];layer.bounds = CGRectMake(0, 0, kPhotoWidth, kPhotoWidth);layer.position = self.view.center;layer.cornerRadius = kPhotoWidth / 2;// 要設(shè)置此屬性才能裁剪成圓形,但是添加此屬性后,下面設(shè)置的陰影就沒(méi)有了。layer.masksToBounds = YES;layer.borderColor = [UIColor whiteColor].CGColor;layer.borderWidth = 1;// // 陰影 // layer.shadowColor = [UIColor blueColor].CGColor; // layer.shadowOffset = CGSizeMake(4, 4); // layer.shadowOpacity = 0.9;// 指定代理layer.delegate = self;// 添加到父圖層上[self.view.layer addSublayer:layer];// 當(dāng)設(shè)置masksToBounds為YES后,要想要陰影效果,就需要額外添加一個(gè)圖層作為陰影圖層了CALayer *shadowLayer = [CALayer layer];shadowLayer.position = layer.position;shadowLayer.bounds = layer.bounds;shadowLayer.cornerRadius = layer.cornerRadius;shadowLayer.shadowOpacity = 1.0;shadowLayer.shadowColor = [UIColor redColor].CGColor;shadowLayer.shadowOffset = CGSizeMake(2, 1);shadowLayer.borderWidth = layer.borderWidth;shadowLayer.borderColor = [UIColor whiteColor].CGColor;[self.view.layer insertSublayer:shadowLayer below:layer];// 調(diào)用此方法,否則代理不會(huì)調(diào)用[layer setNeedsDisplay]; }#pragma mark - CALayerDelegate - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {// 將當(dāng)前上下文入棧CGContextSaveGState(ctx);// 注意:坐標(biāo)系統(tǒng)與UIView的不同,這里使用的是笛卡爾積坐標(biāo)系,也就是左下角為(0,0)// 所以,我們只要記住這點(diǎn)就可以很容易地變換了。// 處理圖片倒立的問(wèn)題// 默認(rèn)呈現(xiàn)是倒立的,因此需要將形變矩陣的sy設(shè)置為-1就成了正立的了// 先縮放后平移也可以 // CGContextScaleCTM(ctx, 1, -1); // CGContextTranslateCTM(ctx, 0, -kPhotoWidth);// 先向平移后旋轉(zhuǎn)也可以解決倒立的問(wèn)題CGContextTranslateCTM(ctx, kPhotoWidth, kPhotoWidth);CGContextRotateCTM(ctx, 3.1415926 / 180 * 180);UIImage *image = [UIImage imageNamed:@"bb"];CGContextDrawImage(ctx, CGRectMake(0, 0, kPhotoWidth, kPhotoWidth), image.CGImage);// 任務(wù)完成后,將當(dāng)前上下文退棧CGContextRestoreGState(ctx); }我們需要注意,一旦設(shè)置了層的layer.masksToBounds為YES,那么陰影效果就沒(méi)有了,也就是不能直接對(duì)該層設(shè)置shadow相關(guān)的屬性了,設(shè)置了也沒(méi)有作用。因此,這里使用另外一個(gè)圖層來(lái)專門呈現(xiàn)陰影效果的。
我們需要將陰影層放在圖片層的下面,別把圖片層給擋住了。默認(rèn)是不會(huì)調(diào)用代理方法的,必須要調(diào)用setNeedsDisplay方法才會(huì)回調(diào)。因此,要繪制哪個(gè)層就調(diào)用哪個(gè)層對(duì)象調(diào)用該方法。
在代理方法中,我們介紹一下相關(guān)代碼。CGContextSaveGState方法是入棧操作,也就是將當(dāng)前設(shè)備上下文入棧。既然有入棧,自然也得有出棧,最后一行CGContextRestoreGState就是將設(shè)備上下文出棧。我們必須明確一點(diǎn),繪圖是在設(shè)備上下文上操作的,因此,我們所進(jìn)行的繪圖操作都會(huì)是棧頂元素上的。
矩陣操作:通過(guò)CGContextDrawImage繪制的圖片是倒立的,因此我們需要進(jìn)行矩陣相關(guān)變換。關(guān)于矩陣變換的知識(shí)是數(shù)學(xué)知識(shí),也是知識(shí)難點(diǎn),關(guān)于此理論知識(shí),大家可以閱讀:http://www.tuicool.com/articles/Er6VNf6
我們需要明確坐標(biāo)系為笛卡爾積坐標(biāo)系,坐標(biāo)原點(diǎn)在左下角。這里提供了兩種解決圖像倒立問(wèn)題的方法。
- 第一種:先綻放后平移
- 第二種:先平移后旋轉(zhuǎn)
對(duì)于第一種,我們先設(shè)置矩陣的sx,sy分別為1,-1,然后平移到(0, -kPhotoWidth)。對(duì)于這一種不好理解,因此,筆者提供了第二種方法,更容易理解一些。
第二種,先平移到右上角,然后再旋轉(zhuǎn)180度,正好正立。
網(wǎng)絡(luò)上的一張圖片:
坐標(biāo)原點(diǎn)在左下角,我們將倒立的圖片先平移到右上角,再順時(shí)針旋轉(zhuǎn)180度正好形成正立。
源代碼
小伙伴們可以到github下載源代碼哦:https://github.com/CoderJackyHuang/CALayerDemo
閱讀原文
關(guān)注我
微信公眾號(hào):iOSDevShares
有問(wèn)必答QQ群:324400294
總結(jié)
- 上一篇: 决心书之学习linux高级运维
- 下一篇: Crawler - 如何爬取列表后进行文