核心動畫(Core Animation)spring
1、Core animation簡單介紹數組
1.Core Animation,中文翻譯爲核心動畫,是一套包含圖形繪製,投影,動畫的Objective–C類集合。它是一組很是強大的動畫處理API,使用它能作出很是炫麗的動畫效果,並且每每是事半功倍。也就是說,使用少許的代碼就能夠實現很是強大的功能。Core Animation自身並非一個繪圖系統。它只是一個負責在硬件上合成和操縱應用內容的基礎構件緩存
2.Core Animation是跨平臺的,能夠用在Mac OS X和iOS平臺。框架
3.Core Animation負責全部的滾動、旋轉、縮小和放大以及全部的iOS動畫效果。其中UIKit類一般都有animated:參數部分,它能夠容許是否使用動畫。函數
4.Core Animation的動畫執行過程都是在後臺操做的,不會阻塞主線程。不阻塞主線程,能夠理解爲在執行動畫的時候還能點擊(按鈕)。用圖形處理硬件操縱位圖要比圖形處理軟件能得到更好的動畫效果。由於操縱的是靜態的位圖,基於圖層的繪圖和基於視圖的繪圖在技術上有明顯的不一樣。對基於視圖的繪圖,對視圖的改變常常會觸發調用視圖的drawRect:方法以重繪視圖內容。可是此種方式的代價相對較高,由於它是CPU在主線程上的操做。Core Animation經過儘量的使用圖形硬件操縱緩存後的位圖來避免了這種開銷,從而完成相同或類似的效果。佈局
5.Core Animation還與Quartz緊密結合在一塊兒,每一個UIView都關聯到一個CALayer對象,CALayer是Core Animation中的圖層。要注意的是,Core Animation是直接做用在CALayer上的,並不是UIView。學習
見圖解-01-iOS圖形層關係動畫
2、Core animation類atom
核心動畫類有如下分類:spa
1.提供顯示內容的圖層類。CALayer(下面會着重介紹)
2.動畫和計時類。(Animation and Timing Classes)
3.佈局和約束類。(CAConstraint)
4.事務類,在原子更新的時候組合圖層類。核心動畫的基礎類包含在 Quartz 核心框架(Quartz Core framework)裏面,雖然它的其餘圖層類在其餘框架裏面定義。(CATransaction)
詳細說明:
2.1 圖層類(Layer Classes)
Layer Classes是core animation的基礎。Layer Classes提供了一個抽象的概念,這個概念對於那些使用NSview和UIview的開發者來講是很熟悉的。基礎層是由CAlayer類提供的,CAlayer是全部Core Animation層的父類。
2.2 動畫和計時類(Animation and Timing Classes)
圖層的不少可視化屬性是能夠隱式動畫的。經過簡單的改變圖層的可動畫顯示的屬性,可讓圖層現有屬性從當前值動畫漸變到新的屬性值。例如設置圖層的 hidden 屬性爲 YES 將會觸發動畫使層逐漸淡出。
2.3 佈局管理器類
Application Kit 的視圖類相對於 superlayer 提供了經典的「struts and springs」定位 模型。圖層類兼容這個模型,同時 Mac OS X 上面的核心動畫提供了一套更加靈活 的佈局管理機制,它容許開發者本身修改佈局管理器。核心動畫的 CAConstraint 類 是一個佈局管理器,它能夠指定子圖層類限制於你指定的約束集合。每一個約束 (CAConstraint 類的實例封裝)描述層的幾何屬性(左,右,頂部或底部的邊緣或水 平或垂直中心)的關係,關係到其同級之一的幾何屬性層或 superlayer。通用的佈局管理器和約束性佈局管理器將會在「佈局核心動畫的圖層」部分討論。
2.4 事務管理類
圖層的動畫屬性的每個修改必然是事務的一個部分。CATransaction 是核心動畫裏面負責協調多個動畫原子更新顯示操做。事務支持嵌套使用。
見圖解-02-核心動畫的類層次結構
着重瞭解前兩個
3、CALayer簡介
Core Animation建立動畫時候會修改CALayer屬性,而後讓這些屬性流暢地變化。Core Animation相關知識點:圖層,圖層是動畫發生的地方,CALayer老是與UIView關聯,經過layer屬性訪問。CAlayer是全部Core Animation層的父類。
1.CALayer是什麼
在iOS中,你能看得見摸得着的東西基本上都是UIView,好比一個按鈕、一個文本標籤、一個文本輸入框、一個圖標等等,這些都是UIView。
其實UIView之因此能顯示在屏幕上,徹底是由於它內部的一個圖層,在建立UIView對象時,UIView內部會自動建立一個圖層(即CALayer對象),經過UIView的layer屬性能夠訪問這個層
@property(nonatomic,readonly,retain) CALayer *layer;
當UIView須要顯示到屏幕上時,會調用drawRect:方法進行繪圖,而且會將全部內容繪製在本身的圖層上,繪圖完畢後,系統會將圖層拷貝到屏幕上,因而就完成了UIView的顯示。
換句話說,UIView自己不具有顯示的功能,擁有顯示功能的是它內部的圖層。
UIView之因此可以顯示,徹底是由於內部的CALayer對象。所以,經過操做這個CALayer對象,能夠很方便地調整UIView的一些界面屬性,好比:陰影、圓角大小、邊框寬度和顏色等。
CALayer是個與UIView很相似的概念,一樣有layer,sublayer...,一樣有backgroundColor、frame等類似的屬性,咱們能夠將UIView看作一種特殊的CALayer,只不過UIView能夠響應事件而已。
通常來講,layer能夠有兩種用途,兩者不互相沖突:一是對view相關屬性的設置,包括圓角、陰影、邊框等參數;二是實現對view的動畫操控。所以對一個view進行core animation動畫,本質上是對該view的.layer進行動畫操縱。
2.爲何說 CALayer 很重要
(1). 每一個UIView 都有 CALayer,即 UIView.layer,同時 UIView是iOS系統中界面元素的基礎,全部的界面元素都是繼承自它,因此,CALayer 應用很普遍
(2). CALayer 可以對 UIView 作許多設定,如:陰影、邊框、圓角和透明效果等,且這些設定都是頗有用的
3.CAlayer層的屬性
(1)、position和anchorPoint
CALayer有2個很是重要的屬性:position和anchorPoint
@property CGPoint position;
用來設置CALayer在父層中的位置
以父層的左上角爲原點(0, 0)
@property CGPoint anchorPoint;
稱爲「定位點」、「錨點」
決定着CALayer身上的哪一個點會在position屬性所指的位置
以本身的左上角爲原點(0, 0)
它的x、y取值範圍都是0~1,默認值爲(0.5, 0.5)
(2)、隱式動畫
每個UIView內部都默認關聯着一個CALayer,咱們可用稱這個Layer爲Root Layer(根層)
全部的非Root Layer,也就是手動建立的CALayer對象,都存在着隱式動畫
什麼是隱式動畫?
當對非Root Layer的部分屬性進行修改時,默認會自動產生一些動畫效果
而這些屬性稱爲Animatable Properties(可動畫屬性)
列舉幾個常見的Animatable Properties:
bounds:用於設置CALayer的寬度和高度。修改這個屬性會產生縮放動畫
backgroundColor:用於設置CALayer的背景色。修改這個屬性會產生背景色的漸變更畫
position:用於設置CALayer的位置。修改這個屬性會產平生移動畫
4、CAAnimation(動畫類)
CAAnimation是全部動畫類的父類,可是它不能直接使用,應該使用它的子類。
見圖解-03-CAAnimation類的繼承結構圖
常見屬性有:
duration:動畫的持續時間
repeatCount:動畫的重複次數
timingFunction:控制動畫運行的節奏
類的說明:
(1)能用的動畫類只有4個子類:CABasicAnimation、CAKeyframeAnimation、CATransition、CAAnimationGroup
1.CABasicAnimation
經過設定起始點,終點,時間,動畫會沿着你這設定點進行移動。能夠看作特殊的CAKeyFrameAnimation
2.CAKeyframeAnimation
Keyframe顧名思義就是關鍵點的frame,你能夠經過設定CALayer的始點、中間關鍵點、終點的frame,時間,動畫會沿你設定的軌跡進行移動
3.CAAnimationGroup
Group也就是組合的意思,就是把對這個Layer的全部動畫都組合起來。PS:一個layer設定了不少動畫,他們都會同時執行,如何按順序執行我到時候再講。
4.CATransition
這個就是蘋果幫開發者封裝好的一些動畫
(2)CAMediaTiming是一個協議(protocol)。
CAPropertyAnimation是CAAnimation的子類,可是不能直接使用,要想建立動畫對象,應該使用它的兩個子類:CABasicAnimation和CAKeyframeAnimation
它有個NSString類型的keyPath屬性,你能夠指定CALayer的某個屬性名爲keyPath,而且對CALayer的這個屬性的值進行修改,達到相應的動畫效果。好比,指定@"position"爲keyPath,就會修改CALayer的position屬性的值,以達到平移的動畫效果
5、Core Animation的使用步驟
1.使用它須要先添加QuartzCore.framework框架和引入主頭文件<QuartzCore/QuartzCore.h>(iOS7不須要)
2.初始化一個CAAnimation對象,並設置一些動畫相關屬性
3.經過調用CALayer的addAnimation:forKey:方法增長CAAnimation對象到CALayer中,這樣就能開始執行動畫了
4.經過調用CALayer的removeAnimationForKey:方法能夠中止CALayer中的動畫
在iOS中,展現動畫能夠類比於顯示生活中的「拍電影」。拍電影有三大要素:演員+劇本+開拍,概念類好比下:
演員--->CALayer,規定電影的主角是誰
劇本--->CAAnimation,規定電影該怎麼演,怎麼走,怎麼變換
開拍--->AddAnimation,開始執行
詳見代碼。。。。。。
6、補充說明
全部動畫對象的父類,負責控制動畫的持續時間和速度,是個抽象類,不能直接使用,應該使用它具體的子類
屬性解析:
(來自CAMediaTiming協議的屬性)
duration:動畫的持續時間
repeatCount:動畫的重複次數
repeatDuration:動畫的重複時間
fillMode:決定當前對象在非active時間段的行爲.好比動畫開始以前,動畫結束以後
beginTime:能夠用來設置動畫延遲執行時間,若想延遲2s,就設置爲CACurrentMediaTime()+2,CACurrentMediaTime()爲圖層的當前時間
(非CAMediaTiming協議的屬性)
removedOnCompletion:默認爲YES,表明動畫執行完畢後就從圖層上移除,圖形會恢復到動畫執行前的狀態。若是想讓圖層保持顯示動畫執行後的狀態,那就設置爲NO,不過還要設置fillMode爲kCAFillModeForwards
timingFunction:速度控制函數,控制動畫運行的節奏
delegate:動畫代理
代碼用
/*
OC中的動畫效果總結
1.視圖動畫
2.幀動畫
1.什麼是圖層CALayer?
核心動畫的全部效果都是基於圖層的,沒有圖層也就沒有核心動畫效果
2.視圖爲何可以顯示到屏幕上?
1.調用drawRect方法,若是咱們本身繪製了東西,他會顯示出來
2.在顯示圖形以前他會建立一個圖層對象(CALayer),而後把須要畫的東西都放到圖層上,而後呈現給用戶看
3.沒有圖層就沒有視圖的顯示功能,也就是沒有圖層就沒有界面
3.圖層可以用來作什麼?
使用圖層來操做視圖的外觀屬性,這也是學習圖層的主要目的
1.陰影效果
2.邊框效果
3.圓角效果
4.更強大的動畫效果
*/
/*
1.根層
全部的視圖,默認狀況下都有一個layer層對象,這個層就是根層
經過addSubLayer添加的層都是子層
2.隱式動畫都是相對於子層來講的
當修改了某個子層的屬性的時候,會默認產生動畫效果,就是所謂的隱式動畫
3.修改哪些屬性會產生隱式動畫效果
1.Frame 縮放動畫
2.backgroundColor 會產生顏色漸變更畫
4.關閉隱式動畫
CATransaction 是layer內部設置隱士動畫的開關
*/
/*
1.什麼是核心動畫?
是蘋果提供的很是強大的動畫處理API,可以作出很是絢麗的動畫效果,並且使用的代碼量很是少
2.核心動畫是直接做用在CALayer上的
3.核心動畫的基礎功能都定義在CAAnimation中
CAAnimation提供了三個子類:
CAAnimationGroup
CATransaction
CAPropertyAnimation : CABasicAnimation,CAKeyframeAnimation
*/
//此外,動畫的暫停與開始能夠經過下面的方式作到:
-(IBAction)pause:(id)sender{
[self pauseLayer:self.layer];
}
-(IBAction)resume:(id)sender{
[self resumeLayer:self.layer];
}
-(void)pauseLayer:(CALayer*)layer
{
CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];
layer.speed = 0.0;
layer.timeOffset = pausedTime;
}
-(void)resumeLayer:(CALayer*)layer
{
CFTimeInterval pausedTime = [layer timeOffset];
layer.speed = 1.0;
layer.timeOffset = 0.0;
layer.beginTime = 0.0;
CFTimeInterval timeSincePause = [layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
layer.beginTime = timeSincePause;
}
//繞矩形循環跑(拓展)
- (void)initRectLayer
{
//新處理一下self.layer
self.layer.frame = CGRectMake(15, 200, 30, 30);
self.layer.cornerRadius = 15;
//來個幀動畫
CAKeyframeAnimation *rectRunAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//設定關鍵幀位置,必須含起始與終止位置
rectRunAnimation.values = @[
[NSValue valueWithCGPoint:self.layer.frame.origin],
[NSValue valueWithCGPoint:CGPointMake(320 - 15,self.layer.frame.origin.y)],
[NSValue valueWithCGPoint:CGPointMake(320 - 15,self.layer.frame.origin.y + 100)],
[NSValue valueWithCGPoint:CGPointMake(15, self.layer.frame.origin.y + 100)],
[NSValue valueWithCGPoint:self.layer.frame.origin]];
//設定每一個關鍵幀的時長,若是沒有顯式地設置,則默認每一個幀的時間=總duration/(values.count - 1)
rectRunAnimation.keyTimes = @[
[NSNumber numberWithFloat:0.0],
[NSNumber numberWithFloat:0.6],
[NSNumber numberWithFloat:0.7],
[NSNumber numberWithFloat:0.8],
[NSNumber numberWithFloat:1]];
rectRunAnimation.timingFunctions = @[
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
//重複次數
rectRunAnimation.repeatCount = 10;
//動畫結束時是否執行逆動畫
rectRunAnimation.autoreverses = NO;
//線性運動方式
rectRunAnimation.calculationMode = kCAAnimationLinear;
//持續時間
rectRunAnimation.duration = 4;
//添加動畫
[self.layer addAnimation:rectRunAnimation forKey:@"rectRunAnimation"];
/**
CAKeyFrameAnimation的使用中有如下主要的屬性須要注意
(1)values屬性
values屬性指明整個動畫過程當中的關鍵幀點,例如上例中的A-E就是經過values指定的。須要注意的是,起點必須做爲values的第一個值。
(2)path屬性
做用與values屬性同樣,一樣是用於指定整個動畫所通過的路徑的。須要注意的是,values與path是互斥的,當values與path同時指定時,path會覆蓋values,即values屬性將被忽略。例如上述pathAnimation例子
(3)keyTimes屬性
該屬性是一個數組,用以指定每一個子路徑(AB,BC,CD)的時間。若是你沒有顯式地對keyTimes進行設置,則系統會默認每條子路徑的時間爲:ti=duration/(5-1),即每條子路徑的duration相等,都爲duration的1\4。固然,咱們也能夠傳個數組讓物體快慢結合。例如,你能夠傳入{0.0, 0.1,0.6,0.7,1.0},其中首尾必須分別是0和1,所以tAB=0.1-0, tCB=0.6-0.1, tDC=0.7-0.6, tED=1-0.7.....
(4)timeFunctions屬性
用過UIKit層動畫的同窗應該對這個屬性不陌生,這個屬性用以指定時間函數,相似於運動的加速度,有如下幾種類型。上例子的AB段就是用了淡入淡出效果。記住,這是一個數組,你有幾個子路徑就應該傳入幾個元素
1 kCAMediaTimingFunctionLinear//線性
2 kCAMediaTimingFunctionEaseIn//淡入
3 kCAMediaTimingFunctionEaseOut//淡出
4 kCAMediaTimingFunctionEaseInEaseOut//淡入淡出
5 kCAMediaTimingFunctionDefault//默認
(5)calculationMode屬性
該屬性決定了物體在每一個子路徑下是跳着走仍是勻速走,跟timeFunctions屬性有點相似
1 const kCAAnimationLinear//線性,默認
2 const kCAAnimationDiscrete//離散,無中間過程,但keyTimes設置的時間依舊生效,物體跳躍地出如今各個關鍵幀上
3 const kCAAnimationPaced//平均,keyTimes跟timeFunctions失效
4 const kCAAnimationCubic//平均,同上
5 const kCAAnimationCubicPaced//平均,同上
*/
}
//CAKeyframeAnimation
//CABasicAnimation算是CAKeyFrameAnimation的特殊狀況,即不考慮中間變換過程,只考慮起始點與目標點就能夠了。而CAKeyFrameAnimation則更復雜一些,容許咱們在起點與終點間自定義更多內容來達到咱們的實際應用需求,KeyFrame的意思是關鍵幀,所謂「關鍵」就是改變物體運動趨勢的幀,在該點處物體將發生運動狀態,好比矩形的四個角,拋物線的頂點等
- (CAAnimation*)pathAnimation
{
/**
CAKeyframeAnimation
在畫線的時候,方法的內部默認建立一個path。它把路徑都放到了path裏面去。
1.建立路徑 CGMutablePathRef 調用該方法至關於建立了一個路徑,這個路徑用來保存繪圖信息。
2.把繪圖信息添加到路徑裏邊。
之前的方法是點的位置添加到ctx(圖形上下文信息)中,ctx 默認會在內部建立一個path用來保存繪圖信息。
在圖形上下文中有一塊存儲空間專門用來存儲繪圖信息,其實這塊空間就是CGMutablePathRef。
3.把路徑添加到上下文中。
*/
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path,NULL,50.0,120.0);
CGPathAddLineToPoint(path, NULL, 300, 488);
CGPathAddCurveToPoint(path,NULL,50.0,275.0,150.0,275.0,150.0,120.0);
CGPathAddCurveToPoint(path,NULL,150.0,275.0,250.0,275.0,250.0,120.0);
CGPathAddCurveToPoint(path,NULL,250.0,275.0,350.0,275.0,350.0,120.0);
CGPathAddCurveToPoint(path,NULL,350.0,275.0,450.0,275.0,450.0,120.0);
CAKeyframeAnimation * animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
[animation setPath:path];
[animation setDuration:3.0];
CFRelease(path);
//ARC的誕生大大簡化了咱們針對內存管理的開發工做,可是隻支持管理 Objective-C 對象, 不支持 Core Foundation 對象。Core Foundation 對象必須使用CFRetain和CFRelease來進行內存管理
//http://blog.csdn.net/yiyaaixuexi/article/details/8553659
return animation;
}