實現(xiàn)動畫方式深度解析(十三) —— Core Animation之圖層樣式屬性動畫(十)

版本記錄

版本號 時間
V1.0 2017.09.23

前言

app中好的炫的動畫可以讓用戶耳目一新泰佳,為產(chǎn)品增色不少,關(guān)于動畫的實現(xiàn)我們可以用基本動畫尘吗、關(guān)鍵幀動畫逝她、序列幀動畫以及基于CoreGraphic的動畫等等,接下來這幾篇我就介紹下我可以想到的幾種動畫繪制方法睬捶。具體Demo示例已開源到Github —— 刀客傳奇黔宛,感興趣的可以看我寫的另外幾篇。
1. 實現(xiàn)動畫方式深度解析(一) —— 播放GIF動畫(一)
2. 實現(xiàn)動畫方式深度解析(二) —— 播放GIF動畫之框架FLAnimatedImage的使用(二)
3. 實現(xiàn)動畫方式深度解析(三) —— 播放序列幀動畫(一)
4. 實現(xiàn)動畫方式深度解析(四) —— QuartzCore框架(一)
5. 實現(xiàn)動畫方式深度解析(五) —— QuartzCore框架之CoreAnimation(二)
6. 實現(xiàn)動畫方式深度解析(六) —— Core Animation Basics(三)
7. 實現(xiàn)動畫方式深度解析(七) —— Core Animation之Setting Up Layer Objects(四)
8. 實現(xiàn)動畫方式深度解析(八) —— Core Animation之動畫層內(nèi)容 (五)
9. 實現(xiàn)動畫方式深度解析(九) —— Core Animation之構(gòu)建圖層層級 (六)
10. 實現(xiàn)動畫方式深度解析(十) —— Core Animation之高級動畫技巧 (七)
11. 實現(xiàn)動畫方式深度解析(十一) —— Core Animation之更改圖層的默認行為(八)
12. 實現(xiàn)動畫方式深度解析(十二) —— Core Animation之提高動畫的性能(九)

Layer Style Property Animations - 圖層樣式屬性動畫

在渲染過程中擒贸,Core Animation會采用不同的圖層屬性臀晃,并以特定的順序渲染它們。 此順序決定層的最終外觀介劫。 本章說明了通過設(shè)置不同圖層樣式屬性實現(xiàn)的渲染結(jié)果徽惋。

注意:Mac OS X和iOS上可用的圖層樣式屬性有所不同,并在本章中提到座韵。


Geometry Properties - 幾何屬性

圖層的幾何屬性指定相對于其父層如何顯示险绘。 幾何還指定了用于圖層圓角的半徑以及應(yīng)用于圖層及其子圖層的變換。 下圖示出了示例層的邊界矩形誉碴。

Layer geometry

以下CALayer屬性指定圖層的幾何圖形:

注意:cornerRadius屬性是在iOS 3.0 以后加的宦棺。


Background Properties - 背景屬性

Core Animation渲染的第一件事就是層的背景。 您可以為背景指定顏色黔帕。 在OS X中代咸,您還可以指定要應(yīng)用于背景內(nèi)容的Core Image過濾器。 下圖顯示了樣品層的兩個版本成黄。 左側(cè)的圖層具有backgroundColor屬性侣背,而右側(cè)的圖層沒有背景顏色,但是有一些內(nèi)容和一個夾點失真濾鏡分配給其backgroundFilters屬性慨默。

Layer with background color

背景過濾器應(yīng)用于層后面的內(nèi)容贩耐,主要由父層的內(nèi)容組成。 您可以使用背景過濾器來使前景層內(nèi)容脫穎而出; 例如厦取,通過應(yīng)用模糊濾波器潮太。

以下CALayer屬性會影響圖層背景的顯示:

平臺注意:在iOS中,backgroundFilters屬性在CALayer類中公開,但您分配給此屬性的過濾器將被忽略铡买。


Layer Content - 層的內(nèi)容

