视觉效果

圆角

CALayer有一个叫做conenerRadius的属性控制着图层角的曲率。float类型，默认为0.并且吧masksToBounds设置成为YES的话，图层里面的所有东西都会被截取，呈现出圆角状态。

边框

CALayer中的borderWidth和borderColor，两者共同定义了图层边的绘制样式。这条线沿着图层的bouds绘制，同时也包含图层的角。
borderWidth为float类型，默认为0，
borderColor为CGColorRef类型，默认黑色。

阴影

CALayer中的shadowOpacity属性控制着阴影，float类型，默认为0，
shadowColor控制着阴影的颜色，CGColorRef类型，默认黑色，
shadowOffset控制着阴影的方向和距离，CGSize的值，宽度控制这阴影横向的位移，高度控制着纵向的位移，默认值{0，-3}，即阴影相对于Y轴有3个点的向上位移，
shadowRadius控制着阴影的模糊度，float类型，默认为0，
shadowPath控制阴影的形状，CGPathRef类型（一个指向CGPath的指针）

变换

仿射变换

1.png

CGAffineTransform中的“防射”的意思是无论变换矩阵用什么值，图层中平行的两条线在变换之后仍然保持平行。
x按照a值得比例缩放，
y按照d值得比例缩放
x按照c值比例拉伸
y按照b值比例拉伸
x跟着tx进行平移
y会跟着ty进行平移

CGAffineTransformMakeRotation(CGFloat angle)
CGAffineTransformMakeScale(CGFloat sx, CGFloat sy) 
CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty)

UIView可以通过设置transform属性做变换，但实际上它只是封装了内部图层的变换
CALayer同样也有一个transform属性，但它的类型是CATransform3D
将一个图片旋转45度

  UIImage *image = [UIImage imageNamed:@"111"];
  self.layerView.layer.contents = (__bridge id)image.CGImage;
  CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI_4);
  self.layerView.layer.affineTransform = transform;

2.png

混合变换

Core Graphics提供了一系列的函数可以在一个变换的基础上做更深层次的变换，

CGAffineTransformRotate(CGAffineTransform t, CGFloat angle) 
CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy) 
CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty)

Tranform类型

1、平移

• 根据本身的transform进行平移 CGAffineTransformMakeTranslation(CGFloat tx,CGFloat ty)
• 根据本身的transform后另外的transform进行平移
  CGAffineTransformTranslate(CGAffineTransform t,CGFloat tx,CGFloat ty)

2、缩放

• 修改本身的transform进行缩放CGAffineTransformMakeScale(CGFloat sx,CGFloat sy)
• 根据本身的transform后者另外的transform进行缩放CGAffineTransformRotate(CGAffineTransform t,CGFloat angle)

3、反向旋转
CGAffineTransformInvert(CGAffineTransform t)
4、合并
将两个transform合并起来CGAffineTransformConcat(CGAffineTransform t1,CGAffineTransform t2)
5、放射矩阵应用

• 得到新的中心CGPoint CGPointApplyAffineTransform(CGPoint point,CGAffineTransform t)
• 得到新的size CGSize CGSizeApplyAffineTransform(CGSize size,CGAffineTransform t)
• 得到新的rect CGRect CGRectApplyAffineTransform(CGRect rect,CGAffineTransform t)
  放射矩阵一个常用的情形就是根据用户的收拾来相应的改变试图的变换。

//缩放50%，旋转30度，X轴移动50像素
UIImage *image = [UIImage imageNamed:@"111"];
self.layerView.layer.contents = (__bridge id)image.CGImage;
CGAffineTransform transform = CGAffineTransformIdentity;
transform = CGAffineTransformScale(transform, 0.5, 0.5);//缩放50%
transform = CGAffineTransformRotate(transform, M_PI / 180.0 * 30.0);//旋转30度
transform = CGAffineTransformTranslate(transform, 50, 0);//X轴移动50像素
self.layerView.layer.affineTransform = transform;

3.png

斜切变换

没有提供直接的函数，需要自己定义

CGAffineTransform CGAffineTransformMakeShear(CGFloat x, CGFloat y) {
    CGAffineTransform transform = CGAffineTransformIdentity;
    transform.c = -x;
    transform.b = y;
    return transform;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UIImage *image = [UIImage imageNamed:@"111"];
    self.layerView.layer.contents = (__bridge id)image.CGImage;
    self.layerView.layer.affineTransform = CGAffineTransformMakeShear(1, 0);
    
}

4.png

3D变换

CATransform3D是一个可以在三维空间内做变换的4*4矩阵

5.png

和CGAffineTransform矩阵类似，Core Animation提供了一系列的方法用来创建和组合CATransform3D类型的矩阵

//angle旋转的弧度，
CATransform3DMakeRotation(CGFloat angle, CGFloat x, CGFloat y, CGFloat z) 
//sx x轴缩放 sy y轴缩放 sz z轴缩放
CATransform3DMakeScale(CGFloat sx, CGFloat sy, CGFloat sz)
//tx x平移， ty y平移 tz z平移 
CATransform3DMakeTranslation(Gloat tx, CGFloat ty, CGFloat tz)

CATransform3D中的M34元素，用来做透视变换效果（-1.0/d）d表示了想象中视角相机和屏幕之间的距离
sublayerTransform属性表示父视图变换，里面的子试图也随之变换。

CAShapeLayer

CAShapeLayer是CALayer的子类，是通过一个矢量图而不是bitmap来绘制的图层子类。具有渲染速度快、高效实用内存、不会被图层边界裁掉、不会出现像素化等优点。

UIBezierPath *path = [[UIBezierPath alloc] init];
    [path moveToPoint:CGPointMake(175, 100)];
    
    [path addArcWithCenter:CGPointMake(150, 100) radius:25 startAngle:0 endAngle:2 * M_PI clockwise:YES];
    [path moveToPoint:CGPointMake(150, 125)];
    [path addLineToPoint:CGPointMake(150, 175)];
    [path addLineToPoint:CGPointMake(125, 225)];
    [path moveToPoint:CGPointMake(150, 175)];
    [path addLineToPoint:CGPointMake(175, 225)];
    [path moveToPoint:CGPointMake(100, 150)];
    [path addLineToPoint:CGPointMake(200, 150)];
    
    
    CAShapeLayer *shapLayer = [CAShapeLayer layer];
    shapLayer.strokeColor = [UIColor redColor].CGColor;
    shapLayer.fillColor = [UIColor clearColor].CGColor;
    shapLayer.lineWidth = 5;
    shapLayer.lineJoin = kCALineJoinRound;
    shapLayer.lineCap = kCALineCapRound;
    shapLayer.path = path.CGPath;
    [self.view.layer addSublayer:shapLayer];

6.png