iOS UI進階06，iosui進階06

iOS UI進階06，iosui進階06

• CALayer
  • 在iOS中，你能看得見摸得著的東西基本上都是UIView，比如一個按鈕、一個文字標籤、一個文本輸入框、一個表徵圖等等，這些都是UIView，其實UIView之所以能顯示在螢幕上，完全是因為它內部的一個圖層

  • 在建立UIView對象時，UIView內部會自動建立一個圖層(即CALayer對象)，通過UIView的layer屬性可以訪問這個層

    • @property(nonatomic,readonly,retain) CALayer *layer;

  • 當UIView需要顯示到螢幕上時，會調用drawRect:方法進行繪圖，並且會將所有內容繪製在自己的圖層上，繪圖完畢後，系統會將圖層拷貝到螢幕上，於是就完成了UIView的顯示

  • 換句話說，UIView本身不具備顯示的功能，是它內部的層才有顯示功能

  • 通過操作CALayer對象，可以很方便地調整UIView的一些外觀屬性，比如：陰影，圓角大小，邊框寬度和顏色...還可以給圖層添加動畫，來實現一些比較炫酷的效果
• CALayer的屬性

• //寬度和高度@property CGRect bounds;//位置(預設指中點，具體由anchorPoint決定)@property CGPoint position;//錨點(x,y的範圍都是0-1)，決定了position的含義@property CGPoint anchorPoint;//背景顏色(CGColorRef類型)@property CGColorRef backgroundColor;//形變屬性@property CATransform3D transform;//邊框顏色(CGColorRef類型)@property CGColorRef borderColor;//邊框寬度@property CGFloat borderWidth;//內容(比如設定為圖片CGImageRef)@property(retain) id contents;

  • 關於CALayer的疑惑
    • 首先CALayer是定義在QuartzCore架構中的 CGImageRef、CGColorRef兩種資料類型是定義在CoreGraphics架構中的 UIColor、UIImage是定義在UIKit架構中的

    • 其次QuartzCore架構和CoreGraphics架構是可以跨平台使用的，在iOS和Mac OS X上都能使用 但是UIKit只能在iOS中使用

    • 為了保證可移植性，QuartzCore不能使用UIImage、UIColor，只能使用CGImageRef、CGColorRef

  • UIView和CALayer的選擇
    • 通過CALayer，就能做出跟UIImageView一樣的介面效果 既然CALayer和UIView都能實現相同的顯示效果，那究竟該選擇誰好呢？
    • 其實，對比CALayer，UIView多了一個事件處理的功能。也就是說，CALayer不能處理使用者的觸摸事件，而UIView可以 所以，如果顯示出來的東西需要跟使用者進行互動的話，用UIView；如果不需要跟使用者進行互動，用UIView或者CALayer都可以 當然，CALayer的效能會高一些，因為它少了事件處理的功能，更加輕量級
  • 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）    ：

  • 隱式動畫

    • 每一個UIView內部都預設關聯著一個CALayer，我們可用稱這個Layer為Root Layer（根層）

    • 所有的非Root Layer，也就是手動建立的CALayer對象，都存在著隱式動畫

    • 什麼是隱式動畫？

      • 當對非RootLayer的部分屬性進行修改時，預設會自動產生一些動畫效果而這些屬性稱為Animatable Properties(可動畫屬性)

      • 列舉幾個常見的Animatable Properties： bounds：用於設定CALayer的寬度和高度。修改這個屬性會產生縮放動畫 backgroundColor：用於設定CALayer的背景色。修改這個屬性會產生背景色的漸層動畫 position：用於設定CALayer的位置。修改這個屬性會產生平移動畫

        可以通過動畫事務(CATransaction)關閉預設的隱式動畫效果    [CATransaction begin];    [CATransaction setDisableActions:YES];    self.myview.layer.position = CGPointMake(10, 10);    [CATransaction commit];

         

  • Core Animation(核心動畫)
  • • Core Animation，中文翻譯為核心動畫，它是一組非常強大的動畫處理API，使用它能做出非常炫麗的動畫效果，而且往往是事半功倍。也就是說，使用少量的代碼就可以實現非常強大的功能。 Core Animation可以用在Mac OS X和iOS平台。 Core Animation的動畫執行過程都是在後台操作的，不會阻塞主線程。 要注意的是，Core Animation是直接作用在CALayer上的，並非UIView。
    • 核心動畫中所有類都遵守CAMediaTiming

    • CAAnaimation是個抽象類別，不具備動畫效果，必須用它的子類才有動畫效果，子類是CAAnimationGroup和CATransition才有動畫效果

    • • CAAnimationGroup是個動畫組，可以同時進行縮放，旋轉

        • 動畫組，是CAAnimation的子類，可以儲存一組動畫對象，將CAAnimationGroup對象加入層後，組中所有動畫對象可以同時並發運行
        • 屬性說明： animations：用來儲存一組動畫對象的NSArray 預設情況下，一組動畫對象是同時啟動並執行，也可以通過設定動畫對象的beginTime屬性來更改動畫的開始時間

        CATransition是轉場動畫，介面之間跳轉都可以用轉場動畫

      • • CATransition是CAAnimation的子類，用於做轉場動畫，能夠為層提供移出螢幕和移入螢幕的動畫效果。iOS比Mac OS X的轉場動畫效果少一點
        • UINavigationController就是通過CATransition實現了將控制器的視圖推入螢幕的動畫效果動畫屬性:
        • • • type：動畫過渡類型
            • subtype：動畫過渡方向
            • startProgress：動畫起點(在整體動畫的百分比)
            • endProgress：動畫終點(在整體動畫的百分比)

        • 使用UIView動畫函數實現轉場動畫——單視圖

    + (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion;      參數說明：      duration：動畫的期間      view：需要進行轉場動畫的視圖      options：轉場動畫的類型      animations：將改變視圖屬性的代碼放在這個block中      completion：動畫結束後，會自動調用這個block

                   

    • • • • 使用UIView動畫函數實現轉場動畫——雙視圖

          • + (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion;參數說明：duration：動畫的期間options：轉場動畫的類型animations：將改變視圖屬性的代碼放在這個block中completion：動畫結束後，會自動調用這個block

    • CAPropertyAnimation也是個抽象類別，是CAAnimation的子類,本身不具備動畫效果，只有子類才有，子類有CABasicAnimation和CAKeyframeAnimation
      • • • • CABasicAnimation基本動畫，做一些簡單效果
              • 屬性說明:
                • fromValue：keyPath相應屬性的初始值
                • toValue：keyPath相應屬性的結束值

                •  - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{            CABasicAnimation *anim = [CABasicAnimation animation];            anim.keyPath = @"transform.scale";            anim.toValue = @0.5;            anim.repeatCount = MAXFLOAT;            [_imageV.layer addAnimation:anim forKey:nil];            }

                   動畫過程說明：        + 隨著動畫的進行，在長度為duration的期間內，keyPath相應屬性的值從fromValue漸漸地變為toValue        + keyPath內容是CALayer的可動畫Animatable屬性        + 如果fillMode=kCAFillModeForwards同時removedOnComletion=NO，那麼在動畫執行完畢後，圖層會保持顯示動畫執行後的狀態。但在實質上，圖層的屬性值還是動畫執行前的初始值，並沒有真正被改變  + CAKeyframeAnimation幀動畫，做一些連續的流暢的動畫    - 主要畫面格動畫，也是CAPropertyAnimation的子類，與CABasicAnimation的區別是：CABasicAnimation只能從一個數值（fromValue）變到另一個數值（toValue），而CAKeyframeAnimation會使用一個NSArray儲存這些數值   - 屬性說明：        + values：上述的NSArray對象。裡面的元素稱為“主要畫面格”(keyframe)。動畫對象會在指定的時間（duration）內，依次顯示values數組中的每一個主要畫面格        + path：可以設定一個CGPathRef、CGMutablePathRef，讓圖層按照路徑軌跡移動。path只對CALayer的anchorPoint和position起作用。如果設定了path，那麼values將被忽略        + keyTimes：可以為對應的主要畫面格指定對應的時間點，其取值範圍為0到1.0，keyTimes中的每一個時間值都對應values中的每一幀。如果沒有設定keyTimes，各個主要畫面格的時間是平分的 - CABasicAnimation可看做是只有2個主要畫面格的CAKeyframeAnimation

    • 結構圖
    • • Core Animation的使用步驟
        • 如果不是xcode5之後的版本，使用它需要先添加QuartzCore.framework和引入對應的架構
        • 開發步驟:
          • 1.首先得有CALayer
          • 2.初始化一個CAAnimation對象，並設定一些動畫相關屬性
          • 3.通過調用CALayer的addAnimation:forKey:方法，增加CAAnimation對象到CALayer中，這樣就能開始執行動畫了
          • 4.通過調用CALayer的removeAnimationForKey:方法可以停止CALayer中的動畫
      • CAAnimation
        • 是所有動畫對象的父類，負責控制動畫的期間和速度，是個抽象類別，不能直接使用，應該使用它具體的子類 屬性說明：
          • duration：動畫的期間
          • repeatCount：重複次數，無限迴圈可以設定HUGE_VALF或者MAXFLOAT
          • repeatDuration：重複時間
          • removedOnCompletion：預設為YES，代表動畫執行完畢後就從圖層上移除，圖形會恢複到動畫執行前的狀態。如果想讓圖層保持顯示動畫執行後的狀態，那就設定為NO，不過還要設定fillMode為kCAFillModeForwards
          • fillMode：決定當前對象在非active時間段的行為。比如動畫開始之前或者動畫結束之後 beginTime：可以用來設定動畫順延強制時間，若想延遲2s，就設定為CACurrentMediaTime()+2，CACurrentMediaTime()為圖層的目前時間
          • timingFunction：速度控制函數，控制動畫啟動並執行節奏
          • delegate：動畫代理
      • CAAnimation——動畫填充模式

        • fillMode屬性值（要想fillMode有效，最好設定removedOnCompletion = NO）

        • kCAFillModeRemoved 這個是預設值，也就是說當動畫開始前和動畫結束後，動畫對layer都沒有影響，動畫結束後，layer會恢複到之前的狀態

        • kCAFillModeForwards 當動畫結束後，layer會一直保持著動畫最後的狀態
        • kCAFillModeBackwards 在動畫開始前，只需要將動畫加入了一個layer，layer便立即進入動畫的初始狀態並等待動畫開始。
        • kCAFillModeBoth 這個其實就是上面兩個的合成.動畫加入後開始之前，layer便處於動畫初始狀態，動畫結束後layer保持動畫最後的狀態
      • CAAnimation——速度控制函數
        • 速度控制函數(CAMediaTimingFunction)
          • kCAMediaTimingFunctionLinear（線性）：勻速，給你一個相對靜態感覺
          • kCAMediaTimingFunctionEaseIn（漸進）：動畫緩慢進入，然後加速離開
          • kCAMediaTimingFunctionEaseOut（漸出）：動畫全速進入，然後減速的到達目的地
          • kCAMediaTimingFunctionEaseInEaseOut（漸進漸出）：動畫緩慢的進入，中間加速，然後減速的到達目的地。這個是預設的動畫行為。
      • CAAnimation——動畫代理方法

      • @interface NSObject (CAAnimationDelegate)/* Called when the animation begins its active duration. */- (void)animationDidStart:(CAAnimation *)anim;/* Called when the animation either completes its active duration or * is removed from the object it is attached to (i.e. the layer). 'flag' * is true if the animation reached the end of its active duration * without being removed. */- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;@end

        • CALayer上動畫的暫停和恢複

        • #pragma mark 暫停CALayer的動畫-(void)pauseLayer:(CALayer*)layer{    CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];    // 讓CALayer的時間停止走動      layer.speed = 0.0;    // 讓CALayer的時間停留在pausedTime這個時刻    layer.timeOffset = pausedTime;}#pragma mark 恢複CALayer的動畫-(void)resumeLayer:(CALayer*)layer{    CFTimeInterval pausedTime = layer.timeOffset;    // 1. 讓CALayer的時間繼續行走      layer.speed = 1.0;    // 2. 取消上次記錄的停留時刻      layer.timeOffset = 0.0;    // 3. 取消上次設定的時間      layer.beginTime = 0.0;    // 4. 計算暫停時間(這裡也可以用CACurrentMediaTime()-pausedTime)    CFTimeInterval timeSincePause = [layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;    // 5. 設定相對於父座標系的開始時間(往後退timeSincePause)      layer.beginTime = timeSincePause;}

          • CADisplayLink
            • CADisplayLink是一種以螢幕重新整理頻率觸發的時鐘機制，每秒鐘執行大約60次左右
            • CADisplayLink是一個計時器，可以使繪圖代碼與視圖的重新整理頻率保持同步，而NSTimer無法確保計時器實際被觸發的準確時間
            • 使用方法：
              • 定義CADisplayLink並制定觸發調用方法
              • 將顯示連結添加到主運行迴圈隊列