CALayer

界面中看得到的東西就是CALayer

我們見的最多的就是 UIView, 但是每個 UIView 中可以看得見的東西是 CALayer漆羔。

// 每個 UIView 對象都會有一個 layer 的 root 圖層梧奢。
@property(nonatomic,readonly,retain) CALayer *layer; 

創(chuàng)建UIView對象時,UIView內(nèi)部會自動創(chuàng)建一個圖層(即CALayer對象)演痒,通過UIView的layer屬性可以訪問這個層亲轨。
UIView需要顯示到屏幕上時,會調(diào)用drawRect:方法進行繪圖嫡霞,并且會將所有內(nèi)容繪制在自己的圖層上瓶埋,繪圖完畢后,系統(tǒng)會將圖層拷貝到屏幕上诊沪,于是就完成了UIView的顯示
換句話說养筒。
UIView本身不具備顯示的功能,擁有顯示功能的是它內(nèi)部的圖層端姚。

UIView 視覺相關的一切我們都可以調(diào)整 view 的 layer 來達到目的晕粪。

view.layer.borderColor  // 邊框顏色
view.layer.borderWidth  // 邊框?qū)挾?view.layer.cornerRadius  // 圓角
view.layer.masksToBounds  // 切除多余(切除找出主圖層(根圖層)部分的內(nèi)容)

view.layer.shadowOffse  // 偏移(正右負數(shù)左)
view.layer.shadowColor  // 顏色
view.layer.shadowOpacity  // 透明度
view.layer.shadowPath     // 路徑
view.layer.shadowRadius  // 半徑

// 對陰影設置有影響
view.layer.masksToBounds
view.clipsToBounds

view.layer.contents = UIImage().cgImage  // 設置圖片
view.layer.contentsScale =   // 內(nèi)容比例(和圖片配合使用)

view 和 layer 在形變上的區(qū)別

// 2D 變換
view.transform = CGAffineTransform(scaleX: 10, y: 10)
// 3D 變換
view.layer.transform =  CATransform3DMakeScale(10, 10, 10)

layer

let layer = CALayer()
layer.backgroundColor = UIColor.red.cgColor

// 大部分情況下 bounds + position 結(jié)合使用設置位置。 
// 基本不用frame
layer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
layer.position = CGPoint(x: 100, y: 100)

UIView和CALayer的選擇

如果顯示出來的東西需要跟用戶進行交互的話渐裸,用UIView巫湘;如果不需要跟用戶進行交互,用UIView或者CALayer都可以

當然昏鹃,CALayer的性能會高一些尚氛,因為它少了事件處理的功能,更加輕量級洞渤。

UIView可以通過subviews屬性訪問所有的子視圖阅嘶,類似地,CALayer也可以通過sublayers屬性訪問所有的子層

UIView可以通過superview屬性訪問父視圖载迄,類似地讯柔,CALayer也可以通過superlayer屬性訪問父層

position anchorPoint

  • position == view.center
  • anchorPoint(錨點、重心點)

position : 決定圖層中心在父圖層中的位置护昧。
anchorPoint : 圖層中心點在圖層中的偏移魂迄。
默認情況下 position 和 anchorPoint 是重合的。

它的x惋耙、y取值范圍都是0~1捣炬,默認值為(0.5, 0.5)


anchorPoint = (0, 0)



anchorPoint = (0.5, 0.5)



anchorPoint = (1, 1)

anchorPoint = (0.5, 0)

添加一個紅色圖層到綠色圖層上,紅色圖層顯示到什么位置绽榛,由position屬性決定

假設紅色圖層的position是(100遥金,100)

到底把紅色圖層的哪個點移動到(100,100)的坐標位置蒜田,錨點。



紅色圖層的錨點是(0选泻,0)


紅色圖層的錨點是(0.5冲粤,0.5)



紅色圖層的錨點是(1美莫,1)



紅色圖層的錨點是(0.5,0)

隱式動畫

每一個UIView內(nèi)部都默認關聯(lián)著一個CALayer梯捕,我們可用稱這個Layer為Root Layer(根層)

所有的非Root Layer厢呵,也就是手動創(chuàng)建的CALayer對象,都存在著隱式動畫

什么是隱式動畫傀顾?

當對非Root Layer的部分屬性進行修改時襟铭,默認會自動產(chǎn)生一些動畫效果

而這些屬性稱為Animatable Properties(可動畫屬性)

列舉幾個常見的Animatable Properties:

bounds:用于設置CALayer的寬度和高度。修改這個屬性會產(chǎn)生縮放動畫

backgroundColor:用于設置CALayer的背景色短曾。修改這個屬性會產(chǎn)生背景色的漸變動畫

