核心动画(Core Animation Programming)

2,399 阅读7分钟

Content:

  • Layer Tree Structure
  • Core Animation's introduction
  • What's UIView?
  • What's CALayer?
  • UIView and CALayer relationship.
  • CALayer's function

Layer Tree Structure

Core Animation 这个框架实际上非常容易让iOS开发者误解仅仅是用来做动画效果的框架.实际上动画仅仅是是它功能的冰水一角. 它包括了图形绘制,投影,动画的Object-C 类集合.它通过我们iOS开发熟悉的应用程序套件与CocoaTouch 视图架构的抽象分层模式,提供了一套非常流畅的动画的接口出来.

Core Animation 是一个复合引擎,它能快速的组合屏幕上不同显示的内容. 并将其分解成独立图层,存储到Layer Tree 的体系中.

Core Animation's Introduction

有了Core Animation 这个框架,开发者就可以通过提供的接口,使得开发更加简单,例如:

  • 简单易用的高性能混合编程模型
  • 用类似于视图一样,使用图层来创建复杂的编程接口
  • 轻量化的数据结构,它可以同时显示让上百个图层产生动画效果
  • 一套非常较简单的动画接口,能让动画运行在独立的线程中,并可以独立于主线程之外.
  • 一旦动画配置完成并启动,核心动画就能独立并完全控制相应的动画帧.
  • 提高应用性能.应用程序只有当发生改变的时候才会重绘内容. 使用Core Animation 可以不使用其他图形API,例如OpenGL 来获取高效的动画性能.
  • 灵活的布局管理模型,允许图层相对同级图层的关系来设置属性的位置和大小.

Core Animaiton 分类

  • 提供显示内容的图层类
  • 动画和计时类
  • 布局和约束类
  • 事务类,在原子更新的时候组合图层类

核心动画是包括了基础类Quartz 核心框架(Quartz Core Framework)里面.Core Animation Class hierarchy (核心动画类层次结构图如下).

image

What's UIView?

iOS开发中,这个使用频率非常高的控件,同时在iOS 所有原生的视图都是由UIView 派生而来. UIView 具备处理触摸事件的能力,并且支持基于Core Graphics 绘图.来实现仿射变换(比如旋转缩放平移等).或者一些简单的滑动/渐变的动画.

视图在屏幕上可以是一个矩形块,它能够拦截类似鼠标点击或者触摸手势等用户交互方式. 并且在层级关系上可以互相嵌套,一个视图可以管理它所有的子视图的位置等.在开发项目过程中,这是非常常见的一个使用场景. 一个我们最常用的控件,我们是否真正了解它?

What's CALayer

CALayer 类是一个与UIView 非常类似的类. 同样也是被层级关系树管理的矩形块. 也可以填充为图片,文本或者背景颜色等. 也能管理子视图的位置.甚至CALayer 是有很多方法和属性来做动画处理和变换处理.

但是,CALayer与UIView在功能上的区别在哪儿? CALayer 不处理用户交互. CALayer 不清楚具体的响应链(iOS通过视图层级关系俩传递用户触摸事件的机制).它不能响应用户事件,即使API提供了一些方法来判断触点是否在图层的范围之内.

Core Animation的类层次结构图中,可以发现图层类(LayerClasses) 是Core Animation 的核心基础. CALayer 是整个图层类的基础,它是所有核心动画图层类的父类. 和UIView 一样,CALayer 也是有自己的父图层类,以及同样拥有子图层类的集合. 它构成了一个图层树的层次结构. CAlayer 从Application KitCocoa Touch 的视图类分离出来了.

UIView and CALayer relationship.

UIView 与 CALayer 平行的层级关系

image

  • 每个UIView 都会有一个CALayer 实例图层属性.也就是backing layer.UIView 的职责就是创建并管理这个图层.用来确保当前子视图在层级关系中添加或者移除的时候,他们的关联图层也同样对应层级关系.
  • 实际上,这背后的关联的图层才是真正用来在屏幕上显示和做动画的.UIView 就是对CALayer图层的封装,提供用户交互接口.

图层数结构

每个可见的图层树,都由2个相应的树组成.一个是呈现树,一个是渲染树.

image

  • 图层树: 包含每一层的对象模型值.其实就是开发者设置的图层的属性值
  • 呈现树: 包括当前动画发生时候将要显示的相应的值,例如,你要给图层背景颜色设置新的值的时候,它就会立即修改图层树里对应的值.但是在呈现树里面的背景颜色值将要现在给用户的时候才会更新为新值.
  • 渲染树: 在渲染图层的使用呈现树的值,渲染树负责执行独立u应用活动的复杂操作.渲染由一个单独的进程/线程来执行,使其对应用程序的运行循环影响降到最低.

为什么iOS要基于UIView 和 CALayer 提供两个平行的层级关系.

苹果为何要如此设计?为何不用一个简单的层级来处理所有的事情. 其实原因在于职责分离,这样可以避免很多重复代码. 在iOSMac OS 两个平台下,事件和用户交互存在比较大的差异,比如Mac OS的用户交互可以通过鼠标/键盘控制.而iOS则通过手势触摸. 这就是为何iOS开发界面使用UIKitUIView ,而Mac OS 开发界面使用AppKitNSView. 因为他们之间的用户交互手段不一样.但是它们在功能上是非常类似的,所以都有CALayer ,而CALayer 只处理显示上的需求,不做交互上的需求处理.这样设计就可以减少非常多不必要的代码.

为何开发者要使用CALayer ?

根据刚刚的描述,既然CALayer 只是UIView 的内部实现细节,那为何在要来使用或者学习它? 而且苹果也提供给我们非常多优美简洁且高效的接口,几乎没有必要去使用CALayer了.实际上接口的封装带来了方便却丧失了灵活性.如果你略微想在底层上做一些改变或者使用一些苹果没有提供的接口功能,这是你就只能介入到Core Animation的底层之外,别无他选.

  • 图层不能处理触摸事件,同样也要视图不能做的事情:
    • 阴影,圆角,颜色边框
    • 3D变换
    • 非矩形范围
    • 透明遮罩
    • 多级非线性动画

CALayer's function

除了CALayer 类,CoreAnimation 还提供了很多其他内容的类.

  • MAC OSiOS 通用的类:

    • CAScrollLayer: CALayer 子类,简化显示图层的一部分内容,CAScrollLayer 对象的滚动区域范围在它的子图层中定义.CAScorllLayer 不提供键盘/鼠标处理事件和不显示滚动条.
    • CATextLayer : 为了方便显示字符串图层
    • CATiledLayer: 允许递增的显示大而复杂的图片
  • Mac OS 单独提供的类

    • CAOpenGLLayer 提供一个OpenGL 渲染环境.你必须继承这个类才能使用OpenGL 提供的内容. 内容可以静态也可以及时更新

    • QCCompositionLayer(Quartz框架提供): 显示Quartz合成动画.

    • QTMovieLayer & QTCaptureLayer: (QTKit框架提供),播放QuickTime 视频内容

  • iOS 新增的相关Layer

    • CAEAGLLayer : OpenGL ES 渲染环境

End

  • 参考 #核心动画编程指南#
  • 参考 #iOS核心动画高级技巧#

关注微信公众号:iOSSir,每日更新苹果资讯、技术干货!

image.png