版本記錄
版本號 | 時間 |
---|---|
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)用于圖層及其子圖層的變換。 下圖示出了示例層的邊界矩形誉碴。
以下CALayer屬性指定圖層的幾何圖形:
frame (computed from the bounds and position and is not animatable)
注意:cornerRadius
屬性是在iOS 3.0 以后加的宦棺。
Background Properties - 背景屬性
Core Animation渲染的第一件事就是層的背景。 您可以為背景指定顏色黔帕。 在OS X中代咸,您還可以指定要應(yīng)用于背景內(nèi)容的Core Image過濾器。 下圖顯示了樣品層的兩個版本成黄。 左側(cè)的圖層具有backgroundColor
屬性侣背,而右側(cè)的圖層沒有背景顏色,但是有一些內(nèi)容和一個夾點失真濾鏡分配給其backgroundFilters
屬性慨默。
背景過濾器應(yīng)用于層后面的內(nèi)容贩耐,主要由父層的內(nèi)容組成。 您可以使用背景過濾器來使前景層內(nèi)容脫穎而出; 例如厦取,通過應(yīng)用模糊濾波器潮太。
以下CALayer屬性會影響圖層背景的顯示:
backgroundFilters (not supported in iOS)
平臺注意:在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
圖標的大部分透明空間組成。
具有角半徑的圖層不會自動剪切其內(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è)的版本不包含摊鸡。
將圖層的masksToBounds
屬性設(shè)置為YES
會將任何子圖層剪切到圖層的邊界。
以下CALayer屬性會影響圖層子圖層的顯示:
Border Attributes - 邊界特性
圖層可以使用指定的顏色和寬度顯示可選邊框蚕冬。 邊框跟隨層的邊界矩形免猾,并考慮到任何角半徑值。 圖A-5顯示了應(yīng)用邊框后的樣品層囤热。 請注意猎提,層之外的內(nèi)容和子層被渲染在邊框的下方。
以下CALayer屬性會影響圖層邊框的顯示:
平臺注意:borderColor
和borderWidth
屬性僅在iOS 3.0及更高版本中受支持旁蔼。
Filters Property - 過濾器屬性
在OS X中锨苏,您可以對圖層的內(nèi)容應(yīng)用一個或多個過濾器,并使用自定義合成過濾器來指定圖層的內(nèi)容如何與其底層的內(nèi)容混合棺聊。 圖A-6顯示了應(yīng)用了Core Image
后綴濾鏡的樣品層伞租。
以下CALayer屬性指定圖層內(nèi)容過濾器:
平臺注意:在iOS中,圖層會忽略您分配給它們的任何過濾器限佩。
Shadow Properties - 陰影屬性
圖層可以顯示陰影效果并配置其形狀葵诈,不透明度裸弦,顏色,偏移和模糊半徑作喘。 如果您沒有指定自定義陰影形狀理疙,則陰影基于圖層中不完全透明的部分。 下圖顯示了使用紅色陰影的相同樣品層的幾種不同版本泞坦。 左和中間版本包括背景顏色窖贤,因此陰影僅在圖層的邊框周圍顯示。 但是贰锁,右側(cè)的版本不包含背景顏色赃梧。 在這種情況下,陰影將應(yīng)用于圖層的內(nèi)容李根,邊框和子圖層。
以下CALayer
屬性會影響圖層陰影的顯示:
平臺注意:iOS 3.2及更高版本中支持shadowColor几睛,shadowOffset房轿,shadowOpacity和shadowRadius
屬性。 iOS 3.2及更高版本以及OS X v10.7及更高版本支持shadowPath屬性所森。
Opacity Property - 不透明屬性
圖層的不透明度屬性決定了通過圖層顯示多少背景內(nèi)容囱持。 下圖顯示了其不透明度設(shè)置為0.5的樣品層。 這允許背景圖像的部分顯示通過焕济。
以下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ù)量。
以下CALayer屬性指定圖層的掩碼:
平臺注意:iOS 3.0及更高版本支持mask屬性谴咸。
后記
未完轮听,待續(xù)~~~