iOS动画学习-视觉效果

CALayer不仅仅是iOS动画学习-CALayer中介绍的那些内容，他还有一些其他属性，比如shadowColor,borderWidth,borderColor等等，这些属性我们只需要简单点设置就能看到很好的效果，这里就介绍一下这些属性。

圆角（cornerRadius）

这个属性大家应该都很熟悉，在iOS中几乎无处不见，大家应该也经常用cornerRadius控制着图层角的曲率，它是一个浮点数，默认值为0（0的时候为直角），你可以把它设置成任意值。默认情况下，这个曲率值只影响背景颜色而不影响背景图片或是子图层，不过CALayer还有一个masksToBounds属性，只需把它设置为YES，图层里的东西都会被截取，下面用代码来解释一下：

用storyboard创建视图如下:

添加代码:

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *topView;
@property (weak, nonatomic) IBOutlet UIView *bottomView;

@end

- (void)viewDidLoad {
    [super viewDidLoad];

    self.topView.layer.cornerRadius = 20.0f;
    self.bottomView.layer.cornerRadius = 20.0f;

    // 设置底部视图的masksToBounds属性为YES
    self.bottomView.layer.masksToBounds = YES;

    // Do any additional setup after loading the view, typically from a nib.
}

以上代码产生的效果图如下，我们可以看到，没有将masksToBounds设置为YES的顶部视图，对子图层是不会切割的，

图层边框(borderWidth和borderColor)

CALayer另外两个非常有用属性就是borderWidth和borderColor。二者共同定义了图层边的绘制样式。这条线（也被称作stroke）沿着图层的bounds绘制，同时也包含图层的角。

borderWidth是以点为单位的定义边框粗细的浮点数，默认为0；borderColor定义了边框的颜色，默认为黑色。

边框是绘制在图层边界里面的，而且在所有子内容之前，也在子图层之前。我们可以在上面代码的基础上添加边框，就能看出效果了

添加之后的代码

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *topView;
@property (weak, nonatomic) IBOutlet UIView *bottomView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.topView.layer.cornerRadius = 20.0f;
    self.bottomView.layer.cornerRadius = 20.0f;
    
    self.topView.layer.borderWidth = 5.0f;
    self.bottomView.layer.borderWidth = 5.0f;

    // 设置底部视图的masksToBounds属性为YES
    self.bottomView.layer.masksToBounds = YES;

    // Do any additional setup after loading the view, typically from a nib.
}

运行之后的效果图如下，可以看到边框在子内容之前

阴影

iOS另一个常见特性是阴影，给shadowOpacity一个大于默认值(0)的值，阴影就可以显示在图层下，shadowOpacity的值必须是0.0（不可见）到1.0（完全不透明）之间的浮点数。除了这个参数之外，还有另外三个属性:shadowColor，shadowOffset和shadowRadius

显而易见，shadowColor属性控制着阴影的颜色，和borderColor和backgroundColor一样，它的类型也是CGColorRef。阴影默认是黑色，大多数时候你需要的阴影也是黑色的（其他颜色的阴影看起来是不是有一点点奇怪。。）。

shadowOffset属性控制着阴影的方向和距离。它是一个CGSize的值，宽度控制这阴影横向的位移，高度控制着纵向的位移。shadowOffset的默认值是 {0, -3}，意即阴影相对于Y轴有3个点的向上位移。

shadowRadius属性控制着阴影的模糊度，当它的值是0的时候，阴影就和视图一样有一个非常确定的边界线。当值越来越大的时候，边界线看上去就会越来越模糊和自然。苹果自家的应用设计更偏向于自然的阴影，所以一个非零值再合适不过了

阴影裁剪

当阴影和裁剪扯上关系的时候就有一个头疼的限制：阴影通常就是在Layer的边界之外，如果你开启了masksToBounds属性，所有从图层中突出来的内容都会被才剪掉。

从技术角度来说，这个结果是可以是可以理解的，但确实又不是我们想要的效果。如果你想沿着内容裁切，你需要用到两个图层：一个只画阴影的空的外图层，和一个用masksToBounds裁剪内容的内图层。

shadowPath

图层阴影并不总是方的，而是从图层内容的形状继承而来，但是实时计算阴影也是一个非常消耗资源的，尤其是图层有多个子图层，每个图层还有一个有透明效果的寄宿图的时候。

如果你事先知道你的阴影形状会是什么样子的，你可以通过指定一个shadowPath来提高性能，shadowPath是一个CGPathRef类型（一个指向CGPath的指针）。CGPath是一个Core Graphics对象，用来指定任意的一个矢量图形。我们可以通过这个属性单独于图层形状之外指定阴影的形状。

图层蒙板

通过masksToBounds属性，我们可以沿边界裁剪图形；通过cornerRadius属性，我们还可以设定一个圆角。但是有时候你希望展现的内容不是在一个矩形或圆角矩形。比如，你想展示一个有星形框架的图片，又或者想让一些古卷文字慢慢渐变成背景色，而不是一个突兀的边界。

使用一个32位有alpha通道的png图片通常是创建一个无矩形视图最方便的方法，你可以给它指定一个透明蒙板来实现。但是这个方法不能让你以编码的方式动态地生成蒙板，也不能让子图层或子视图裁剪成同样的形状。

CALayer有一个属性叫做mask可以解决这个问题。这个属性本身就是个CALayer类型，有和其他图层一样的绘制和布局属性。它类似于一个子图层，相对于父图层（即拥有该属性的图层）布局，但是它却不是一个普通的子图层。不同于那些绘制在父图层中的子图层，mask图层定义了父图层的部分可见区域。

mask图层的Color属性是无关紧要的，真正重要的是图层的轮廓。mask属性就像是一个饼干切割机，mask图层实心的部分会被保留下来，其他的则会被抛弃


代码如下：

@interface ViewController () <CALayerDelegate>

@property (weak, nonatomic) IBOutlet UIView *topView;

@property (weak, nonatomic) IBOutlet UIView *bottomView;

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

self.topView.layer.contents = (__bridge id)[UIImage imageNamed:@"image02"].CGImage;

self.topView.layer.contentsGravity = kCAGravityResizeAspect;

self.bottomView.layer.contents = (__bridge id)[UIImage imageNamed:@"image02"].CGImage;

self.bottomView.layer.contentsGravity = kCAGravityResizeAspect;

　　

　　// 注意创建的layer需要实体，可以在内部用图片来创建实体的layer，这里backgroundColor就是为了创建一个实体layer，并不会真正产生颜色效果

CALayer *layer = [CALayer layer];

layer.frame = CGRectMake(0, 0, 75, 75);

layer.backgroundColor = [UIColor redColor].CGColor;

self.topView.layer.mask = layer;

// Do any additional setup after loading the view, typically from a nib.

}

CALayer还有很多有意思的属性，大家可以查看头文件做更多的了解，这里只是介绍了常用的一些属性