开发者社区> QianChia> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

iOS - CALayer 绘图层

简介: 1、CALayer 绘图层 在 iOS 系统中,你能看得见摸得着的东西基本上都是 UIView,比如一个按钮、一个文本标签、一个文本输入框、一个图标等等,这些都是 UIView。其实 UIView 之所以能显示在屏幕上,完全是因为它内部的一个层。
+关注继续查看

1、CALayer 绘图层

  • 在 iOS 系统中,你能看得见摸得着的东西基本上都是 UIView,比如一个按钮、一个文本标签、一个文本输入框、一个图标等等,这些都是 UIView。其实 UIView 之所以能显示在屏幕上,完全是因为它内部的一个层。在创建 UIView 对象时,UIView 内部会自动创建一个层(即 CALayer 对象),通过 UIView 的 layer 属性可以访问这个层。当 UIView 需要显示到屏幕上时,会调用 drawRect: 方法进行绘图,并且会将所有内容绘制在自己的层上,绘图完毕后,系统会将层拷贝到屏幕上,于是就完成了 UIView 的显示。换句话说,UIView 本身不具备显示的功能,是它内部的层才有显示功能。

  • CALayer 的简单使用

    • CALayer 是被定义在 QuartzCore 框架中的,通过操作 CALayer 对象,可以很方便地调整 UIView 的一些界面属性,比如:阴影、圆角大小、边框宽度和颜色等。

2、基本绘图层属性设置

  • 1、设置阴影

        self.redView.layer.shadowOpacity = 1;                               // 阴影不透明度
        self.redView.layer.shadowOffset = CGSizeMake(10, 10);               // 阴影偏移量
        self.redView.layer.shadowColor = [UIColor yellowColor].CGColor;     // 阴影颜色
        self.redView.layer.shadowRadius = 10;                               // 阴影圆角半径
  • 2、圆角半径

        self.redView.layer.cornerRadius = 75;                               // 主层半径
  • 3、边框

        self.redView.layer.borderWidth = 3;                                 // 边框宽度
        self.redView.layer.borderColor = [UIColor blueColor].CGColor;       // 边框颜色
  • 4、imageView 圆角半径设置

        self.imageView.layer.cornerRadius = 75;                             // 主层半径
    
        // 超出主层边框的内容全部裁剪掉,image 在视图层上
        self.imageView.layer.masksToBounds = YES;                           // 是否对非主层裁剪
  • 效果

    animation1animation2

3、形变属性设置

3.1 视图形变

  • 1、单一形变

        // 旋转
        /*
            (CGFloat angle) 旋转 45 度,需要输入的参数为弧度,45/180 * M_PI,1 度 = PI/180 弧度
        */
        [UIView animateWithDuration:1 animations:^{
            self.redView.transform = CGAffineTransformMakeRotation(0.25 * M_PI);
        }];
    
        // 缩放
        /*
            (CGFloat sx, CGFloat sy) (1, 2) 宽度和高度的放大倍数
        */
        [UIView animateWithDuration:1 animations:^{
            self.redView.transform = CGAffineTransformMakeScale(1, 2);
        }];
    
        // 平移
        /*
            (CGFloat tx, CGFloat ty) (100, 100) 水平和垂直方向的移动距离
        */
        [UIView animateWithDuration:1 animations:^{
            self.redView.transform = CGAffineTransformMakeTranslation(100, 100);
        }];
    • 效果

      animation3animation4animation5

  • 2、 叠加形变

        // 旋转 + 缩放
        [UIView animateWithDuration:1 animations:^{
            CGAffineTransform rotationTransform = CGAffineTransformMakeRotation(0.25 * M_PI);
            self.redView.transform = CGAffineTransformScale(rotationTransform, 1.5, 1.5);
        }];
    
        // 旋转 + 平移
        [UIView animateWithDuration:1 animations:^{
            CGAffineTransform rotationTransform = CGAffineTransformMakeRotation(0.25 * M_PI);
            self.redView.transform = CGAffineTransformTranslate(rotationTransform, 100, 0);
        }];
    
        // 缩放 + 平移
        [UIView animateWithDuration:1 animations:^{
            CGAffineTransform scaleTransform = CGAffineTransformMakeScale(1, 1.5);
            self.redView.transform = CGAffineTransformTranslate(scaleTransform, 100, 0);
        }];
    
        // 旋转 + 缩放 + 平移
        [UIView animateWithDuration:1 animations:^{
            CGAffineTransform rotationTransform = CGAffineTransformMakeRotation(0.25 * M_PI);
            CGAffineTransform rotationScaleTransform = CGAffineTransformScale(rotationTransform, 1.5, 1.5);
            self.redView.transform = CGAffineTransformTranslate(rotationScaleTransform, 100, 0);
        }];
    • 效果

      animation6animation7

      animation8animation9

  • 3、累加形变

        // 连续旋转
        [UIView animateWithDuration:1 animations:^{
            self.redView.transform = CGAffineTransformRotate(self.redView.transform, 0.25 * M_PI);
        }];
    
        // 连续缩放
        [UIView animateWithDuration:1 animations:^{
            self.redView.transform = CGAffineTransformScale(self.redView.transform, 1.5, 1.5);
        }];
    
        // 连续平移
        [UIView animateWithDuration:1 animations:^{
            self.redView.transform = CGAffineTransformTranslate(self.redView.transform, 50, 50);
        }];
    • 效果

      animation10animation11animation12

  • 4、还原形变

        // 还原所有形变
        self.redView.transform = CGAffineTransformIdentity;

