iOS Core Animation Advanced Techniques-视觉效果

Posted 2020-06-21 Jk_Chan

读《ios Core Animation Advanced Techniques》第四章随笔

上三章节：

1. 图层树
2. 图层的寄宿图
3. 图层几何学

这篇随笔主要介绍有关图层视觉效果。

圆角：

• conrnerRadius属性
• 该属性控制CALayer图层角的曲率，默认0.0（直角）
• 该属性控制的曲率值只影响背景颜色而不影响背景图片或子图层，可以通过设置masksToBounds属性为YES截取图层里面的所有东西；
• 使用例子：
• myView.layer.cornerRadius=20.0f;
• myView.layer.masksToBounds=YES;

图层边框：

• borderWidth与borderColor属性

1. 两个属性共同定义图层边的绘制样式，沿着图层的bounds绘制，包含图层的角
2. 边框绘制在图层边界里，且在所有子内容前

• borderWidth
  • 以点为单位，默认0.0
• borderColor
  • 定义边框颜色，默认黑色
  • 是CGColorRef类型
  • 使用例子：
  • myView.layer.cornerRadius=20.0f;
  • myView.layer.masksToBounds=YES;
  • myView.layer.borderWidth=5.0f;
  • myView.layer.borderColor=[UIColor blueColor].CGColor;

阴影：

• shadowOpacity属性
  • 默认0.0（不可见），最大范围1.0（完全不透明）之间的浮点数
  • 可以显示在任意图层下
• 通过以下3个属性改动阴影的表现：
  • shadowColor
    • 控制阴影颜色，默认黑色，属于CGColorRef类型
  • shadowOffset
    • 控制阴影的方向和距离，属于CGSize类型，默认{0,-3}，即阴影相对Y轴有3个点的向上位移
  • shadowRadius
    • 控制阴影的模糊度，值越大越模糊

阴影裁剪：

• 阴影绘制不同于边框绘制，阴影绘制是沿自图层内容（寄宿图，子视图）的外形，而不是根据边界与角半径决定
• 当阴影与裁剪一起使用时会发生冲突：阴影通常在Layer边界之外，若此时开启masksToBounds属性，图层中突出的内容会被剪掉，那么整个图层设置的阴影效果将会消失
• 解决方案：使用两个图层，一个只画阴影的空的外图层，一个用masksToBounds裁剪内容的内图层，使用例子：
  • //myView与myShadowView的frame属性应该设置为一样
  • myView.layer.cornerRadius=20.0f;
  • myView.layer.masksToBounds=YES;
  • myShadowView.layer.shadowOpacity=0.5f;
  • myShadowView.layer.shadowOffset=CGSizeMake(0.0f,5.0f);
  • myShadowView.layer.shadowRadius=5.0f;

shadowPath属性：

• 单独于图层形状之外指定阴影形状（只要能构造得出的CGPath路径的形状），是一个CGPathRef类型（一个指向CGPath的指针）
  • 使用例子：
  • myView.layer.shadowOpacity=0.5f;
  • CGMutablePathRef squarePath=CGPathCreateMutable();
  • CGPathAddRect(squarePath,NULL,myView.bounds);
  • myView.layer.shadowPath=squarePath;
  • CGPathRelease(squarePath);

图层蒙板：

• mask属性
  • 属于CALayer类型，有像其他正常图层一样的绘制与布局属性，类似一个子图层，相对于父图层布局，但却不是一个普通子图层，该图层定义了父图层的部分可见区域
  • 通过该属性可以让图层的寄宿图展现一个自己想展现的形状内容
  • 该属性就像一块不透明黑色木板，属性图层内容就像该不透明木板中的透明部分，当覆盖在拥有它这个属性的父图层上时，父图层只显示蒙板的透明部分
  • CALayer蒙板图层真正厉害的地方在于蒙板图不局限于静态图,任何有图层构成的都可以作为mask属性，这意味着你的蒙板可以通过代码甚至是动画实时生成。
    • 使用例子：
    • CALayer *maskLayer=[CALayer layer];
    • maskLayer.frame=myImageView.bounds;
    • UIImage *maskImage=[UIImage imageNamed:@"Cone.png"];
    • maskLayer.contents=(__bridge id)maskImage.CGImage;
    • myImageView.layer.mask=maskLayer;

拉伸过滤：

• minificationFilter(缩小图片)和magnificationFilter（放大图片）属性
• 作用于图片需要显示不同的大小的时候，作用于原图的像素上并根据需要生成新的像素显示于屏幕
• CALayer提供三种拉伸过滤方法：
  • kCAFilterLinear
    • 当放大倍数比较大时图片会模糊
  • kCAFilterNearest
    • 速度快，图片不会模糊，但是会压缩图片，放大后会显示块状
  • kCAFilterTrilinear
    • 性能高，失真少
  • minification与magnification默认过滤器都是kCAFilterLinear

组透明：

• shouldRasterize属性
  • CALayer的opacity属性控制图层的透明度，对应UIView上的alpha属性，都是会影响子层级
  • 值得注意的是CALayer的opacity属性设置透明度后会让父图层与子图层发生层级轮廓明显的问题
  • 可以通过设置CALayer的shouldRasterize属性为YES实现组透明效果解决透明度混合导致的父子轮廓明显
    • • 使用例子：
      • CGRect frame=CGRectMake(0,0,150,50);
      • UIButton *button=[[UIButton alloc]initWithFrame:frame];
      • button.backgroundColor=[UIColor whiteColor];
      • button.layer.cornerRadius=10;
      • frame=CGRectMake(20,10,110,30);
      • UILabel *label=[[UILabel alloc]initWithFrame:frame];
      • label.text=@"Hello World";
      • label.textAlignment=NSTextAlignmentCenter;
      • [button addSubview:label];
      • button.layer.shouldRasterize=YES;
      • button.layer.rasterizationScale=[UIScreen mainScreen].scale;