视觉效果 -- iOS Core Animation 系列三

头像
CharlieWang
    阅读 7 分钟

    本片文章前三章内容大家比较常用，后面的可能会不那么常用，前面的基础内容不想看了可以直接从第4段开始

    圆角 conrnerRadius

    这个功能还是很常见的,本来不想记了，为了整个系列的完整性，还是啰嗦一下。

    CALayer有一个conrnerRadius的属性控制图层的圆角曲率，默认值为0。这个曲率值默认只影响背景颜色而不影响背景图片或者子图层。可以用过下面的示例看一下。

    在Storyboard中放置两个白色的view，每个view分别有两个子view(一个黄色，一个青色),而且都超出了父视图的边界：

    clipboard.png
    然后在代码中写入如下代码：

    

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *leftView;
@property (weak, nonatomic) IBOutlet UIView *rightView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  
  self.leftView.layer.cornerRadius = 20.f;
  self.rightView.layer.cornerRadius = 20.f;
  
  self.rightView.layer.masksToBounds = YES;
}


@end

    然后运行效果如下:

    clipboard.png

    通过上面的示例可以发现：

    • 只设置cornerRadius时，默认情况下，只影响背景颜色，而不影响背景图片或者子图层。
    • 如果想要截取这个视图的图片和子视图，需要设置masksToBounds为YES。

    图层边框 border

    CALayer另外两个非常有用的属性borderWidth和borderColor。
    borderWidth是以点为单位定义边框粗细的浮点数，默认为0。borderColor定义了边框的颜色，默认为黑色。

    borderColor是CGColorRef类型。

    边框绘制在图层边界里面，在所有子图层之前。对上面的示例代码坐下调整：

    - (void)viewDidLoad {
  [super viewDidLoad];
  
  self.leftView.layer.cornerRadius = 20.f;
  self.rightView.layer.cornerRadius = 20.f;
  
  self.leftView.layer.borderWidth = 5.f;
  self.rightView.layer.borderWidth = 5.f;
  
  self.rightView.layer.masksToBounds = YES;
}

    运行效果如下：

    clipboard.png

    如上面的示例的结果一样，边框并不会把寄宿图或子图层的相撞计算出来。而且绘制边框会显示在最上层。

    阴影 shadow

    阴影属性

    控制图层阴影的属性会比前面的边框多一些。

    • shadowOpacity属性控制阴影透明度的，它是一个在0.0和1.0之间的浮点数，如果设置为1.0将会显示一个轻微模糊的阴影。
    • shadowColor属性控制着阴影的颜色，和borderColor一样，它的类型也是CGColorRef，阴影默认是黑色的。
    • shadowOffset属性控制阴影的方向和距离，它是一个CGSize的值，宽度控制阴影横向位移，高度控制纵向位移。默认值是`{0, -3}。
    • shadowRadius属性控制着阴影的模糊度，当值为0的时候，阴影和视图一样有一个明显的边界，值越大，边界线看起来就会越模糊。
    阴影裁剪

    和图层边框不同，图层的阴影继承自内容的外形，而不是根据边界来界定。

    有个头疼的限制，阴影通常在Layer的边界之外，如果我们开启了maskToBounds之后，所有突出图层外的内容都会被裁剪到，包括我们设置的阴影。

    之前有个UI需求，同时设置阴影和圆角，圆角简单的使用layer.cornerRadius和maskToBounds。导致一直显示不出来阴影，差的原因是无法共存，到现在才发现是maskToBounds导致的。

    maskToBounds把阴影也裁掉的结果肯定不是我们想要的。但是在同一个图层缺又存在这个问题，所以这看起来很简单的效果，我们需要用到两个图层，一个图层做maskToBounds裁剪，一个图层画阴影。
    下面我们用圆角下面的那个demo稍作修改做个示例：

    首先对rightView做一个透明色的shadowView的包裹，用来设置阴影：

    clipboard.png

    将代码修改成如下：

    @interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *leftView;
@property (weak, nonatomic) IBOutlet UIView *rightView;
@property (weak, nonatomic) IBOutlet UIView *shadowView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  
  self.leftView.layer.cornerRadius = 20.f;
  self.rightView.layer.cornerRadius = 20.f;

  self.leftView.layer.borderWidth = 5.f;
  self.rightView.layer.borderWidth = 5.f;

  // 不添加其他图层直接给 leftView 设置阴影试一试
  self.leftView.layer.shadowOffset = CGSizeMake(5, 5);
  self.leftView.layer.shadowOpacity = 0.8f;
  self.leftView.layer.shadowRadius = 5.f;


  // 给 shadowView 添加和 leftview 一样的阴影效果
  self.shadowView.layer.shadowOffset = CGSizeMake(5, 5);
  self.shadowView.layer.shadowOpacity = 0.8f;
  self.shadowView.layer.shadowRadius = 5.f;

  // 将view裁剪
  self.rightView.layer.masksToBounds = YES;
}

@end

    运行的效果如图：

    clipboard.png

    注意看左边视图的阴影范围，很好的说明了图层的阴影继承自内容的外形，而不是根据边界来界定。
    shadowPath属性

    图层阴影并不总是方的，而是从内容的形状继承来的。因为计算阴影是一个很耗资源的步骤，尤其有多个子图层的时候。如果我们指定阴影的形状的话，可以指定阴影的样子来节省计算阴影的资源开销。
    shadowPath就是做这个事的，它是一个CGPathRef类型（指向CGPath的指针）。
    下图展示了同意寄宿图不同阴影的设定：

    clipboard.png
    上图的代码实现：

    
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *layerView1;
@property (weak, nonatomic) IBOutlet UIImageView *layerView2;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  
  self.layerView1.layer.shadowOpacity = 0.5f;
  self.layerView2.layer.shadowOpacity = 0.5f;
  
  // 添加矩形阴影
  CGMutablePathRef squarePath = CGPathCreateMutable();
  CGPathAddRect(squarePath, NULL, self.layerView1.bounds);
  self.layerView1.layer.shadowPath = squarePath;
  CGPathRelease(squarePath);
  
  // 添加圆形阴影
  CGMutablePathRef circlePath = CGPathCreateMutable();
  CGPathAddEllipseInRect(circlePath, NULL, self.layerView2.bounds);
  self.layerView2.layer.shadowPath = circlePath;
  CGPathRelease(circlePath);
  
}

@end
    如果一个矩形或者圆形，用CGPath很简单可以实现，如果复杂的图就需要借助UIBezierPath来实现了。

    图层蒙版 mask

    这节的原文章前有一堆铺垫的，我就不说了，想看的点击查看原文

    本节主要是介绍CALayer的maskt属性，它可以实现一些比较好玩的裁剪效果。而不是常规的圆形、矩形裁剪。
    mask图层的Color属性无关紧要，它真正有用的是图层的轮廓。如下图所示一样，mask属性像是一个切割机，mask图层实心的地方会被保留，其他地方被抛弃。

    clipboard.png

    下面我们实现以下上图的效果，首先在Storyboard里创建一个UIImageView，然后代码如下：

    @interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *imageView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  
  // 创建mask
  CALayer *maskLayer = [CALayer layer];
  maskLayer.frame = self.imageView.bounds;
  UIImage *maskImage = [UIImage imageNamed:@"test_mask"];
  maskLayer.contents = (__bridge id)maskImage.CGImage;
  
  // 添加到 imageview 上
  self.imageView.layer.mask = maskLayer;
  
  //  两张图片素材是在原文中截图处理的，所以展示的效果和原文有所差别。
}

@end

    运行效果如下：

    clipboard.png

    CALayer蒙板图层不局限于静态图，也可以通过代码甚至是动画实时生成蒙板。

    拉伸过滤

    关于这些我看了原文，确实不懂，而且我也没碰到过，无从下手做笔记。如果想了解的话请点击此处

    组透明 alpha

    UIView有一个alpha属性来决定视图的透明度，对应的CALayer有一个opacity属性。这两个属性都会影响子层级的显示透明度。

    下面做个示例。现在Storyboard里放置两个UIButton。然后代码如下：

    
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIButton *leftBtn;
@property (weak, nonatomic) IBOutlet UIButton *rightBtn;

@end

@implementation ViewController
- (UILabel *)subLbl {
  
  UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(20, 20, 90, 40)];
  label.text = @"Hello World";
  label.backgroundColor = [UIColor whiteColor];
  label.textAlignment = NSTextAlignmentCenter;
  return label;
}
- (void)viewDidLoad {
  [super viewDidLoad];
  
  [self.leftBtn addSubview:[self subLbl]];
  [self.rightBtn addSubview:[self subLbl]];
  self.rightBtn.alpha = 0.5;
}

@end

    运行的效果如下：

    clipboard.png

    这显示的效果有点怪。右边的设置了alpha为0.5。但是在UILabel的位置好像不是0.5的效果。这是因为透明度的混合叠加造成的。实际上右侧中间的透明度是0.75。

    当显示一个50%透明度的图层时，图层的每个像素都会一半显示自己的颜色，另一半显示图层下面的颜色。这是正常的透明度的表现。但是如果图层包含一个同样显示50%透明的子图层时，你所看到的视图，50%来自子视图，25%来了图层本身的颜色，另外的25%则来自背景色。

    如果想保持透明度一直。我们可以在info.plist文件中添加UIViewGroupOpacity并设置成YES来打到这个效果。还有一种方法就是对CALayer进行设置。
    shouldRasterize属性可以实现组透明，如果设置成YES，图层和它的子图层会被合成一个整体图片。
    启用shouldRasterize属性，一般需要同时设置图层的rasterizationScale属性防止出现Retina屏幕像素化的问题。

    shouldRasterize和UIViewGroupOpacity一起的时候，会出现性能问题，后面再讲。
    对上面的展示效果处理的代码如下：
    
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIButton *leftBtn;
@property (weak, nonatomic) IBOutlet UIButton *rightBtn;

@end

@implementation ViewController
- (UILabel *)subLbl {
  
  UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(20, 20, 90, 40)];
  label.text = @"Hello World";
  label.backgroundColor = [UIColor whiteColor];
  label.textAlignment = NSTextAlignmentCenter;
  return label;
}
- (void)viewDidLoad {
  [super viewDidLoad];
  
  [self.leftBtn addSubview:[self subLbl]];
  [self.rightBtn addSubview:[self subLbl]];
  self.rightBtn.alpha = 0.5;
  
  self.rightBtn.layer.rasterizationScale = [UIScreen mainScreen].scale;
  self.rightBtn.layer.shouldRasterize = YES;
}

@end

    效果如我们所愿。

    ---系列三完---

    objective-cxcodeioscore-animation
    CharlieWang
    20 声望2 粉丝

    Be a cartoon heart

    « 上一篇
    图层几何学 -- iOS Core Animation 系列二
    下一篇 »
    ARKit上手 添加3D物体

    引用和评论

    推荐阅读
    头像
    自制计算器——《自制编程语言》二

    CharlieWang阅读 2.5k

    头像
    苹果已提供新的设计资源 | Swift 周报 issue 32

    Swift社区赞 5阅读 686评论 2

    头像
    在 SwiftUI 中实战应用 ContentUnavailableView

    Swift社区赞 4阅读 648

    头像
    在 SwiftUI 中实战使用 MapKit API

    Swift社区赞 4阅读 627

    头像
    SwiftUI Release 引入的辅助焦点管理

    Swift社区赞 4阅读 496

    头像
    Swift 定制 Core Data 迁移

    Swift社区赞 3阅读 834

    头像
    如何使用 SwiftUI 构建 visionOS 应用

    Swift社区赞 3阅读 707评论 2

    0 条评论
    得票最新