Layer Style Property Animations——(2015-11-28)

在元素的渲染過(guò)程當(dāng)中,核心動(dòng)畫(huà)對(duì)layer的各個(gè)屬性以一定的順序進(jìn)行渲染。而這個(gè)順序也決定了layer最終所呈現(xiàn)的狀態(tài)。我們這里主要講述的是對(duì)layer的不同屬性的設(shè)置所得到的最終的不同的效果。

layer的幾何屬性確定了相對(duì)于父控件的展示屬性。這些也同樣可以設(shè)定layer的圓角屬性以及一些應(yīng)用于自身layer以及子layer屬性的transform屬性。下圖展示了實(shí)例layer的bounds屬性:

1128-1.png

CALayer的以下屬性確定了layer的幾何屬性:

  • bounds
  • position
  • frame
  • anchorPoint
  • cornerFadius
  • transform
  • zPosition

背景屬性

核心動(dòng)畫(huà)首先渲染的是layer的背景。你可以定義layer的背景色。下圖左側(cè)的表示的是設(shè)置了layer的背景色,右側(cè)的表示的是沒(méi)有背景色,有border邊框并且給它的backgroundFilters屬性設(shè)置了一個(gè)捏合變形的效果。

1128-.png

background filter屬性是應(yīng)用在該layer后面的內(nèi)容的一個(gè)屬性,一般指的是父層的內(nèi)容。你也可以使用background filter屬性來(lái)突出前層的內(nèi)容——例如設(shè)置一個(gè)模糊的效果。
以下的一些屬性影響了layer所展示的內(nèi)容的背景:

  • backgroundColor
  • backgroundFilters(not iOS)

layer展示的內(nèi)容

如果layer上有展示的內(nèi)容的話,這些內(nèi)容會(huì)被渲染在背景色之上。可以通過(guò)代理直接設(shè)置bitmap來(lái)設(shè)置內(nèi)容
或者是通過(guò)繼承自當(dāng)前l(fā)ayer然后直接繪制內(nèi)容??梢允褂闷渌睦L制技術(shù)(Quartz, Metal, OpenGL, and Quartz Composer)等。下圖通過(guò)bitmap直接設(shè)置內(nèi)容,圖像展示在右下角并且留有大片的空白空間。

1128-2.png

layer并不會(huì)自動(dòng)的設(shè)置圓角屬性,可以通過(guò)設(shè)置layer的masksToBounds = YES來(lái)設(shè)置圓角。

下面的這些屬性會(huì)影響layer展示的內(nèi)容:

  • contents
  • contentsGravity
  • masksToBounds

子層內(nèi)容 sublayers Content

任何layer都可能包含一個(gè)或者多個(gè)子層,子層是遞歸的擺放在父層的相對(duì)矩形框內(nèi)。并且可以通過(guò)sublayerTransform設(shè)置子層相對(duì)父層的位置屬性。
下圖中有兩個(gè)子層,左側(cè)的layer設(shè)置了背景色而右側(cè)的沒(méi)有設(shè)置背景色:

1128-4.png

通過(guò)masksToBounds = YES可以將超出父層的子層內(nèi)容切除。下面的這些屬性會(huì)影響到子層的內(nèi)容:

  • sublayers
  • maskToBounds
  • sublayerTransform

Border Attributes(邊框?qū)傩?

可以給layer設(shè)置一個(gè)有一定寬度和顏色的邊框。邊框是bounds的一部分并且包括到圓角屬性值。下圖展示了一個(gè)擁有邊框的layer,應(yīng)該可以注意到,layer的內(nèi)容和子層的內(nèi)容的繪制都在邊框下面。

1128-3.png

影響邊框的一些屬性:

  • borderCorlor
  • borderWidth

陰影

layer可以展示陰影效果,并且可以設(shè)置陰影的形狀、透明度、顏色、偏移量以及模糊值。下面展示了幾個(gè)不同的效果(左邊的和中間的因?yàn)橛斜尘吧木壒?,所以陰影的偏移量在邊框周圍,而右邊的因?yàn)闆](méi)有背景色,所以陰影就被設(shè)置給了layer、layer的內(nèi)容以及子層的內(nèi)容):

1128-5.png

影響到layer的陰影的一些屬性:

  • shadowColor
  • shadowOffset
  • shadowOpacity
  • shadowRadius
  • shadowPath

透明度

layer的透明度表示的是背景的內(nèi)容有多少能夠透過(guò)layer展示出來(lái)。下圖展示的是一個(gè)有opacity = 0.5的情況。

1128.png

設(shè)置layer透明度的屬性值為:opacity

mask

你可以通過(guò)mask屬性來(lái)掩蓋全部或者部分layer展示的內(nèi)容。mask是layer的一個(gè)屬性,可以決定哪些內(nèi)容顯示哪些被影藏。左側(cè)的圖種layer的opacity屬性為1.0,而右側(cè)的則opacity屬性值為0.5。

1128-6.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 轉(zhuǎn)載:http://www.itdecent.cn/p/32fcadd12108 每個(gè)UIView有一個(gè)伙伴稱為l...
    F麥子閱讀 6,569評(píng)論 0 13
  • 每個(gè)UIView有一個(gè)伙伴稱為layer,一個(gè)CALayer。UIView實(shí)際上并沒(méi)有把自己畫(huà)到屏幕上;它繪制本身...
    shenzhenboy閱讀 3,253評(píng)論 0 17
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫(huà)效果,實(shí)現(xiàn)這些動(dòng)畫(huà)的過(guò)程并不復(fù)雜,今天將帶大家一窺ios動(dòng)畫(huà)全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,690評(píng)論 6 30
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫(huà)效果,實(shí)現(xiàn)這些動(dòng)畫(huà)的過(guò)程并不復(fù)雜,今天將帶大家一窺iOS動(dòng)畫(huà)全貌。在這里你可以看...
    F麥子閱讀 5,268評(píng)論 5 13
  • Core Animation Core Animation,中文翻譯為核心動(dòng)畫(huà),它是一組非常強(qiáng)大的動(dòng)畫(huà)處理API,...
    45b645c5912e閱讀 3,154評(píng)論 0 21

友情鏈接更多精彩內(nèi)容