视觉效果 -- 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社区赞 6阅读 1.8k评论 2

    头像
    卖不动了 iPhone 在美国市场销量或陷入停滞 ｜ Swift 周报 issue 63

    Swift社区赞 6阅读 207

    头像
    在 SwiftUI 中实战使用 MapKit API

    Swift社区赞 4阅读 1.9k

    头像
    App 内购买项目和订阅即将实行价格与税率调整 ｜ Swift 周报 issue 33

    Swift社区赞 4阅读 1.8k

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

    Swift社区赞 4阅读 1.7k

    头像
    在 SwiftUI 中实战应用 ContentUnavailableView

    Swift社区赞 4阅读 1.7k

    0 条评论
    得票最新