3.2 绘图层形变

  • 1、单一形变

        // 旋转
        /*
            (CGFloat angle) 旋转 45 度,需要输入的参数为弧度,45/180 * M_PI,1 度 = PI/180 弧度
        */
        [UIView animateWithDuration:1 animations:^{
            self.redView.layer.affineTransform = CGAffineTransformMakeRotation(0.25 * M_PI);
        }];
    
        // 缩放
        /*
            (CGFloat sx, CGFloat sy) (1, 2) 宽度和高度的放大倍数
        */
        [UIView animateWithDuration:1 animations:^{
            self.redView.layer.affineTransform = CGAffineTransformMakeScale(1, 2);
        }];
    
        // 平移
        /*
            (CGFloat tx, CGFloat ty) (100, 100) 水平和垂直方向的移动距离
        */
        [UIView animateWithDuration:1 animations:^{
            self.redView.layer.affineTransform = CGAffineTransformMakeTranslation(100, 100);
        }];
    
        // 还原所有形变
        self.redView.layer.affineTransform = CGAffineTransformIdentity;
    • 效果

      animation3animation4animation5

  • 2、快速进行绘图层形变,KVC

        // 旋转
        [UIView animateWithDuration:1 animations:^{
            [self.redView.layer setValue:@(0.25 * M_PI) forKeyPath:@"transform.rotation"];
        }];
    
        // 缩放
        [UIView animateWithDuration:1 animations:^{
            [self.redView.layer setValue:@1.5 forKeyPath:@"transform.scale"];
        }];
    • 效果

      animation3animation65

  • 3、绘图层 3D 形变

        // 旋转
        /*
            (CGFloat angle, CGFloat x, CGFloat y, CGFloat z) 旋转角度,x y z 轴的坐标,为 0 时在此轴上不旋转
        */
        [UIView animateWithDuration:1 animations:^{
            self.imageView.layer.transform = CATransform3DMakeRotation(M_PI, 0, 1, 0);
        }];
    
        // 缩放
        /*
            (CGFloat sx, CGFloat sy, CGFloat sz),x y z 轴的缩放倍数
        */
        [UIView animateWithDuration:1 animations:^{
            self.imageView.layer.transform = CATransform3DMakeScale(0.5, 0.5, 1);
        }];
    
        // 平移
        /*
            (CGFloat tx, CGFloat ty, CGFloat tz),x y z 轴的平移量
        */
        [UIView animateWithDuration:1 animations:^{
            self.imageView.layer.transform = CATransform3DMakeTranslation(100, 100, 0);
        }];
    • 效果

      animation13animation14animation15

