iOS CALayer 简单介绍

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"];

 下边附上以上代码的效果图:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

ios动画

在iOS开发中,动画是提高用户体验重要的环节之一。一个设计严谨、精细的动画效果能给用户耳目一新的效果,这对于app而言是非常重要的。 简介 iOS动画主要是指C...

2135
来自专栏非典型技术宅

iOS动画系列之七:实现类似Twitter的启动动画1. CAKeyframeAnimation2. CAAnimationGroup3. 实现类似Twitter的启动动画

1533
来自专栏進无尽的文章

实践-小效果 III

大家都知道这是通过 CAShapeLayer 和 CABasicAnimation 结合起来实现的,可是其中还是有需要注意的地方,实现的步骤大致如下:

1072
来自专栏陈满iOS

iOS·长按保存图片到相册:系统原生UIActionSheet与UIAlertView,UIAlertController等方案

891
来自专栏学海无涯

iOS开发之UIScrollView无限滚动

UIScrollView 的无限滚动主要应用在图片轮播器、欢迎界面等场景。首先需要说明的是,文本所讲的是一种"笨办法",但是好理解且容易实现,在图片不多的时候用...

37610
来自专栏進无尽的文章

实践 -实现一款中间凸起的TabBar

这是看到一篇文章后感觉很有意思于是就把自己的效果改了改实现了一下,文末有原文链接。

1442
来自专栏落影的专栏

直播APP常用动画效果

介绍 记录、总结开发遇到一些问题,大家一起交流学习。 这次带来,对直播APP的常用动画总结。 直播Live 效果展示 下面是一个很多平台都有的入门豪华礼物动...

5398
来自专栏数据结构与算法

菜鸡博客开……开……开源了!

因为很多人找我要过博皮源码,所以本宝宝经过深思熟虑,最终决定把自己的源码分享给大家!

1503
来自专栏iOS开发攻城狮的集散地

自定义UIPageControl、UITextView占位视图

2119
来自专栏Golang语言社区

前端游戏编程基础-如何实现Canvas图像的拖拽、点击等操作

希望能对Canvas绘制出来的图像进行点击、拖拽等操作,因为Canvas绘制出的图像能很好的美化。好像是想做炉石什么的游戏,我也没玩过。 Canvas在我的理解...

3258

扫码关注云+社区