1. 程式人生 > >iOS CALayer 簡單介紹

iOS CALayer 簡單介紹

orm pat 自己 begin 組合 oval oca round shp

https://www.jianshu.com/p/09f4e36afd66

什麽是CALayer:

總結:能看到的都是uiview,uiview能顯示在屏幕上是因為它內部的一個層calyer層。

在創建uiview的時候,uiview的內部會自動創建一個層(calayer對象)通過uiview的layer屬性可以訪問這個層。當uiview需要顯示在屏幕上時,會調用drawrect 方法進行繪制,並將所有的內容繪制在自己的層上,繪制完畢之後,系統會將層拷貝到屏幕上,於是uiview就顯示了。

換句話說,uiview本身並不具備顯示功能,它的內部的層才有顯示功能。

CALayer的基本功能

通過操作CALayer對象,可以調整uiview的一些外觀屬性。比如陰影,圓角,邊框的顏色等、

項目中的具體使用

1.做漸變。有時候項目中可能要用到一個漸變的圖片,如果用圖片的話 是會簡單很多,但是也會相應的占用內存,增加開銷,而Calayer的效率相對來說就會高很多。

下邊附上代碼:

 //1.漸變的簡單實現demo
    UIView *bgView = [[UIView alloc]initWithFrame:CGRectMake(0, 15, 100, 100)];
    bgView.layer.cornerRadius = 10;
    bgView.layer.masksToBounds = YES;
    bgView.backgroundColor  =[UIColor blackColor];
    [self.view addSubview:bgView];
    
    CAGradientLayer *gradientLayer2 = [CAGradientLayer layer];
    gradientLayer2.colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor yellowColor].CGColor, (__bridge id)[UIColor blueColor].CGColor];
    gradientLayer2.locations = @[@0.3, @0.4, @1.0];
    gradientLayer2.startPoint = CGPointMake(0, 0);
    gradientLayer2.endPoint = CGPointMake(1.0, 0);
    gradientLayer2.frame = CGRectMake(0, 0, 100, 100);
    [bgView.layer addSublayer:gradientLayer2];

2. 實現類似於加載圖的加載效果。兩種方式,一種是使用 n張圖片去循環,這樣的話對內存的開銷比較大,不建議使用,第二種就是采用CALayer的相關屬性 加上核心動畫來實現:代碼如下:

//2.漸變轉換為圖形形成動畫
    CALayer *layer = [CALayer layer];
    layer.backgroundColor = [UIColor redColor].CGColor; //圓環底色
    layer.frame = CGRectMake(100, 100, 110, 110);
//    
//    
//    //創建一個圓環
    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(55, 55) radius:50 startAngle:0 endAngle:M_PI*2 clockwise:YES];
//
//    //圓環遮罩
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    shapeLayer.lineWidth = 5;
    shapeLayer.strokeStart = 0;
    shapeLayer.strokeEnd = 0.8;
    shapeLayer.lineCap = @"round";
    shapeLayer.lineDashPhase = 0.8;
    shapeLayer.path = bezierPath.CGPath;
//
//    //顏色漸變
    NSMutableArray *colors = [NSMutableArray arrayWithObjects:(id)[UIColor redColor].CGColor,(id)[UIColor whiteColor].CGColor, nil];
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.shadowPath = bezierPath.CGPath;
    gradientLayer.frame = CGRectMake(50, 50, 60, 60);
    gradientLayer.startPoint = CGPointMake(0, 1);
    gradientLayer.endPoint = CGPointMake(1, 0);
    [gradientLayer setColors:[NSArray arrayWithArray:colors]];
    [layer addSublayer:gradientLayer]; //設置顏色漸變
    [layer setMask:shapeLayer]; //設置圓環遮罩
    [self.view.layer addSublayer:layer];
//
//    //動畫
    CABasicAnimation *scaleAnimation1 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation1.fromValue = [NSNumber numberWithFloat:1.0];
    scaleAnimation1.toValue = [NSNumber numberWithFloat:1.5];
    scaleAnimation1.autoreverses = YES;
    //    scaleAnimation1.fillMode = kCAFillModeForwards;
    scaleAnimation1.duration = 0.8;
    
    CABasicAnimation *rotationAnimation2 = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    rotationAnimation2.fromValue = [NSNumber numberWithFloat:0];
    rotationAnimation2.toValue = [NSNumber numberWithFloat:6.0*M_PI];
    rotationAnimation2.autoreverses = NO;//此行是控制是否倒轉,yes為倒轉,no為不倒轉

    rotationAnimation2.repeatCount = MAXFLOAT;
    rotationAnimation2.beginTime = 0.8; //延時執行,註釋掉動畫會同時進行
    rotationAnimation2.duration = 2;
    
//
//    
//    //組合動畫
    CAAnimationGroup *groupAnnimation = [CAAnimationGroup animation];
    groupAnnimation.duration = 4;
//    groupAnnimation.autoreverses = YES;
    groupAnnimation.animations = @[scaleAnimation1, rotationAnimation2];
//    groupAnnimation.animations = @[ rotationAnimation2];
    groupAnnimation.repeatCount = MAXFLOAT;
    [layer addAnimation:groupAnnimation forKey:@"groupAnnimation"];

下邊附上以上代碼的效果圖:技術分享圖片技術分享圖片

iOS CALayer 簡單介紹