3.3 获取形变值

  • 获取旋转的角度

        // 根据 transform 获取旋转角度
        CGFloat angle = atan2(self.redView.transform.b, self.redView.transform.a);

4、创建新的绘图层

  • UIView 内部默认有个 CALayer 对象(层),通过 layer 属性可以访问这个层。要注意的是,这个默认的层不允许重新创建,但可以往层里面添加子层。UIView 可以通过 addSubview: 方法添加子视图,类似地,CALayer 可以通过 addSublayer: 方法添加子层。

  • 1、添加一个简单的图层

        // 创建图层
        CALayer *myLayer = [CALayer layer];
    
        myLayer.frame = CGRectMake(100, 100, 200, 200);
        myLayer.backgroundColor = [UIColor redColor].CGColor;
    
        [self.view.layer addSublayer:myLayer];
    • 效果

      animation16

  • 2、添加一个显示图片的图层

        // 创建图层
        CALayer *myLayer = [CALayer layer];
    
        myLayer.frame = CGRectMake(100, 100, 200, 200);
        myLayer.backgroundColor = [UIColor redColor].CGColor;
    
        // 设置图层内容
        myLayer.contents = (id)[UIImage imageNamed:@"demo2.jpg"].CGImage;
    
        [self.view.layer addSublayer:myLayer];
    • 效果

      animation17

  • 3、为什么 CALayer 中使用 CGColorRef 和 CGImageRef 这 2 种数据类型,而不用 UIColor 和 UIImage ?

    • 首先要知道:CALayer 是定义在 QuartzCore 框架中的;CGImageRef、CGColorRef 两种数据类型是定义在 CoreGraphics 框架中的;UIColor、UIImage 是定义在 UIKit 框架中的。
    • 其次,QuartzCore 框架和 CoreGraphics 框架是可以跨平台使用的,在 iOS 和 Mac OS X 上都能使用,但是 UIKit 只能在 iOS 中使用。
    • 因此,为了保证可移植性,QuartzCore 不能使用 UIImage、UIColor,只能使用 CGImageRef、CGColorRef。
    • 不过很多情况下,可以通过 UIKit 对象的特定方法,得到 CoreGraphics 对象,比如 UIImage 的 CGImage 方法可以返回一个 CGImageRef。
  • 4、UIView 和 CALayer 的选择

    • 细心的朋友不难发现,其实前面的 2 个效果不仅可以通过添加层来实现,还可以通过添加 UIView 来实现。比如,第 1 个红色的层可以用一个 UIView 来实现,第 2 个显示图片的层可以用一个 UIImageView 来实现。既然 CALayer 和 UIView 都能实现相同的显示效果,那究竟该选择谁好呢?
    • 其实,对比 CALayer,UIView 多了一个事件处理的功能。也就是说,CALayer 不能处理用户的触摸事件,而 UIView 可以。
    • 所以,如果显示出来的东西需要跟用户进行交互的话,用 UIView;如果不需要跟用户进行交互,用 UIView 或者 CALayer 都可以。
    • 当然,CALayer 的性能会高一些,因为它少了事件处理的功能,更加轻量级。
  • 5、UIView 和 CALayer 的关系

    • UIView 可以通过 subviews 属性访问所有的子视图,类似地,CALayer 也可以通过 sublayers 属性访问所有的子层。
    • UIView 可以通过 superview 属性访问父视图,类似地,CALayer 也可以通过 superlayer 属性访问父层。
    • 下面再看一张 UIView 和 CALayer 的关系图,如果两个 UIView 是父子关系,那么它们内部的 CALayer 也是父子关系。

      animation18

