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

版本記錄

版本號 時間
V1.0 2017.09.23

前言

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

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

在渲染過程中,Core Animation會采用不同的圖層屬性,并以特定的順序渲染它們。 此順序決定層的最終外觀。 本章說明了通過設置不同圖層樣式屬性實現的渲染結果。

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


Geometry Properties - 幾何屬性

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

Layer geometry

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

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


Background Properties - 背景屬性

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

Layer with background color

背景過濾器應用于層后面的內容,主要由父層的內容組成。 您可以使用背景過濾器來使前景層內容脫穎而出; 例如,通過應用模糊濾波器。

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

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


Layer Content - 層的內容

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

Layer displaying a bitmap image

具有角半徑的圖層不會自動剪切其內容; 然而,將圖層的masksToBounds屬性設置為YES會導致圖層剪切到其圓角半徑。

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


Sublayers Content - 子圖層的內容

任何圖層可能包含一個或多個子圖層,稱為子圖層。 子層相對于父層的邊界矩形遞歸呈現并定位。 此外,Core Animation將父層的子層轉換應用于相對于父層的錨點的每個子層。 您可以使用子層變換將透視圖和其他效果均勻地應用于所有圖層。 下圖展示出了具有兩個子層的樣品層。 左側的版本包括背景顏色,而右側的版本不包含。

Layer displaying the sublayers content

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

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


Border Attributes - 邊界特性

圖層可以使用指定的顏色和寬度顯示可選邊框。 邊框跟隨層的邊界矩形,并考慮到任何角半徑值。 圖A-5顯示了應用邊框后的樣品層。 請注意,層之外的內容和子層被渲染在邊框的下方。

Layer displaying the border attributes content

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

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


Filters Property - 過濾器屬性

在OS X中,您可以對圖層的內容應用一個或多個過濾器,并使用自定義合成過濾器來指定圖層的內容如何與其底層的內容混合。 圖A-6顯示了應用了Core Image后綴濾鏡的樣品層。

Layer displaying the filters properties

以下CALayer屬性指定圖層內容過濾器:

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


Shadow Properties - 陰影屬性

圖層可以顯示陰影效果并配置其形狀,不透明度,顏色,偏移和模糊半徑。 如果您沒有指定自定義陰影形狀,則陰影基于圖層中不完全透明的部分。 下圖顯示了使用紅色陰影的相同樣品層的幾種不同版本。 左和中間版本包括背景顏色,因此陰影僅在圖層的邊框周圍顯示。 但是,右側的版本不包含背景顏色。 在這種情況下,陰影將應用于圖層的內容,邊框和子圖層。

Layer displaying the shadow properties

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

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


Opacity Property - 不透明屬性

圖層的不透明度屬性決定了通過圖層顯示多少背景內容。 下圖顯示了其不透明度設置為0.5的樣品層。 這允許背景圖像的部分顯示通過。

Layer including the opacity property

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


Mask Properties - 遮罩屬性

您可以使用掩碼來遮蓋圖層內容的全部或部分內容。 掩碼本身是一個層對象,其alpha通道用于確定被阻止的內容和傳輸的內容。 掩模層的內容的不透明部分允許下面的層內容顯示通過,而透明部分部分或完全遮蔽底層內容。 下圖示出了與掩模層和兩個不同背景合成的樣品層。 在左側版本中,圖層的不透明度設置為1.0。 在右側的版本中,圖層的不透明度設置為0.5,這增加了通過圖層的蒙版部分傳輸的背景內容的數量。

Layer composited with the mask property

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

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

后記

未完,待續~~~

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,321評論 6 543
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,559評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,442評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,835評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,581評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,922評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,931評論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,096評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,639評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,374評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,591評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,104評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,789評論 3 349
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,196評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,524評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,322評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,554評論 2 379

推薦閱讀更多精彩內容