Core Animation實戰一(認識圖層CALayer)

ZY_FlyWay發表於2017-10-27

前言: 

    本文主要是蘋果官網文件Core Animation例子的總結學習,主要是實戰程式碼,不過多BB概念,幾年的學習經驗總結出,通過程式碼分析概念對我來說更有興趣,更好吸收。


  Core Animation其實是一個令人誤解的命名。你可能認為它只是用來做動畫的,但實際上它是從一個叫做Layer Kit這麼一個不怎麼和動畫有關的名字演變而來,所以做動畫這只是Core Animation特性的冰山一角。

    Core Animation是一個複合引擎,它的職責就是儘可能快地組合螢幕上不同的可視內容,這個內容是被分解成獨立的圖層,儲存在一個叫做圖層樹的體系之中。於是這個樹形成了UIKit以及在iOS應用程式當中你所能在螢幕上看見的一切的基礎。


認識CALayer

建立Layer和Layer的基本幾個簡單的屬性,不好說明的以後會單獨拿出來做例子。


//
//  ViewController.m
//  LayerStudyDemo
//
//  Created by apple on 2017/9/15.
//  Copyright © 2017年 ZY. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController
{
    CALayer   *  yellowLayer;
}
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.view.backgroundColor = [UIColor whiteColor];
    //是否沿著Y軸翻轉
    self.view.layer.geometryFlipped = YES;
    [self layerDemo];
}

//建立一個圖層
-(void)layerDemo{
    yellowLayer = [CALayer layer];
    yellowLayer.frame = CGRectMake(50, 200, 100, 100);
    yellowLayer.backgroundColor = [UIColor yellowColor].CGColor;
    //設定圓角
    yellowLayer.cornerRadius = 30;
    //預設四個圓角,你也可以選擇圓角個數
    yellowLayer.maskedCorners = kCALayerMinXMaxYCorner|kCALayerMinXMinYCorner;
    //BOOL,Animatable。圖層有雙面,是否都顯示,設定NO意思背面看不到。下圖是兩個圖層分別設定doubleSided為NO和YES翻轉180°的效果。預設值為YES
    yellowLayer.doubleSided = NO;
    
    CATextLayer  *  textLayer = [CATextLayer layer];
    textLayer.frame = yellowLayer.bounds;
    textLayer.string = @"我們不一樣";
    [yellowLayer addSublayer:textLayer];
    
    CALayer   *  blueLayer = [CALayer layer];
    blueLayer.frame = CGRectMake(50, 200, 100, 100);
    blueLayer.backgroundColor = [UIColor blueColor].CGColor;
    blueLayer.anchorPoint =  CGPointMake(0.0f, 0.0f);
    
    [self.view.layer addSublayer:blueLayer];
    [self.view.layer addSublayer:yellowLayer];
}



- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end


DEMO地址



相關文章