版本記錄
版本號 | 時間 |
---|---|
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 - 幾何屬性
圖層的幾何屬性指定相對于其父層如何顯示。 幾何還指定了用于圖層圓角的半徑以及應用于圖層及其子圖層的變換。 下圖示出了示例層的邊界矩形。
以下CALayer屬性指定圖層的幾何圖形:
frame (computed from the bounds and position and is not animatable)
注意:cornerRadius
屬性是在iOS 3.0 以后加的。
Background Properties - 背景屬性
Core Animation渲染的第一件事就是層的背景。 您可以為背景指定顏色。 在OS X中,您還可以指定要應用于背景內容的Core Image過濾器。 下圖顯示了樣品層的兩個版本。 左側的圖層具有backgroundColor
屬性,而右側的圖層沒有背景顏色,但是有一些內容和一個夾點失真濾鏡分配給其backgroundFilters
屬性。
背景過濾器應用于層后面的內容,主要由父層的內容組成。 您可以使用背景過濾器來使前景層內容脫穎而出; 例如,通過應用模糊濾波器。
以下CALayer屬性會影響圖層背景的顯示:
backgroundFilters (not supported in iOS)
平臺注意:在iOS中,backgroundFilters
屬性在CALayer類中公開,但您分配給此屬性的過濾器將被忽略。
Layer Content - 層的內容
如果圖層有任何內容,則該內容將在背景顏色之上呈現。 您可以通過直接設置位圖,使用委托來指定內容,或通過對圖層進行子類化和直接繪制內容來提供圖層內容。 您可以使用許多不同的繪圖技術(包括Quartz,Metal,OpenGL和Quartz Composer
)來提供該內容。 下圖顯示了一個示例層,其內容是直接設置的位圖。 位圖內容由右下角的Automator
圖標的大部分透明空間組成。
具有角半徑的圖層不會自動剪切其內容; 然而,將圖層的masksToBounds
屬性設置為YES
會導致圖層剪切到其圓角半徑。
以下CALayer屬性會影響圖層內容的顯示:
Sublayers Content - 子圖層的內容
任何圖層可能包含一個或多個子圖層,稱為子圖層。 子層相對于父層的邊界矩形遞歸呈現并定位。 此外,Core Animation
將父層的子層轉換應用于相對于父層的錨點的每個子層。 您可以使用子層變換將透視圖和其他效果均勻地應用于所有圖層。 下圖展示出了具有兩個子層的樣品層。 左側的版本包括背景顏色,而右側的版本不包含。
將圖層的masksToBounds
屬性設置為YES
會將任何子圖層剪切到圖層的邊界。
以下CALayer屬性會影響圖層子圖層的顯示:
Border Attributes - 邊界特性
圖層可以使用指定的顏色和寬度顯示可選邊框。 邊框跟隨層的邊界矩形,并考慮到任何角半徑值。 圖A-5顯示了應用邊框后的樣品層。 請注意,層之外的內容和子層被渲染在邊框的下方。
以下CALayer屬性會影響圖層邊框的顯示:
平臺注意:borderColor
和borderWidth
屬性僅在iOS 3.0及更高版本中受支持。
Filters Property - 過濾器屬性
在OS X中,您可以對圖層的內容應用一個或多個過濾器,并使用自定義合成過濾器來指定圖層的內容如何與其底層的內容混合。 圖A-6顯示了應用了Core Image
后綴濾鏡的樣品層。
以下CALayer屬性指定圖層內容過濾器:
平臺注意:在iOS中,圖層會忽略您分配給它們的任何過濾器。
Shadow Properties - 陰影屬性
圖層可以顯示陰影效果并配置其形狀,不透明度,顏色,偏移和模糊半徑。 如果您沒有指定自定義陰影形狀,則陰影基于圖層中不完全透明的部分。 下圖顯示了使用紅色陰影的相同樣品層的幾種不同版本。 左和中間版本包括背景顏色,因此陰影僅在圖層的邊框周圍顯示。 但是,右側的版本不包含背景顏色。 在這種情況下,陰影將應用于圖層的內容,邊框和子圖層。
以下CALayer
屬性會影響圖層陰影的顯示:
平臺注意:iOS 3.2及更高版本中支持shadowColor,shadowOffset,shadowOpacity和shadowRadius
屬性。 iOS 3.2及更高版本以及OS X v10.7及更高版本支持shadowPath屬性。
Opacity Property - 不透明屬性
圖層的不透明度屬性決定了通過圖層顯示多少背景內容。 下圖顯示了其不透明度設置為0.5的樣品層。 這允許背景圖像的部分顯示通過。
以下CALayer屬性指定圖層的不透明度:
Mask Properties - 遮罩屬性
您可以使用掩碼來遮蓋圖層內容的全部或部分內容。 掩碼本身是一個層對象,其alpha通道用于確定被阻止的內容和傳輸的內容。 掩模層的內容的不透明部分允許下面的層內容顯示通過,而透明部分部分或完全遮蔽底層內容。 下圖示出了與掩模層和兩個不同背景合成的樣品層。 在左側版本中,圖層的不透明度設置為1.0。 在右側的版本中,圖層的不透明度設置為0.5,這增加了通過圖層的蒙版部分傳輸的背景內容的數量。
以下CALayer屬性指定圖層的掩碼:
平臺注意:iOS 3.0及更高版本支持mask屬性。
后記
未完,待續~~~