iOS Core Animation Advanced Techniques-视觉效果

Posted Jk_Chan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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;

 

以上是关于iOS Core Animation Advanced Techniques-视觉效果的主要内容,如果未能解决你的问题,请参考以下文章

iOS - Core Animation(核心动画)

iOS - Core Animation(核心动画)

iOS开发之Core Animation

IOS开发——Core Graphics & Core Animation

iOS Core Animation之CALayer心得

ios之核心动画(Core Animation)