iOS-CALayer

什么是CALayer

  • 在iOS中,你能看得見摸得著的東西基本上都是UIView,比如一個按鈕、一個文本標簽、 一個文本輸入框、一個圖標等等,這些都是UIView
  • 其實UIView之所以能顯示在屏幕上,完全是因為它內部的一個圖層
  • 在創建UIView對象時,UIView內部會自動創建一個圖層(即CALayer對象),通過UIView
    的layer屬性可以訪問這個層 @property(nonatomic,readonly,retain) CALayer *layer;
  • 當UIView需要顯示到屏幕上時,會調用drawRect:方法進行繪圖,并且會將所有內容繪制在 自己的圖層上,繪圖完畢后,系統會將圖層拷貝到屏幕上,于是就完成了UIView的顯示
  • 換句話說,UIView本身不具備顯示的功能,是它內部的層才有顯示功能

View的主層和UIImageView content層

  • 每個控件都有主層邊框,我們對CALayer的操作其實是對主層的操作,但是UIImageView比較特殊它是顯示圖片的,它有一個單獨的層content
    demo

UIView和CALayer的區別

對比CALayer,UIView多了個一個事件處理的功能。也就是,CALayer不能處理用戶的觸摸事件,但是UIView可以
UIView可以通過subviews屬性訪問所有的子視圖,類似地,CALayer也可以通過sublayers屬性訪問所有的子層
UIView可以通過superview屬性訪問父視圖,類似地,CALayer也可以通過superlayer屬性訪問父層

CALayer和QuartzCore的區別

CALayer是地應在QuartzCore框架中的
CGImageRef、CGColorRef兩種數據類型是定義在CoreGraphics框架中的
UIColor、UIImage是定義在UIKit框架中的
其次QuartzCore框架和CoreGraphics可以跨平臺使用,在iOS和 Mac OS上都能使用
UIKit只限在iOS中使用

position和anchorPoint

CALayer 有兩個非常關鍵的屬性position和anchorPoin

position可以用來設置CALayer在父層中的位置,它是以父層的左上角為坐標原點(0, 0)
anchorPoint稱為"定位點,錨點",它決定著CALayer身上的哪個點會在position屬性所指的位置。它的x、y取值范圍都是0~1,默認值為(0.5, 0.5)
position和anchorPoint屬性都是CGPoint類型的

anchorPoint(示意圖)

anchorPoint是(0.5,0.5)

anchorPoint是(1, 1)

anchorPoint是(0.5,0)