5、绘图层隐式动画属性

  • 在前面已经提到,每一个 UIView 内部都默认关联着一个 CALayer,我们可称这个 Layer 为 Root Layer(根层)。所有的非 Root Layer,也就是手动创建的 CALayer 对象,都存在着隐式动画。

  • 当对非 Root Layer 的部分属性进行相应的修改时,默认会自动产生一些动画效果,这些属性称为 Animatable Properties 可动画属性。

    animation38

    animation39

    animation40

    animation41

    animation37

  • 列举几个常见的 Animatable Properties:

        bounds          :用于设置 CALayer 的宽度和高度。修改这个属性会产生缩放动画。
        backgroundColor :用于设置 CALayer 的背景色。修改这个属性会产生背景色的渐变动画。
        position        :用于设置 CALayer 的位置。修改这个属性会产生平移动画。比如:假设
                          一开始 CALayer 的 position 为(100, 100),然后在某个时刻修改为
                          (200, 200),那么整个 CALayer 就会在短时间内从 (100, 100) 这个
                          位置平移到 (200, 200)
  • 1、隐式动画属性设置

        self.myLayer.bounds = CGRectMake(0, 0, 100, 100);
    
        self.myLayer.backgroundColor = [UIColor greenColor].CGColor;
    
        self.myLayer.position = CGPointMake(arc4random_uniform(200) + 20, arc4random_uniform(400) + 50);
    
        self.myLayer.transform = CATransform3DMakeRotation(arc4random_uniform(360), 0, 0, 1);
    • 效果

      animation19animation20

      animation21animation22

  • 2、可以通过动画事务(CATransaction)关闭默认的隐式动画效果。

        [CATransaction begin];
        [CATransaction setDisableActions:YES];
    
        self.myLayer.position = CGPointMake(10, 10);
    
        [CATransaction commit];

6、绘图层 position 和 anchorPoint 属性

  • position 和 anchorPoint 属性都是 CGPoint 类型的。

        position    :位置,可以用来设置 CALayer 在父层中的位置,它是以父层的左上角为坐标原点(0, 0)。
        anchorPoint :锚点,称为 "定位点",它决定着 CALayer 身上的哪个点会在 position 属性所指的位置。
                      它的 x、y 取值范围都是 0~1,默认值为 (0.5, 0.5)。
  • 1、anchorPoint 为默认值(0.5, 0.5)

        CALayer *myLayer = [CALayer layer];
    
        myLayer.backgroundColor = [UIColor redColor].CGColor;
        myLayer.bounds = CGRectMake(0, 0, 100, 100);
    
        // 设置层的位置
        myLayer.position = CGPointMake(100, 100);
    
        [self.view.layer addSublayer:myLayer];
    • 设置了 myLayer 的 position 为(100, 100),又因为 anchorPoint 默认是(0.5, 0.5),所以最后的效果是 myLayer 的中点会在父层的(100, 100)位置。

      animation23

  • 2、anchorPoint 为(0, 0)

    • 若将 anchorPoint 改为(0, 0),myLayer 的左上角会在(100, 100)位置。

          myLayer.anchorPoint = CGPointMake(0, 0);

      animation24

  • 3、anchorPoint 为(1, 1)

    • 若将 anchorPoint 改为(1, 1),myLayer 的右下角会在(100, 100)位置。

          myLayer.anchorPoint = CGPointMake(1, 1);

      animation25

  • 4、anchorPoint 为(0, 1)

    • 将 anchorPoint 改为(0, 1),myLayer 的左下角会在(100, 100)位置。

          myLayer.anchorPoint = CGPointMake(0, 1);

      animation26

7、自定义绘图层

