美文网首页
CoreAnimation理解和使用

CoreAnimation理解和使用

作者: 思绪_HY | 来源:发表于2018-11-05 15:02 被阅读20次

    简介

    CoreAnimation如果只从字面上来理解,就会感觉这只是用来作用动画的一个类库,其实动画只是它的一部分,最重要的是它可以快速组合屏幕上不同的可视内容,这些内容被分解成独立的图层,存储在一个图层树的体系中。所有我们能在屏幕上看到的内容都和这个有关。

    图层的理解

    说到CoreAnimation不能不说的就是图层,图层可以说是CoreAnimation的基础。那么图层究竟是什么?

    一般对于一个iOS开发人员来说视图(UIView)应该使我们比较熟悉,基本上我们可以在屏幕上看到的都和它有关。一个视图就是我们所能看到的矩形块,并且可以管理显示他上边的子视图,处理用户的交互事件,等等。

    在每个UIView创建的时候都会创建一个CALayer实例,这个实例就是我们说的图层,UIView其实就是图层+ 处理交互事件的集合,图层负责展示可见的内容,但是图层并不处理交互事件,或者说根本不知道这些交互事件,真正处理这些事件的是UIView自己本身。简单来说,UIView中的图层(layer)主要做的是如何显示内容,各种交互事件由UIView自己处理。

    UIView一样,CALayer也有层级的概念,CALayer也可以添加子图层,添加子图层后,最终显示的就是多个图层叠加后的结果。

    我们平时用的比较多的是UIView提供的高级接口,这是我们开发起来更容易,但有些时候UIView并不能完全满足我们的需求,这时候直接使用图层能给我们提供更大的定制化需求。例如在一个UIView上边直接绘制一个圆。

    image

    同时图层也提供了其他的一些能力:

    • 设置阴影、圆角、带颜色的边框
    • 3D变换
    • 非矩形区域设置
    • 透明的遮罩
    • 多级非线性动画

    创建图层

    我们创建一个图层可以使用:

    let layer = CALayer()
    

    图层也有很多属性可以设置,背景色、frame、bounds等等

    layer.backgroundColor = UIColor.blue.cgColor //图层的背景色是CGColor类型
    layer.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
    layer.position = CGPoint(x: 50, y: 50) // 在UIView中叫做 center
    layer.isHidden = false
    

    需要显示layer的时候可以将一个 layer添加到另一个layer上:

    let view = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
    view.layer.addSublayer(layer)
    

    CALayer的寄宿图

    我们之间通过设置背景色可以将图层的底色设置为各种颜色,但是图层所能做的远远不止如此。

    CALayer有一个contents属性,我们可以通过给contents属性赋值一个CGImage类型,来显示一张图片,虽然contents可以接受的类型是 Any,但是如果我们所赋的值不是一个CGImage类型,那么图层将显示一片空白。

    image image

    设置了之后,我们发现这个图片好像被拉伸了,我们可以通过设置contentGravity来避免拉伸,这个属性对应UIView里边的contentMode, contentGravity是一个String类型,主要有这些可选:

    • kCAGravityCenter //居中显示
    • kCAGravityTop //从顶部开始显示
    • kCAGravityBottom //从底部开始显示
    • kCAGravityLeft //从左边开始显示
    • kCAGravityRight //从右边开始显示
    • kCAGravityTopLeft //从左上角开始显示
    • kCAGravityTopRight //从右上角开始显示
    • kCAGravityBottomLeft //从左下角开始显示
    • kCAGravityBottomRight //从右下角开始显示
    • kCAGravityResize //拉伸
    • kCAGravityResizeAspect//按比例缩放
    • kCAGravityResizeAspectFill//按比例填充

    我们通过设置kCAGravityResizeAspect来让图片按比例缩小显示

    image

    CALayer有一个contentsScale属性表示的是我们屏幕的一个坐标点应该绘制几个像素,这个跟苹果的Retina屏幕有关。我们调整contentsGravitykCAGravityCenter,也就是图片居中显示,不进行任何的拉伸和缩放。

    image

    我们可以看到图片变多了,并且可以看到一些像素颗粒,图片没有那么细腻了。我们可以通过设置contentsScale为屏幕的 scale来避免这样的显示。

    layer.contentsScale = UIScreen.mian.scale
    
    image

    这样看起来是不是显示的细腻多了。

    如果你仔细观察就会发现,我们layer本身的大小只有200 * 200,但实际的显示好像不止200 * 200了,为什么超过了边界还会显示,这个跟CALayer的另一个属性maskToBounds有关,这个属性默认是false,也就是当内容超过边界的时候不会裁剪,依然会绘制出来,我们把他设置为 true 来看下效果

    image

    contentsRect属性可以用来设置图层要显示寄宿图的哪部分区域,我们设置

    layer.contentsRect = CGRect(x: 0, y: 0, width: 0.5, height: 0.5)
    

    显示出来就是这个样子的:

    image

    这里的 CGRect 的每个属性的范围都是0 ~ 1,是一个单位坐标,这里我们设置的值就是取的图片的左上角的 1 / 4 。

    还有一个比较重要的 contentsCenter 属性,表示当layer大小改变的时候,寄宿图可被拉伸的区域,默认的值是 CGRect(x: 0, y:0 ,width: 1, height: 1)

    自定义绘图

    我们一般在UIView上绘图的时候可以继承UIView并重写draw(_ rect: CGRect)方法,在这个方法里边取的上下文进行自定义的绘制。如果重写了这个方法,UIView 就会创建一个寄宿图,大小是 UIViewwidth * height * 屏幕scale,如果是在比较大的区域绘制,不建议用这种方式,这种方式会造成内存暴涨。可以通过专用图层来解决这个问题,后边会说道这个问题。

    也可以直接通过CALayer的代理方法来绘制,当为layer设置了代理对象后,需要显示的时候,layer会先调用代理方法display(_ layer: CALayer),来请求代理对象给他设置一个寄宿图。我们可以在这个代理方法里边设置layercontents,如果代理不实现display(_ layer: CALayer)方法,那么layer会先创建一个空的寄宿图,然后调用draw(_ layer: CALayer, in ctx: CGContext)传入创建的上下文进行绘制。

    当我们需要重绘一个layer的时候,可以调用它的setNeedsDisplay()displayIfNeeded()

    结语

    这是CoreAnimation的第一篇章,后边会继续介绍动画和绘图优化。

    相关文章

      网友评论

          本文标题:CoreAnimation理解和使用

          本文链接:https://www.haomeiwen.com/subject/kresxqtx.html