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];
        • [email protected]"Hello World";
        • label.textAlignment=NSTextAlignmentCenter;
        • [button addSubview:label];
        • button.layer.shouldRasterize=YES;
        • button.layer.rasterizationScale=[UIScreen mainScreen].scale;
时间: 2024-12-15 23:11:22

iOS Core Animation Advanced Techniques-视觉效果的相关文章

iOS Core Animation Advanced Techniques(二):视觉效果和变换

四)视觉效果 嗯,园和椭圆还不错,但如果是带圆角的矩形呢? 我们现在能做到那样了么? 史蒂芬·乔布斯 我们在第三章『图层几何学』中讨论了图层的frame,第二章『寄宿图』则讨论了图层的寄宿图.但是图层不仅仅可以是图片或是颜色的容器:还有一系列内建的特性使得创造美丽优雅的令人深刻的界面元素成为可能.在这一章,我们将会探索一些能够通过使用CALayer属性实现的视觉效果. 圆角 圆角矩形是iOS的一个标志性审美特性.这在iOS的每一个地方都得到了体现,不论是主屏幕图标,还是警告弹框,甚至是文本框.按

iOS Core Animation Advanced Techniques(一):图层树、寄宿图以及图层几何学

(一)图层的树状结构 巨妖有图层,洋葱也有图层,你有吗?我们都有图层 -- 史莱克 Core Animation其实是一个令人误解的命名.你可能认为它只是用来做动画的,但实际上它是从一个叫做Layer Kit这么一个不怎么和动画有关的名字演变而来,所以做动画这只是Core Animation特性的冰山一角. Core Animation是一个复合引擎,它的职责就是尽可能快地组合屏幕上不同的可视内容,这个内容是被分解成独立的图层,存储在一个叫做图层树的体系之中.于是这个树形成了UIKit以及在iO

iOS Core Animation Advanced Techniques(三):专用图层

到目前为止,我们已经探讨过CALayer类了,同时我们也了解到了一些非常有用的绘图和动画功能.但是Core Animation图层不仅仅能作用于图片和颜色而已.本章就会学习其他的一些图层类,进一步扩展使用Core Animation绘图的能力. CAShapeLayer 在第四章『视觉效果』我们学习到了不使用图片的情况下用CGPath去构造任意形状的阴影.如果我们能用同样的方式创建相同形状的图层就好了. CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层子类.你指定诸如颜色

iOS Core Animation Advanced Techniques(七):高效绘图、图像IO以及图层性能

高效绘图不必要的效率考虑往往是性能问题的万恶之源. ——William Allan Wulf 在第12章『速度的曲率』我们学习如何用Instruments来诊断Core Animation性能问题.在构建一个iOS app的时候会遇到很多潜在的性能陷阱,但是在本章我们将着眼于有关绘制的性能问题. 软件绘图 术语绘图通常在Core Animation的上下文中指代软件绘图(意即:不由GPU协助的绘图).在iOS中,软件绘图通常是由Core Graphics框架完成来完成.但是,在一些必要的情况下,

IOS Core Animation Advanced Techniques的学习笔记(五)

第六章:Specialized Layers   类别 用途 CAEmitterLayer 用于实现基于Core Animation粒子发射系统.发射器层对象控制粒子的生成和起源 CAGradientLayer 用于绘制一个颜色渐变填充图层的形状(所有圆角矩形边界内的部分) CAEAGLLayer/CAOpenGLLayer 用于设置需要使用OpenGL ES(iOS)或OpenGL(OS X)绘制的内容与内容储备. CAReplicatorLayer 当你想自动生成一个或多个子层的拷贝.复制器

IOS Core Animation Advanced Techniques的学习笔记(四)

第五章:Transforms Affine Transforms CGAffineTransform是二维的 Creating a CGAffineTransform 主要有三种变化方法 旋转: CGAffineTransformMakeRotation(CGFloat angle) 缩放: CGAffineTransformMakeScale(CGFloat sx, CGFloat sy) 移动: CGAffineTransformMakeTranslation(CGFloat tx, CGF

IOS Core Animation Advanced Techniques的学习笔记(一)

转载. Book Description Publication Date: August 12, 2013 Core Animation is the technology underlying Apple’s iOS user interface. By unleashing the full power of Core Animation, you can enhance your app with impressive 2D and 3D visual effects and creat

iOS Core Animation Advanced Techniques(四):隐式动画和显式动画

隐式动画 按照我的意思去做,而不是我说的. -- 埃德娜,辛普森 我们在第一部分讨论了Core Animation除了动画之外可以做到的任何事情.但是动画师Core Animation库一个非常显著的特性.这一章我们来看看它是怎么做到的.具体来说,我们先来讨论框架自动完成的隐式动画(除非你明确禁用了这个功能). 事务 Core Animation基于一个假设,说屏幕上的任何东西都可以(或者可能)做动画.动画并不需要你在Core Animation中手动打开,相反需要明确地关闭,否则他会一直存在.

iOS Core Animation Advanced Techniques(六): 基于定时器的动画和性能调优

基于定时器的动画 我可以指导你,但是你必须按照我说的做. -- 骇客帝国 在第10章“缓冲”中,我们研究了CAMediaTimingFunction,它是一个通过控制动画缓冲来模拟物理效果例如加速或者减速来增强现实感的东西,那么如果想更加真实地模拟 物理交互或者实时根据用户输入修改动画改怎么办呢?在这一章中,我们将继续探索一种能够允许我们精确地控制一帧一帧展示的基于定时器的动画. 定时帧 动画看起来是用来显示一段连续的运动过程,但实际上当在固定位置上展示像素的时候并不能做到这一点.一般来说这种显

iOS Core Animation Advanced Techniques(五):图层时间和缓冲

图层时间 时间和空间最大的区别在于,时间不能被复用 -- 弗斯特梅里克 在上面两章中,我们探讨了可以用CAAnimation和它的子类实现的多种图层动画.动画的发生是需要持续一段时间的,所以计时对整个概念来说至关重要.在这一章中,我们来看看CAMediaTiming,看看Core Animation是如何跟踪时间的. CAMediaTiming协议 CAMediaTiming协议定义了在一段动画内用来控制逝去时间的属性的集合,CALayer和CAAnimation都实现了这个协议,所以时间可以被