iOS-核心動畫詳解之CALayer

1. CALayer的基本操作.

1. CALayer簡介:

CALayer我們又稱為層,在每個UIView內(nèi)部都有一個layer的屬性,UIView之所以能夠顯示,就是因為它里面有l(wèi)ayer層,才具有顯示的功能,我們通過操作CALayer對象,可以很方便地調(diào)整UIView的一些外觀屬性,例如可以給UIView設(shè)置陰影,圓角,邊框等等...

2. 操作layer改變UIView外觀.

2.1 設(shè)置陰影

//默認圖層是有陰影的, 只不過是透明的。1為不透明,0為透明
_RedView.layer.shadowOpacity = 1;
//設(shè)置陰影的偏移量
self.imageV.layer.shadowOffset = CGSizeMake(-30, -10);
//設(shè)置陰影的模糊程度
self.imageV.layer.shadowRadius = 10;
//設(shè)置陰影的圓角
_RedView.layer.shadowRadius  =10;
//設(shè)置陰影的顏色,把UIKit轉(zhuǎn)換成CoreGraphics框架,用.CG開頭
_RedView.layer.shadowColor = [UIColor blueColor].CGColor;

2.2.設(shè)置邊框

設(shè)置圖層邊框,在圖層中使用CoreGraphics的CGColorRef
//設(shè)置邊框的顏色
_RedView.layer.borderColor = [UIColor whiteColor].CGColor;
//設(shè)置邊框的寬度
_RedView.layer.borderWidth = 2;

2.3.設(shè)置圓角

圖層的圓角半徑,圓角半徑為寬度的一半, 就是一個圓
_RedView.layer.cornerRadius = 50;

3. 操作layer改變UIImageView的外觀.

3.1 設(shè)置陰影

//UIView本身就自帶陰影效果,它是透明.
_imageView.layer.shadowOpacity = 1;
//設(shè)置陰影的偏移量
_imageView.layer.shadowOffset = CGSizeMake(-30, -10);
//設(shè)置陰影的模糊程度
_imageView.layer.shadowRadius = 10;
//設(shè)置陰影的顏色
_imageView.layer.shadowColor = [UIColor blueColor].CGColor;

3.2 設(shè)置圖形邊框

//設(shè)置邊框?qū)挾?_imageView.layer.borderWidth = 2;
//設(shè)置邊框顏色
_imageView.layer.borderColor = [UIColor whiteColor].CGColor;

3.3 設(shè)置圖片的圓角半徑

//我們設(shè)置的所有l(wèi)ayer的屬性只作用在根層上,根層設(shè)置為圓形后,其上面的圖片并不會改變,因此需要裁剪。
_imageView.layer.cornerRadius = 50;
//裁剪,超出裁剪區(qū)域的部分全部裁剪掉
_imageView.layer.masksToBounds = YES;

注意:UIImageView當(dāng)中Image并不是直接添加在根層上面的.而是添加在layer當(dāng)中的contents層里.
我們設(shè)置層的所有屬性它只作用在根層上面.對contents里面的東西并不起作用.
所以我們看不到圖片有圓角的效果.
想要讓圖片有圓角的效果.可以把masksToBounds這個屬性設(shè)為YES.把就會把超過根層以外的東西都給裁剪掉.

4. layer的 CATransform3D屬性.

只有旋轉(zhuǎn)的時候才可以看出3D的效果.

//x,y,z 分別代表x,y,z軸.      
//旋轉(zhuǎn)
CATransform3DMakeRotation(M_PI, 1, 0, 0);
//平移
CATransform3DMakeTranslation(x,y,z)
//縮放
CATransform3DMakeScale(x,y,z);
//可以通過KVC的方式進行設(shè)置屬性.
//但是CATransform3DMakeRotation的值是一個結(jié)構(gòu)體, 所以要把結(jié)構(gòu)轉(zhuǎn)成對象.
NSValue *value = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI, 1, 0, 0)];
[_imageView.layer setValue:value forKeyPath:@"transform.scale"];

什么時候用KVC?
當(dāng)需要做一些快速縮放,平移,二維的旋轉(zhuǎn)時用KVC.
比如: [_imageView.layer setValue:@0.5 forKeyPath:@"transform.scale"];快速的進行縮放.

后面forKeyPath屬性值不是亂寫的.蘋果文檔當(dāng)中給了相關(guān)的屬性.

forKeyPath屬性值

2. 自定義CALayer.

2.1 如何自定義Layer.

自定義CALayer的方式創(chuàng)建UIView的方式非常相似.

CALayer *layer = [CALayer layer];
layer.frame = CGRectMake(50, 50, 100, 100);
layer.backgroundColor = [UIColor redColor].CGColor;
[self.view.layer addSublayer:layer];
給layer設(shè)置圖片.
layer.contents = (id)[UIImage imageNamed:@"icon"].CGImage;