7.1 自定义绘图层方法 1

  • 创建一个 CALayer 的子类,然后覆盖 drawInContext: 方法,使用 Quartz2D API 进行绘图。

  • QCLayer.h

        @interface QCLayer : CALayer
    
        @end
  • QCLayer.m

        @implementation QCLayer
    
        #pragma mark 绘制一个实心三角形
    
        - (void)drawInContext:(CGContextRef)ctx {
    
            // 设置为蓝色
            CGContextSetRGBFillColor(ctx, 0, 0, 1, 1);
    
            // 设置起点
            CGContextMoveToPoint(ctx, 50, 0);
    
            // 从 (50, 0) 连线到 (0, 100)
            CGContextAddLineToPoint(ctx, 0, 100);
    
            // 从 (0, 100) 连线到 (100, 100)
            CGContextAddLineToPoint(ctx, 100, 100);
    
            // 合并路径,连接起点和终点
            CGContextClosePath(ctx);
    
            // 绘制路径
            CGContextFillPath(ctx);
        }
    
        @end
  • ViewController.m

        QCLayer *layer = [QCLayer layer];
    
        // 设置层的宽高
        layer.bounds = CGRectMake(0, 0, 100, 100);
    
        // 设置层的位置
        layer.position = CGPointMake(100, 100);
    
        // 开始绘制图层,需要调用这个方法,才会触发 drawInContext: 方法的调用,然后进行绘图
        [layer setNeedsDisplay];
    
        [self.view.layer addSublayer:layer];
  • 效果

    animation27

7.2 自定义绘图层方法 2

  • 设置 CALayer 的 delegate,然后让 delegate 实现 drawLayer:inContext: 方法,当 CALayer 需要绘图时,会调用 delegate 的 drawLayer:inContext: 方法进行绘图。
  • 这里要注意的是:不能再将某个 UIView 设置为 CALayer 的 delegate,因为 UIView 对象已经是它内部根层的 delegate,再次设置为其他层的 delegate 就会出问题。UIView 和它内部 CALayer 的默认关系图:

    animation28

  • 创建新的层,设置 delegate,然后添加到控制器的 view 的 layer 中。

        CALayer *layer = [CALayer layer];
    
        // 设置 delegate,这里的 self 是指控制器
        layer.delegate = self;
    
        // 设置层的宽高
        layer.bounds = CGRectMake(0, 0, 100, 100);
    
        // 设置层的位置
        layer.position = CGPointMake(100, 100);
    
        // 开始绘制图层,需要调用这个方法,才会通知 delegate 进行绘图
        [layer setNeedsDisplay];
    
        [self.view.layer addSublayer:layer];
  • 让 CALayer 的 delegate(前面设置的是控制器)实现 drawLayer:inContext: 方法

        #pragma mark 画一个矩形框
    
        - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {
    
            // 设置蓝色
            CGContextSetRGBStrokeColor(ctx, 0, 0, 1, 1);
    
            // 设置边框宽度
            CGContextSetLineWidth(ctx, 10);
    
            // 添加一个跟层一样大的矩形到路径中
            CGContextAddRect(ctx, layer.bounds);
    
            // 绘制路径
            CGContextStrokePath(ctx);
        }
  • 效果

    animation29

7.3 UIView 的详细显示过程

  • 当 UIView 需要显示时,它内部的层会准备好一个 CGContextRef(图形上下文),然后调用 delegate(这里就是 UIView)的 drawLayer:inContext: 方法,并且传入已经准备好的 CGContextRef 对象。而 UIView 在 drawLayer:inContext: 方法中又会调用自己的 drawRect: 方法

  • 平时在 drawRect: 中通过 UIGraphicsGetCurrentContext() 获取的就是由层传入的 CGContextRef 对象,在 drawRect: 中完成的所有绘图都会填入层的 CGContextRef 中,然后被拷贝至屏幕。

8、渐变图层

  • 渐变图层 CAGradientLayer : CALayer

  • 添加渐变图层

        CAGradientLayer *gradientLayer = [CAGradientLayer layer];
        gradientLayer.frame = self.imageView.bounds;
    
        // 设置透明度
        gradientLayer.opacity = 0.5;
    
        // 设置渐变颜色
        gradientLayer.colors = @[(id)[UIColor clearColor].CGColor, (id)[UIColor blackColor].CGColor];
    
        [self.imageView.layer addSublayer:gradientLayer];
        CAGradientLayer *gradientLayer = [CAGradientLayer layer];
        gradientLayer.frame = self.imageView.bounds;
    
        // 设置透明度
        gradientLayer.opacity = 0.5;
    
        // 设置渐变颜色
        gradientLayer.colors = @[(id)[UIColor redColor].CGColor,
                                      (id)[UIColor greenColor].CGColor,
                                      (id)[UIColor yellowColor].CGColor];
    
        // 设置渐变定位点
        gradientLayer.locations = @[@0.1, @0.4, @0.8];
    
        // 设置渐变开始点,取值 0~1
        gradientLayer.startPoint = CGPointMake(0, 1);
    
        [self.imageView.layer addSublayer:gradientLayer];
    • 效果

      animation86animation87

