iOS动画学习-视觉效果

最新推荐文章于 2025-05-17 14:53:09 发布

转载最新推荐文章于 2025-05-17 14:53:09 发布 · 72 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Devhwl/p/7155916.html

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对象，用来指定任意的一个矢量图形。我们可以通过这个属性单独于图层形状之外指定阴影的形状。