2.2 關(guān)于CALayer的疑惑?

為什么要使用CGImageRef、CGColorRef?

CALayer定義在QuartzCore框架中.
CGImageRef、CGColorRef兩種數(shù)據(jù)類型定義在CoreGraphics框架中.
UIColor、UIImage定義在UIKit框架中.
QuartzCore框架和CoreGraphics框架是可以跨平臺使用的,在iOS和Mac OSX上都能使用.
但是UIKit框架只能在iOS中使用.
所以為了保證可移植性,QuartzCore不能使用UIImage、UIColor,只能使用CGImageRef、CGColorRef.

UIView和CALayer都能夠顯示東西,該怎樣選擇?

對比CALayer,UIView多了一個事件處理的功能。也就是說,CALayer不能處理用戶的觸摸事件,而UIView可以,但是CALayer的性能會高一些,因為它少了事件處理的功能,更加輕量級
如果顯示出來的東西需要跟用戶進行交互的話,用UIView;
如果不需要跟用戶進行交互,用UIView或者CALayer都可以
我們平常開發(fā)中一般用UIView.

3. CALayer的兩個重要屬性position和anchorPoint

position和anchorPoint是CAlayer的兩個屬性.我們以前修改一個控件的位置都是能過Frame的方式進行修改.現(xiàn)在利用CALayer的position和anchorPoint屬性也能夠修改控件的位置.

這兩個屬性是配合使用的.
position:它是用來設(shè)置當(dāng)前的layer在父控件當(dāng)中的位置的.所以它的坐標(biāo)原點.以父控件的左上角為(0.0)點.
anchorPoint:它是決點CALayer身上哪一個點會在position屬性所指的位置
anchorPoint是以當(dāng)前的layer左上角為原點(0.0),它的取值范圍是0~1,默認位置在中間也就是(0.5,0.5).
anchorPoint又稱錨點.就是把錨點定到position所指的位置.
兩者結(jié)合使用.想要修改某個控件的位置,我們可以設(shè)置它的position點.
設(shè)置完畢后.layer身上的anchorPoint會自動定到position所在的位置.

position和anchorpint圖示

4. 隱式動畫.

4.1 什么是隱式動畫?

了解什么是隱式動畫前,要先了解什么是根層和非根層.
根層:UIView內(nèi)部自動關(guān)聯(lián)著的那個layer我們稱它是根層.
非根層:自己手動創(chuàng)建的層,稱為非根層.

隱式動畫就是當(dāng)對非根層的部分屬性進行修改時, 它會自動的產(chǎn)生一些動畫的效果.我們稱這個默認產(chǎn)生的動畫為隱式動畫.這些屬性稱為Animatable Properties(可動畫屬性)。
也就是 手動創(chuàng)建的CALayer對象,都存在著隱式動畫

列舉常見的Animatable Properties:

  1. bounds:CALayer的寬度和高度,修改時產(chǎn)生縮放動畫。
  2. backgroundColor:背景顏色,修改時產(chǎn)生背景顏色漸變動畫效果。
  3. position:CALayer的位置,修改時產(chǎn)生平移動畫

例:

如何取消隱式動畫?
首先要了解動畫底層是怎么做的.動畫的底層是包裝成一個事務(wù)來進行的.
什么是事務(wù)?
很多操作綁定在一起,當(dāng)這些操作執(zhí)行完畢后,才去執(zhí)行下一個操作.

因此我們自己開啟事務(wù),并在事物中設(shè)置沒有動畫就會隱藏動畫了

//開啟事務(wù)
[CATransaction begin];
//設(shè)置事務(wù)沒有動畫
[CATransaction setDisableActions:YES];
//設(shè)置動畫執(zhí)行的時長
[CATransaction setAnimationDuration:2];
//這其中修改屬性就沒有動畫了

//提交事務(wù)
[CATransaction commit];

?本文借鑒了很多前輩的文章,如果有不對的地方請指正,歡迎大家一起交流學(xué)習(xí) xx_cc 。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • CALayer的基本操作. CALayer簡介:CALayer我們又稱為層,在每個UIView內(nèi)部都有一個laye...
    _山人自有妙計閱讀 1,480評論 0 0
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現(xiàn)這些動畫的過程并不復(fù)雜,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,551評論 6 30
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現(xiàn)這些動畫的過程并不復(fù)雜,今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,141評論 5 13
  • 在iOS實際開發(fā)中常用的動畫無非是以下四種:UIView動畫,核心動畫,幀動畫,自定義轉(zhuǎn)場動畫。 1.UIView...
    請叫我周小帥閱讀 3,142評論 1 23
  • Core Animation Core Animation,中文翻譯為核心動畫,它是一組非常強大的動畫處理API,...
    45b645c5912e閱讀 3,048評論 0 21