视觉效果

1. 圆角

CALayer conrnerRadius属性控制图层角度的曲率. 浮点数, 默认是0, 这个曲率值只能影响背景颜色而不影响背景图片或是子图层.CALayer还有个maskToBounds属性,设置为YES时候,图层里面所有东西都会被截取.

2. 图层边框

CALayer另外两个非常有用的属性就是borderWidth,borderColor,这两个属性定义了图层边的绘制样式,这条线沿着图层的bounds绘制,同事也包含图层的角.

边框是绘制在图层边界里面的,而且在所有子内容之前,也在子图层之前.

3. 阴影

阴影相关的属性:

shadowRadius; //阴影虚化半径
shadowColor; //阴影颜色, 默认是黑色
shadowOffset; //阴影偏移
shadowOpacity; //阴影的不透明度
shadowPath; //阴影路径,CGPath类型

shadowOpacity: 表示不透明度,1:完全不透明; 0, 完全透明.
shadowOffset: 控制阴影的方向和距离,是一个CGSiz的值,宽度控制横向偏移,高度控制纵向偏移,默认值是{0, -3}, 相对y向上偏移3个点. 原因是shadow最初是在mac OS上面世的, 而Mac OS上,y轴方向和iOS上y轴方向是颠倒的, 在Mac上shadowOffset默认值是向下偏移的,所以造成iOS上默认值向上偏移.
shadowRadius: 通常, 越是需要让视图或者控件非常醒目独立于背景之外, 就应该给shadowRadius设置一个稍大的值, 阴影月模糊, 图层的深度看上去就会越明显.

4. 阴影裁剪

图层的边框继承自本图层的边框和cornerRadius,但是图层的阴影继承自内容的外形(包括子图层), 而不是根据边界和角半径来确定. 为了计算出阴影的形状,CoreAnimation会将寄宿图(包括子视图)考虑在内,然后通过这些来完美搭配图层形状从而创建一个阴影.

当阴影和裁剪扯上关系, 就会出现很麻烦的限制, 要裁剪的话, 在图层边框之外所有绘制都会被裁减掉, 包括阴影, 但是又需要阴影, 怎么办呢? 解决就是, 阴影图层作为容器图层, 裁剪图层作为子图层, 这样可以完美解决.

5. shadowPath属性

从上上一节已经了解到, 阴影并不总是方的, 而是根据图层以及子图层的内容计算出来的. 但是有时候计算阴影也是给长消耗资源的, 尤其是图层中有很多子图层时候.

如果我们事先知道阴影形状是什么样子的, 那么可以通过制定shadowPath来提高性能. 值是一个CGPathRef类型的. CGPath是 Core Graphics 对象, 可以制定任意的矢量图形. 我们可以通过这个属性独立于图层之外制定阴影的外形.

复杂的形状, 我们可以通过UIBezierPath来绘制.

6. 图层蒙版

CALayer有个mask属性, 这个属性本身是一个CALayer类型, 有和其它图层一样的绘制和布局属性. 它类似于一个子图层, mask图层中被绘制或者有内容的区域是透明的, 可以看到父图层上的内容, 就像是ps上的蒙版效果. mask图层定义了父图层的可见部分.

mask图层的color属性是不关紧要的, 重要的图层的轮廓, mask图层实心的部分就是父图层会被保留下来的部分.

示例代码:

    //测试mask属性
    CALayer *bgLayer = [CALayer layer];
    bgLayer.backgroundColor = [UIColor redColor].CGColor;
    bgLayer.frame = CGRectMake(0, 0, 100, 50);
    [self.maskView.layer addSublayer:bgLayer];
    
    self.maskView.backgroundColor = [UIColor blueColor];
    CALayer *maskLayer = [CALayer layer];
    maskLayer.contentsGravity = kCAGravityCenter;
    maskLayer.contents = (__bridge id)image.CGImage;
    maskLayer.frame = self.layerView.bounds;
    self.maskView.layer.mask = maskLayer;
    /*
     看到这个属性, 猜测这个属性可以实现的功能:
        1. 文本, 一个文字, 一半一个颜色.
        2. maskView上放个shapeLayer, 有背景色, mask是一个被填充满的layer, 可以通过控制shapeLayer来控制被填充的程度, 这个可以实现很多功能, 比如 进度条, 比如按住开始录音那个动画效果, 等等等等.
     */

效果:

7. 拉伸过滤

这个还没看懂....

8. 组透明

这个文章最后一小节:

http://wiki.jikexueyuan.com/project/ios-core-animation/visual-effect.html

来源：oschina

链接：https://my.oschina.net/u/2501614/blog/724922

标签

视觉效果

calayer

iOS核心动画笔记3-视觉效果

视觉效果

1. 圆角

2. 图层边框

3. 阴影

4. 阴影裁剪

5. shadowPath属性

6. 图层蒙版

7. 拉伸过滤

8. 组透明