如果圖層有任何內(nèi)容更鲁,則該內(nèi)容將在背景顏色之上呈現(xiàn)。 您可以通過直接設(shè)置位圖奇钞,使用委托來指定內(nèi)容澡为,或通過對圖層進行子類化和直接繪制內(nèi)容來提供圖層內(nèi)容。 您可以使用許多不同的繪圖技術(shù)(包括Quartz景埃,Metal媒至,OpenGL和Quartz Composer)來提供該內(nèi)容。 下圖顯示了一個示例層谷徙,其內(nèi)容是直接設(shè)置的位圖拒啰。 位圖內(nèi)容由右下角的Automator圖標的大部分透明空間組成。

Layer displaying a bitmap image

具有角半徑的圖層不會自動剪切其內(nèi)容; 然而完慧,將圖層的masksToBounds屬性設(shè)置為YES會導(dǎo)致圖層剪切到其圓角半徑谋旦。

以下CALayer屬性會影響圖層內(nèi)容的顯示:


Sublayers Content - 子圖層的內(nèi)容

任何圖層可能包含一個或多個子圖層,稱為子圖層屈尼。 子層相對于父層的邊界矩形遞歸呈現(xiàn)并定位册着。 此外,Core Animation將父層的子層轉(zhuǎn)換應(yīng)用于相對于父層的錨點的每個子層脾歧。 您可以使用子層變換將透視圖和其他效果均勻地應(yīng)用于所有圖層指蚜。 下圖展示出了具有兩個子層的樣品層。 左側(cè)的版本包括背景顏色涨椒,而右側(cè)的版本不包含摊鸡。

Layer displaying the sublayers content

將圖層的masksToBounds屬性設(shè)置為YES會將任何子圖層剪切到圖層的邊界。

以下CALayer屬性會影響圖層子圖層的顯示:


Border Attributes - 邊界特性

圖層可以使用指定的顏色和寬度顯示可選邊框蚕冬。 邊框跟隨層的邊界矩形免猾,并考慮到任何角半徑值。 圖A-5顯示了應(yīng)用邊框后的樣品層囤热。 請注意猎提,層之外的內(nèi)容和子層被渲染在邊框的下方。

Layer displaying the border attributes content

以下CALayer屬性會影響圖層邊框的顯示:

平臺注意:borderColorborderWidth屬性僅在iOS 3.0及更高版本中受支持旁蔼。


Filters Property - 過濾器屬性

在OS X中锨苏,您可以對圖層的內(nèi)容應(yīng)用一個或多個過濾器,并使用自定義合成過濾器來指定圖層的內(nèi)容如何與其底層的內(nèi)容混合棺聊。 圖A-6顯示了應(yīng)用了Core Image后綴濾鏡的樣品層伞租。

Layer displaying the filters properties

以下CALayer屬性指定圖層內(nèi)容過濾器:

平臺注意:在iOS中,圖層會忽略您分配給它們的任何過濾器限佩。


Shadow Properties - 陰影屬性

圖層可以顯示陰影效果并配置其形狀葵诈,不透明度裸弦,顏色,偏移和模糊半徑作喘。 如果您沒有指定自定義陰影形狀理疙,則陰影基于圖層中不完全透明的部分。 下圖顯示了使用紅色陰影的相同樣品層的幾種不同版本泞坦。 左和中間版本包括背景顏色窖贤,因此陰影僅在圖層的邊框周圍顯示。 但是贰锁,右側(cè)的版本不包含背景顏色赃梧。 在這種情況下,陰影將應(yīng)用于圖層的內(nèi)容李根,邊框和子圖層。

Layer displaying the shadow properties

以下CALayer屬性會影響圖層陰影的顯示:

平臺注意:iOS 3.2及更高版本中支持shadowColor几睛,shadowOffset房轿,shadowOpacity和shadowRadius屬性。 iOS 3.2及更高版本以及OS X v10.7及更高版本支持shadowPath屬性所森。


Opacity Property - 不透明屬性

圖層的不透明度屬性決定了通過圖層顯示多少背景內(nèi)容囱持。 下圖顯示了其不透明度設(shè)置為0.5的樣品層。 這允許背景圖像的部分顯示通過焕济。

Layer including the opacity property

以下CALayer屬性指定圖層的不透明度:


