CoreAnimation 圖層幾何學

CoreAnimation 圖層幾何學

---

    CoreAnimation 目錄

    博客園MakeDown支持不佳,若有須要請進GitHub

    圖層幾何所講主要是有關圖層的位置,尺寸等幾何類屬性.

佈局

    在UIView中與位置,尺寸有關的屬性有 frame bounds center在此很少贅述,在CALayer中一樣有與其相對應的屬性 frame bounds position 須要注意的是 center與position 雖然字面表達不同,可是其功能是一致的,爲了更加清晰的展現以上內容,我在故事板中建立一個有色UIView.

圖片一

    在控制檯打印日誌:

customView_frame:{{117, 241}, {140, 185}}
customView_bounds:{{0, 0}, {140, 185}}
customView_center:{187, 333.5}
customView_layer_frame:{{117, 241}, {140, 185}}
customView_layer_bounds:{{0, 0}, {140, 185}}
customView_layer_position:{187, 333.5}

    根據日誌所打印內容可知 UIView與CALayer 的佈局屬性是一一對應的.
    以上內容瞭解後咱們須要直達frame本質上是一個複合的屬性,也就是說他是由bounds position transform計算獲得的(transform:放大,旋轉等).爲了證明這件事,咱們將上面的有色View旋轉一個角度.

圖片二

    在控制檯打印日誌:

customView_layer_frame:{{80.128221735089298, 218.39265014993941}, {213.74355652982138, 230.21469970012117}}
customView_layer_bounds:{{0, 0}, {140, 185}}
customView_layer_position:{187, 333.5}

    經過對比兩次打印日誌的對比不難發現,當咱們將圖層旋轉後 bounds position 都沒有改變,而 frame 卻大有改變.那麼問題來了,此時的 frame 表明的是什麼?咱們以customView_layer_frame爲 frame 在視圖上添加一個新的視圖而且將其做爲旋轉視圖的背景.

圖片三

    圖片三與圖片二相比咱們能夠發現, frame實際上表明瞭覆蓋在圖層旋轉以後的整個軸對齊的矩形區域.

錨點-anchorPoint

    錨點這個詞初識是很陌生的,比如航船的錨用來固定航船,圖層中的錨點也具備相同的功能,錨點能夠 固定 圖層,也就是說錨點是圖層的句柄.默認狀況下錨點位於圖層的中點,咱們將圖二的的錨點打印.

customView_layer_anchorPoint:{0.5, 0.5}

我了便於觀察,我在已有的 UIView 上面添加一個一樣大小位置顯色不一樣的UIView(在橙色視圖上面添加一個綠色視圖,綠色視圖的錨點在綠色視圖的中心點).

圖片四

    將綠色視圖的錨點設置爲(0.0).
    綠色視圖的錨點在綠色視圖的左上角.

圖片五

    再作一次實現,我將綠色視圖的錨點設置爲(1,1).也就是將錨點設置在綠色視圖的右下角.

圖片六

    改變錨點能夠蓋面綠色視圖的展現效果,那麼此時的 bounds position frame 呢?我在控制檯打印錨點爲(0.5,0.5)與(1,1)時的數據.

//(0.5,0.5)
customView_layer_frame:{{0, 0}, {140, 185}}
customView_layer_bounds:{{0, 0}, {140, 185}}
customView_layer_position:{70, 92.5}

//(1,1)
customView_layer_frame:{{-70, -92.5}, {140, 185}}
customView_layer_bounds:{{0, 0}, {140, 185}}
customView_layer_position:{70, 92.5}

    由兩個數據對比可得,錨點的改變只會改變 frame.
    到此錨點的基本概念已經基本瞭解,那麼錨點用在什麼地方呢?在這我列舉一個簡單的用法.如今我將錨點爲(0.5,0.5)與(1,1)的綠色視圖分別進行旋轉(持續).

圖片七

圖片八

    對比兩個GIF,能夠知道視圖的旋轉是以錨點爲中心進行旋轉的.

座標系

    座標系無非就是(x,y,z),我不對(x,y)進行講解,着重講解一下z.在視圖座標系中,z軸與咱們在數學中的z軸是有相同的效果的,他表現的是垂直的座標,若是咱們爲圖層設置z軸座標該圖層將會在未設置z軸座標或者小於該z軸座標的圖層上方展現.爲了着重表現該現象,我在綠色視圖中添加一個藍色圖層與紅色圖層,先看一下代碼清單.

CALayer * blueLayer = [[CALayer alloc]init];
    blueLayer.frame = self.greenView.layer.frame;
    blueLayer.backgroundColor = [UIColor blueColor].CGColor;
    
    CALayer * redLayer = [[CALayer alloc]init];
    redLayer.frame = self.greenView.layer.frame;
    redLayer.backgroundColor = [UIColor redColor].CGColor;
    
    [self.greenView.layer addSublayer:blueLayer];
    [self.greenView.layer addSublayer:redLayer];

    由代碼能夠發現先添加的藍色圖層後添加的紅色圖層,所以紅色圖層在最上方.

圖片九

    將藍色的圖層的z軸座標設置爲1.0f.

圖片十

Hit Testing

    CALayer 是不關心響應鏈事件的,可是它提供了兩個方法來處理事件.

• -containsPoint:
• -hitTest:

    -containsPoint: 接受一個在本圖層座標系下的CGPoint,若是這個點在圖層frame範圍內就返回YES,不然返回NO.爲了理解這一性質我寫一個小案例,在之後的藍色圖層和白色圖層中點擊,若是點擊藍色區域控制檯打印blue,若是在白色區域控制檯打印white.

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    CGPoint point = [[touches anyObject]locationInView:self.view];
    point = [self.blueLayer convertPoint:point fromLayer:self.view.layer];
    if ([self.blueLayer containsPoint:point]) {
        NSLog(@"blue");
    }else{
        NSLog(@"white");
    }
}

    -hitTest: 也是接受一個 CGPoint 可是返回的是 CALayer,經過判斷返回的圖層是不是所要響應的圖層而後作出相應的操做,繼續上面的案例稍加改動.

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    CGPoint point = [[touches anyObject]locationInView:self.view];
    CALayer * layer = [self.view.layer hitTest:point];
    if (layer == self.blueLayer) {
        NSLog(@"blue");
    }else{
        NSLog(@"white");
    }
}

自動佈局

    當使用視圖的時候,能夠充分利用UIView的UIViewAutoresizingMask和NSLayoutConstraint進行自動佈局,可是若是想要隨意控制CALayer的佈局,就須要經過使用 CALayerDelegate .以下函數:

- (void)layoutSublayersOfLayer:(CALayer *)layer;

    當圖層的bounds發生改變,或者圖層的-setNeedsLayout方法被調用的時候,這個函數就會執行.這時能夠手動的對圖層進行從新繪製,可是不能像UIView的autoresizingMask和constraints屬性作到自適應屏幕旋轉.這也是爲何最好使用視圖而不是單獨的圖層來構建應用程序的重要緣由之一.