9、复制图层

  • 复制图层 CAReplicatorLayer : CALayer,可以把图层里面所有子层复制

  • 添加复制图层

        CAReplicatorLayer *repLayer = [CAReplicatorLayer layer];
        repLayer.frame = self.view.bounds;
        [self.view.layer addSublayer:repLayer];
    
        // 添加子层
        [repLayer addSublayer:self.imageView.layer];
    
        // 设置有多少个子层,包括原始层
        repLayer.instanceCount = 4;
    
        // 设置子层偏移量,不包括原始层,相对于原始层 x 偏移
        repLayer.instanceTransform = CATransform3DMakeTranslation(70, 0, 0);
    
        // 设置子层背景色
        repLayer.instanceColor = [UIColor greenColor].CGColor;
    
        // 设置子层阴影
        repLayer.instanceAlphaOffset = -0.1;
        repLayer.instanceRedOffset = -0.1;
        repLayer.instanceGreenOffset = -0.1;
        repLayer.instanceBlueOffset = -0.1;
    
        // 设置子层动画延迟时间,子层有动画时有效
        repLayer.instanceDelay = 0;
        CAReplicatorLayer *repLayer = [CAReplicatorLayer layer];
        repLayer.frame = self.view.bounds;
        [self.view.layer addSublayer:repLayer];
    
        // 添加子层
        CALayer *layer = [CALayer layer];
        layer.anchorPoint = CGPointMake(0.5, 1);
        layer.position = CGPointMake(100, 300);
        layer.bounds = CGRectMake(0, 0, 30, 150);
        layer.backgroundColor = [UIColor whiteColor].CGColor;
        [repLayer addSublayer:layer];
    
        // 添加子层动画
        CABasicAnimation *anim = [CABasicAnimation animation];
        anim.keyPath = @"transform.scale.y";
        anim.toValue = @0.1;
        anim.duration = 0.5;
        anim.repeatCount = MAXFLOAT;
        anim.autoreverses = YES;
        [layer addAnimation:anim forKey:nil];
    
        // 设置子层
        repLayer.instanceCount = 4;
        repLayer.instanceTransform = CATransform3DMakeTranslation(45, 0, 0);
        repLayer.instanceDelay = 0.1;
        repLayer.instanceColor = [UIColor greenColor].CGColor;
        repLayer.instanceGreenOffset = -0.3;
    • 效果

      animation88animation74

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
iOS开发CoreAnimation解读之二——对CALayer的分析(二)
iOS开发CoreAnimation解读之二——对CALayer的分析
0 0
iOS开发CoreAnimation解读之二——对CALayer的分析(一)
iOS开发CoreAnimation解读之二——对CALayer的分析
0 0
iOS开发CoreAnimation解读之二——对CALayer的分析(二)
iOS开发CoreAnimation解读之二——对CALayer的分析
0 0
iOS开发CoreAnimation解读之二——对CALayer的分析(一)
iOS开发CoreAnimation解读之二——对CALayer的分析
0 0
iOS开发:下架App的步骤
首先登陆你的 iTunes Connect
0 0
iOS 福利来了,方便开发的工具库集合(四)
iOS 福利来了,方便开发的工具库集合
0 0
iOS 福利来了,方便开发的工具库集合(三)
iOS 福利来了,方便开发的工具库集合
0 0
iOS 福利来了,方便开发的工具库集合(二)
iOS 福利来了,方便开发的工具库集合
0 0
+关注
QianChia
树的芳香由风决定,人生的芳香由自己决定!
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Facebook iOS App技术演化十年之路
立即下载
From Java_Android to Swift iOS
立即下载
深入剖析 iOS 性能优化
立即下载