Mask Properties - 遮罩屬性

您可以使用掩碼來遮蓋圖層內(nèi)容的全部或部分內(nèi)容纷妆。 掩碼本身是一個層對象,其alpha通道用于確定被阻止的內(nèi)容和傳輸?shù)膬?nèi)容晴弃。 掩模層的內(nèi)容的不透明部分允許下面的層內(nèi)容顯示通過掩幢,而透明部分部分或完全遮蔽底層內(nèi)容。 下圖示出了與掩模層和兩個不同背景合成的樣品層上鞠。 在左側(cè)版本中际邻,圖層的不透明度設(shè)置為1.0。 在右側(cè)的版本中芍阎,圖層的不透明度設(shè)置為0.5世曾,這增加了通過圖層的蒙版部分傳輸?shù)谋尘皟?nèi)容的數(shù)量。

Layer composited with the mask property

以下CALayer屬性指定圖層的掩碼:

平臺注意:iOS 3.0及更高版本支持mask屬性谴咸。

后記

未完轮听,待續(xù)~~~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市岭佳,隨后出現(xiàn)的幾起案子血巍,更是在濱河造成了極大的恐慌,老刑警劉巖珊随,帶你破解...
    沈念sama閱讀 217,907評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件藻茂,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機辨赐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評論 3 395
  • 文/潘曉璐 我一進店門优俘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人掀序,你說我怎么就攤上這事帆焕。” “怎么了不恭?”我有些...
    開封第一講書人閱讀 164,298評論 0 354
  • 文/不壞的土叔 我叫張陵叶雹,是天一觀的道長。 經(jīng)常有香客問我换吧,道長折晦,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,586評論 1 293
  • 正文 為了忘掉前任沾瓦,我火速辦了婚禮满着,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘贯莺。我一直安慰自己风喇,他們只是感情好,可當我...
    茶點故事閱讀 67,633評論 6 392
  • 文/花漫 我一把揭開白布缕探。 她就那樣靜靜地躺著魂莫,像睡著了一般。 火紅的嫁衣襯著肌膚如雪爹耗。 梳的紋絲不亂的頭發(fā)上耙考,一...
    開封第一講書人閱讀 51,488評論 1 302
  • 那天,我揣著相機與錄音潭兽,去河邊找鬼琳骡。 笑死,一個胖子當著我的面吹牛讼溺,可吹牛的內(nèi)容都是我干的楣号。 我是一名探鬼主播,決...
    沈念sama閱讀 40,275評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼怒坯,長吁一口氣:“原來是場噩夢啊……” “哼炫狱!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起剔猿,我...
    開封第一講書人閱讀 39,176評論 0 276
  • 序言:老撾萬榮一對情侶失蹤视译,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后归敬,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體酷含,經(jīng)...
    沈念sama閱讀 45,619評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡鄙早,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,819評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了椅亚。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片限番。...
    茶點故事閱讀 39,932評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖呀舔,靈堂內(nèi)的尸體忽然破棺而出弥虐,到底是詐尸還是另有隱情,我是刑警寧澤媚赖,帶...
    沈念sama閱讀 35,655評論 5 346
  • 正文 年R本政府宣布霜瘪,位于F島的核電站,受9級特大地震影響惧磺,放射性物質(zhì)發(fā)生泄漏颖对。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,265評論 3 329
  • 文/蒙蒙 一磨隘、第九天 我趴在偏房一處隱蔽的房頂上張望缤底。 院中可真熱鬧,春花似錦琳拭、人聲如沸训堆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,871評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至膘流,卻和暖如春絮缅,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背呼股。 一陣腳步聲響...
    開封第一講書人閱讀 32,994評論 1 269
  • 我被黑心中介騙來泰國打工耕魄, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人彭谁。 一個月前我還...
    沈念sama閱讀 48,095評論 3 370
  • 正文 我出身青樓吸奴,卻偏偏與公主長得像,于是被迫代替她去往敵國和親缠局。 傳聞我的和親對象是個殘疾皇子则奥,可洞房花燭夜當晚...
    茶點故事閱讀 44,884評論 2 354

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