zoukankan      html  css  js  c++  java
  • CALayer快速入门

    CALayer

    • 在iOS中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮、一个文本标签、一个文本输入框、一个图标等等,这些都是UIView

    • 其实UIView之所以能显示在屏幕上,完全是因为它内部的一个图层

    • 在创建UIView对象时,UIView内部会自动创建一个图层(即CALayer对象),通过UIView的layer属性可以访问这个层
      @property(nonatomic,readonly,retain) CALayer *layer;

    • 当UIView需要显示到屏幕上时,会调用drawRect:方法进行绘图,并且会将所有内容绘制在自己的图层上,绘图完毕后,系统会将图层拷贝到屏幕上,于是就完成了UIView的显示

    • 换句话说,UIView本身不具备显示的功能,是它内部的层才有显示功能

    0.概述

    • 怎么设置阴影:shadowOpacity,shadowRadius + 解释圆角半径 + 边框 达到效果:太阳发光
    • 比较特殊的View:UIImgeView + UIImageView圆角半径 + 主层和contents + 裁剪 + 阴影无效,达到效果,圆形头像
      可以改变图层的形变属性:touchBegin
    • 怎么旋转图层:给三维坐标系的点,与原点形成向量,绕着向量旋转,加动画演示旋转效果
    • 怎么利用KVC改变形变
      - KVC注意点:
      1> 给对象的哪个属性赋值,就写到keyPath里面。
      2> value的值一定是属性的类型才行
    • 如何快速二维旋转:ketPath为transform.rotation
    • 缩放注意:z轴不需要缩放,为1就好。
    • KVC的好处:利用KVC可以快速的进行二维旋转和,宽,高同时缩放.

    1.CALayer的基本使用

    • 通过操作CALayer对象,可以很方便地调整UIView的一些外观属性,比如:

      • 阴影
      • 圆角大小
      • 边框宽度和颜色
      • … …
    • 还可以给图层添加动画,来实现一些比较炫酷的效果

    2.CALayer的属性

    宽度和高度
    @property CGRect bounds;
    
    位置(默认指中点,具体由anchorPoint决定)
    @property CGPoint position;
    
    锚点(x,y的范围都是0-1),决定了position的含义
    @property CGPoint anchorPoint;
    
    背景颜色(CGColorRef类型)
    @property CGColorRef backgroundColor;
    
    形变属性
    @property CATransform3D transform;
    
    边框颜色(CGColorRef类型)
    @property CGColorRef borderColor;
    
    边框宽度
    @property CGFloat borderWidth;
    
    圆角半径
    @property CGColorRef borderColor;
    
    内容(比如设置为图片CGImageRef)
    @property(retain) id contents;
    
    /***** 设置阴影 *****/
    self.redView.layer.shadowColor = [UIColor greenColor].CGColor;
    
    //    self.redView.layer.shadowRadius = 20;
    
    /* The opacity of the shadow. Defaults to 0. Specifying a value outside the
    * [0,1] range will give undefined results. Animatable. */
    // opacity不透明度, 默认是0,设置为1才能看到shadow
    self.redView.layer.shadowOpacity = 1;
    
    self.redView.layer.shadowOffset = CGSizeMake(10, 10);
    
    
    /***** 设置边框 *****/
    self.redView.layer.borderColor = [UIColor yellowColor].CGColor;
    self.redView.layer.borderWidth = 2;
    
    

    3.关于CALayer的疑惑

    • 首先
      CALayer是定义在QuartzCore框架中的
      CGImageRef、CGColorRef两种数据类型是定义在CoreGraphics框架中的UIColor、UIImage是定义在UIKit框架中的

    • 其次
      QuartzCore框架和CoreGraphics框架是可以跨平台使用的,在iOS和Mac OS X上都能使用
      但是UIKit只能在iOS中使用

    • 为了保证可移植性,QuartzCore不能使用UIImage、UIColor,只能使用CGImageRef、CGColorRef

    4.UIView和CALayer的选择

    • 通过CALayer,就能做出跟UIImageView一样的界面效果

    • 既然CALayer和UIView都能实现相同的显示效果,那究竟该选择谁好呢?

      • 其实,对比CALayer,UIView多了一个事件处理的功能。也就是说,CALayer不能处理用户的触摸事件,而UIView可以
        所以,如果显示出来的东西需要跟用户进行交互的话,用UIView;如果不需要跟用户进行交互,用UIView或者CALayer都可以
        当然,CALayer的性能会高一些,因为它少了事件处理的功能,更加轻量级

    5.position和anchorPoint

    • CALayer有2个非常重要的属性:position和anchorPoint
    @property CGPoint position;
    用来设置CALayer在父层中的位置
    以父层的左上角为原点(0, 0)
    
    @property CGPoint anchorPoint;
    称为“定位点”、“锚点”
    决定着CALayer身上的哪个点会在position属性所指的位置
    以自己的左上角为原点(0, 0)
    它的x、y取值范围都是0~1,默认值为(0.5, 0.5)
    

    6.隐式动画

    • 每一个UIView内部都默认关联着一个CALayer,我们可用称这个Layer为Root Layer(根层)

    • 所有的非Root Layer,也就是手动创建的CALayer对象,都存在着隐式动画

    • 什么是隐式动画?

      • 当对非Root Layer的部分属性进行修改时,默认会自动产生一些动画效果
        而这些属性称为Animatable Properties(可动画属性)
    • 列举几个常见的Animatable Properties:

    bounds:用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画
    backgroundColor:用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画
    position:用于设置CALayer的位置。修改这个属性会产生平移动画
    
    • 具体使用
        // 修改带 Animatable的就可以有隐式动画
    //    self.layer.position = CGPointMake(200, 400);
    //
    //    self.layer.bounds = CGRectMake(0, 0, 100, 100);
    //
    //    self.layer.anchorPoint = CGPointMake(0, 0);
    
    //    self.layer.transform = CATransform3DMakeRotation(M_PI_2, 0, 0, 1);
    //
    //    self.layer.transform = CATransform3DMakeTranslation(100, 100, 50);
    
    //    self.layer.transform = CATransform3DMakeScale(0.5, 0.5, 1);
        self.layer.transform = CATransform3DMakeRotation(arc4random_uniform(M_PI * 2 + 1), 0, 0, 1);
    
        self.layer.position = CGPointMake(arc4random_uniform(200), arc4random_uniform(300));
    
        self.layer.borderWidth = arc4random_uniform(10);
    
        self.layer.borderColor = [self randomColor].CGColor;
    
        self.layer.cornerRadius = arc4random_uniform(100);
    
        self.layer.backgroundColor = [self randomColor].CGColor;
    
    • 关闭默认的隐式动画
    可以通过动画事务(CATransaction)关闭默认的隐式动画效果
    [CATransaction begin];
    [CATransaction setDisableActions:YES];
    self.myview.layer.position = CGPointMake(10, 10);
    [CATransaction commit];
    
    

    7.先建图层

    • 怎么显示自己的图层,直接加到控制器view的图层,还得设置位置和尺寸,背景。
    • 怎么给layer设置图片,设置contents:看头文件,contents必须是CGImageRef,UIImage先转CGImageRef在转id。
        CALayer *layer = [CALayer layer];
    
        // Layer也要有尺寸才能显示出来
        layer.frame = CGRectMake(50, 40, 200, 200);
        layer.borderColor = [UIColor greenColor].CGColor;
        layer.borderWidth = 2;
    
        layer.shadowColor = [UIColor yellowColor].CGColor;
        layer.shadowOpacity = 1;
        layer.shadowOffset = CGSizeMake(10, 10);
    
    
        // 设置layer的内容
        layer.contents = (id)[UIImage imageNamed:@"阿狸头像"].CGImage;
    
        layer.backgroundColor = [UIColor redColor].CGColor;
    
        [self.view.layer addSublayer:layer];
    
  • 相关阅读:
    HDU 2639 Bone Collector II (01背包,第k解)
    POJ 2184 Cow Exhibition 奶牛展(01背包,变形)
    hihoCoder #1165 : 益智游戏 (挑战赛11 B题)
    UVA 562 Dividing coins 分硬币(01背包,简单变形)
    POJ Charm Bracelet 挑饰品 (常规01背包)
    hiho一下 第四十四周 博弈游戏·Nim游戏(直接公式解)
    UVA 624 CD(01背包,要记录路径)
    118 Pascal's Triangle 帕斯卡三角形 杨辉三角形
    117 Populating Next Right Pointers in Each Node II 每个节点的右向指针 II
    116 Populating Next Right Pointers in Each Node 每个节点的右向指针
  • 原文地址:https://www.cnblogs.com/coderAlin/p/4752254.html
Copyright © 2011-2022 走看看