position:用于設置CALayer的位置寒砖。修改這個屬性會產(chǎn)生平移動畫

關閉隱式動畫

CATransaction.begin()
// 關閉
CATransaction.setDisableActions(true)
CATransaction.commit()

layer 自定義

view 自定義

  1. 獲取上下文
  2. 繪制
  3. 渲染
    創(chuàng)建一個類,讓這個類繼承自UIView嫉拐,然后重寫它的DrawRect:方法哩都,然后在該方法中繪制。 調(diào)用 setNeedsDisplay

layer 自定義

  1. 獲取上下文
  2. 繪制
  3. 渲染
    創(chuàng)建一個類婉徘,讓這個類繼承自CALayer漠嵌,然后重寫它的drawInContext: 方法,然后在該方法中繪制盖呼。 調(diào)用 setNeedsDisplay (UIView 在第一次顯示的時候會調(diào)用)
 override func draw(in ctx: CGContext) {
        //1.繪制圖形
        
        //畫一個圓
        ctx.addEllipse(in: CGRect(x: 50, y: 50, width: 50, height: 50))
        //設置屬性(顏色)
        //    [[UIColor yellowColor]set];
        ctx.setFillColor(red: 0, green: 0, blue: 1, alpha: 1)
        
        //2.渲染
        ctx.fillPath()
}

// 發(fā)現(xiàn)不顯示儒鹿,可能是沒有調(diào)用這個方法
layer.setNeedsDisplay()  (layer 需要手動調(diào)用)
最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市几晤,隨后出現(xiàn)的幾起案子约炎,更是在濱河造成了極大的恐慌,老刑警劉巖锌仅,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件章钾,死亡現(xiàn)場離奇詭異,居然都是意外死亡热芹,警方通過查閱死者的電腦和手機贱傀,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來伊脓,“玉大人府寒,你說我怎么就攤上這事”ㄇ唬” “怎么了株搔?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長纯蛾。 經(jīng)常有香客問我纤房,道長,這世上最難降的妖魔是什么翻诉? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任炮姨,我火速辦了婚禮捌刮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘舒岸。我一直安慰自己绅作,他們只是感情好,可當我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布蛾派。 她就那樣靜靜地躺著俄认,像睡著了一般。 火紅的嫁衣襯著肌膚如雪洪乍。 梳的紋絲不亂的頭發(fā)上眯杏,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天,我揣著相機與錄音典尾,去河邊找鬼役拴。 笑死,一個胖子當著我的面吹牛钾埂,可吹牛的內(nèi)容都是我干的河闰。 我是一名探鬼主播,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼褥紫,長吁一口氣:“原來是場噩夢啊……” “哼姜性!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起髓考,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤部念,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后氨菇,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體儡炼,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年查蓉,在試婚紗的時候發(fā)現(xiàn)自己被綠了乌询。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡豌研,死狀恐怖妹田,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情鹃共,我是刑警寧澤鬼佣,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站霜浴,受9級特大地震影響晶衷,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一晌纫、第九天 我趴在偏房一處隱蔽的房頂上張望驻龟。 院中可真熱鬧,春花似錦缸匪、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至闯冷,卻和暖如春砂心,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蛇耀。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工辩诞, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人纺涤。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓译暂,卻偏偏與公主長得像,于是被迫代替她去往敵國和親撩炊。 傳聞我的和親對象是個殘疾皇子外永,可洞房花燭夜當晚...
    茶點故事閱讀 44,577評論 2 353

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

  • 在iOS中隨處都可以看到絢麗的動畫效果,實現(xiàn)這些動畫的過程并不復雜拧咳,今天將帶大家一窺ios動畫全貌伯顶。在這里你可以看...
    每天刷兩次牙閱讀 8,485評論 6 30
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現(xiàn)這些動畫的過程并不復雜骆膝,今天將帶大家一窺iOS動畫全貌祭衩。在這里你可以看...
    F麥子閱讀 5,110評論 5 13
  • 轉(zhuǎn)載:http://www.cnblogs.com/jingdizhiwa/p/5601240.html 1.ge...
    F麥子閱讀 1,544評論 0 1
  • 概覽 在iOS中隨處都可以看到絢麗的動畫效果掐暮,實現(xiàn)這些動畫的過程并不復雜,今天將帶大家一窺iOS動畫全貌愉择。在這里你...
    被吹落的風閱讀 1,563評論 1 2
  • CALayer - 在iOS中劫乱,你能看得見摸得著的東西基本上都是UIView,比如一個按鈕锥涕、一個文本標簽衷戈、一個文本...
    Hevin_Chen閱讀 1,140評論 0 10