anchorPoint是(1,0.5

position和anchorPoint

position和anchorPoint 紅色圖層的anchorPoint是(0.5,0.5)

position和anchorPoint 紅色圖層的anchorPoint是(0.5,0)

position和anchorPoint 紅色圖層的anchorPoint是(0,0)

position和anchorPoint 紅色圖層的anchorPoint是(1,0.5)

position和anchorPoint 紅色圖層的anchorPoint是(1,1)

隱式動畫

每一個UIView內部都默認關聯著一個CALayer,這個Layer可以成為Root Layer(根層)。所有非Root Layer,也就是手動創建的CALayer對象。
當對非Root Layer的部分屬性進行相應的修改時,默認會自動產生一些動畫效果,這些屬性稱為Animatable Properties(可動畫屬性)。
隱式動畫demo

核心動畫

  • Core Animation,中文翻譯為核心動畫,它是一組非常強大的動畫處理API,使用它能做出非常炫麗的動畫效果,而且往往是事半功倍。
  • Core Animation可以用在Mac OS X和iOS平臺。
  • Core Animation的動畫執行過程都是在后臺操作的,不會阻塞主線程。
  • 要注意的是,Core Animation是直接作用在CALayer上的,并非UIView


    核心動畫架構
  • 核心動畫中所有類都遵守CAMediaTiming
    CAAnaimation是個抽象類,不具備動畫效果,必須用它的子類才有動畫效果
    哪幾個子類了,CAAnimationGroup和CATransition才有動畫效果,CAAnimationGroup是個動畫組,可以同時進行縮放,旋轉。CATransition是轉場動畫,界面之間跳轉都可以用轉場動畫。
    CAPropertyAnimation也是個抽象類,本身不具備動畫效果,只有子類才有
    哪兩個子類了,CABasicAnimation和CAKeyframeAnimation
    CABasicAnimation基本動畫,做一些簡單效果
    CAKeyframeAnimation幀動畫,做一些連續的流暢的動畫

CAAnimation 簡介

  • 基本屬性介紹
  • CAAnimation 是所有動畫對象的父類,負責控制動畫的持續時間和速度,是個抽象類,不能直接使
    用,應該使用它具體的子類
  • 屬性說明:(紅色代表來自CAMediaTiming協議的屬性)
  • duration:動畫的持續時間
  • repeatCount:重復次數,無限循環可以設置HUGE_VALF或者MAXFLOAT
  • repeatDuration:重復時間
  • removedOnCompletion:默認為YES,代表動畫執行完畢后就從圖層上移除,圖形會 恢復到動畫執行前的狀態。如果想讓圖層保持顯示動畫執行后的狀態,那就設置 為NO,不過還要設置fillMode為kCAFillModeForwards
  • fillMode:決定當前對象在非active時間段的行為。比如動畫開始之前或者動畫結束 之后
  • beginTime:可以用來設置動畫延遲執行時間,若想延遲2s,就設置 為CACurrentMediaTime()+2,CACurrentMediaTime()為圖層的當前時間
  • timingFunction:速度控制函數,控制動畫運行的節奏
  • delegate:動畫代理 核心動畫的代理比較特殊,不用遵守代理的協議。
  • 動畫填充模式
    • fillMode屬性值(要想fillMode有效,最好設置
    • removedOnCompletion = NO) kCAFillModeRemoved 這個是默認值,也就是說當動畫開始前和動畫結束后,動畫對
      layer都沒有影響,動畫結束后,layer會恢復到之前的狀態
      kCAFillModeForwards 當動畫結束后,layer會一直保持著動畫最后的狀態
    • kCAFillModeBackwards 在動畫開始前,只需要將動畫加入了一個layer,layer便立即進 入動畫的初始狀態并等待動畫開始。
    • kCAFillModeBoth 這個其實就是上面兩個的合成.動畫加入后開始之前,layer便處于動 畫初始狀態,動畫結束后layer保持動畫最后的狀態

CAPropertyAnimation

  • CAPropertyAnimation是CAAnimation的子類,也是個抽象類,要想創建動畫對象,應該使用它的兩個子類:
- CABasicAnimation
- CAKeyframeAnimation
  • 屬性說明:
    • keyPath:通過指定CALayer的一個屬性名稱為keyPath(NSString類型),并且對CALayer的這個屬性的值進行修改,達到相應的動畫效果。比如,指定@“position”為keyPath,就修改CALayer的position屬性的值,以達到平移的動畫效果
    • keyPath的常用形變值:
      • transform.rotation :旋轉
      • transform.scale :按比例縮放
      • transform.translation :平移
      • 以上形變的值x.y.z都可以單獨設置,并且toValue可以放數組,比如平移需要多個參數可以直接丟個數組進去
  • CABasicAnimation實例
CABasicAnimation *anim = [CABasicAnimation animation];
    //描述修改哪個屬性產生的動畫
    anim.keyPath = @"transform.scale";
    //設置屬性的值
    anim.toValue = @.4;
    
    // 設置動畫完成的時候不要移除動畫
    anim.removedOnCompletion = NO;
    // 設置動畫執行完成要保持最新的效果
    anim.fillMode = kCAFillModeForwards;
    
    //添加動畫到layer上
    [self.yellowView.layer addAnimation:anim forKey:nil];
  • CAKeyframeAnimation 實例
#define angle2Radion(angle) (angle / 180.0 * M_PI)
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    anim.keyPath = @"transform.rotation";
    
    anim.values = @[@(angle2Radion(-5)),@(angle2Radion(5)),@(angle2Radion(-5))];
    anim.duration = 0.5;
    anim.repeatCount = MAXFLOAT;
    [self.grayView.layer addAnimation:anim forKey:nil];
    
    ```
- CATransition轉場動畫 實例
> ● CATransition是CAAnimation的子類,用于做轉場動畫,能夠為層提供 移出屏幕和移入屏幕的動畫效果。iOS比Mac OS X的轉場動畫效果少 一點
● UINavigationController就是通過CATransition實現了將控制器的視圖推 入屏幕的動畫效果
● 動畫屬性:
● type:動畫過渡類型
● subtype:動畫過渡方向
● startProgress:動畫起點(在整體動畫的百分比) 
● endProgress:動畫終點(在整體動畫的百分比)


![CATransition.type 對應的動畫效果](http://upload-images.jianshu.io/upload_images/1514503-bc04737d03c57dff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
[轉場動畫demo](https://github.com/liuxingchen930831/UI-19-CATransition)

###CAAnimationGroup 這個核心動畫的作用可以把 多個動畫組成一個組,可以做到多個動畫一同執行

##UIView動畫和核心動畫的區別
- 除了上面說到的UIView可以處理用戶交互 核心動畫不可以處理交互以外,還有就是UIView的動畫效果都是對控件做真實操作,但是核心動畫只是視覺效果,具體的值并沒有改變。
- 核心動畫一般用于轉場動畫
[demo](https://github.com/liuxingchen930831/UI-19-UIViewAndCAAnimation)

[常用的animationWithKeyPath值的總結和動畫的屬性和說明](http://www.lxweimin.com/p/02c341c748f9)
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,573評論 6 30
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,147評論 5 13
  • 在iOS實際開發中常用的動畫無非是以下四種:UIView動畫,核心動畫,幀動畫,自定義轉場動畫。 1.UIView...
    請叫我周小帥閱讀 3,169評論 1 23
  • Core Animation Core Animation,中文翻譯為核心動畫,它是一組非常強大的動畫處理API,...
    45b645c5912e閱讀 3,071評論 0 21
  • CALayer簡介 在iOS中,你能看得見摸得著的東西基本上都是UIView,比如一個按鈕、一個文本標簽、一個文本...
    LiYaoPeng閱讀 507評論 0 4