Core Animation基础

元雄
• 阅读 2831

Core Animation是iOS动画实现的基础框架,它负责实现视图和其他可见元素的动画效果。Core Animation框架本身并不会进行图形的绘制工作,它的核心是通过CALayer对象来管理视图中展现的内容。CALayer会将可是内容缓存为bitmap然后将剩余的绘制工作交给图形硬件。

Core Animation基础

Core Animation实现动画的原理,大多数都是通过修改例如:大小、位置、透明度等图层属性来实现的。一个Core Animation的实现流程如下:

Core Animation基础

  1. CALayer将视图中的内容通过bitmap的方式缓存起来

  2. 修改改CALayer对象的某一个或者多个属性

  3. 硬件系统对上述改变作出响应,进行对应的绘制工作

  4. 展现最终的渲染效果

Core Animation中的树形结构

在Core Animation中有三个相互关联的图层树结构。每一个都反映了动画的不同的状态,在呈现App的内容的过程中扮演中不同的角色。

  • Layer Tree:在这个树中的对象负责存储所有动画的目标值的模型对象。无论何时需要改变图层的属性值,你使用的始终是其中的一个模型对象。

  • Presentation Tree:呈现树中的对象包含所有运行中的动画的瞬时值。图层树对象包含的是动画的目标值,而呈现树中的对象代表显示在屏幕上动画的当前值。

  • Render Tree:渲染树是动画的最终实现,并且属于Core Animation中的私有部分。

其中的每一个图层集合就像App中的View一样,按照树形结构组织在一起来管理。而且View层面的树形结构都会有一个对应的Layer层面的树形结构对应。当然我们也可以直接添加Layer对象而不必添加SubView,这表明Layer层面的树形结构不一定有一个相关的View层面树形结构与之对应。

Core Animation基础

对于Layer Tree的树形结构中的对象,Presentation Tree和Render Tree中都存在与之对应的对象。正如前面提到的,在动画实现的大部分时间里我们都是与Layer Tree中的对象进行交互的,但是我们想访问动画过程中的某些数值的时候就会需要使用Layer Tree对象的presentationLayer属性。

Core Animation基础

Presentation Tree中的对象表示了图层在屏幕中的瞬时值,因此只能在动画的进行时才能访问。而Layer Tree中的数值表示的动画最终的目标值。

CALayer与UIView

我们可以很清楚的发现CALayer实际上位于整个框架核心和基础的位置。那么它与我们编写代码中的常用的UIView是何种关系呢?其实两者在概念是类似的,都是通过层级关系树来管理矩形块以及其中可能包含的文本、图片、背景色等内容。最大的不同在于UIView会出现在用户事件的响应链当中并且处理这些交互,而CALayer则没有这些能力(虽然CALayer有时会被用来判断用户点击的位置是否在区域内)。

UIView与CALayer的层级其实是平行的,也就是说每个UIView的实例都会创建对应的CALayer属性实例。这样就能保证在View层面对SubView进行操作的时候能够在关联的Layer层面实现对应的效果。可以说View层就是基于Layer层进行了一层封装实现了更抽象的API接口以及交互处理的能力。之所以要这样做而不是采用一个简单的层级的原因就是:iOS的Cocoa Touch架构是从macOS的Cocoa架构演化而来,两者在Layer层的展现是类似的而在View层上的交互处理差别是巨大的。采用这种平行层级结构可以实现职责分离和解耦并且最大程度上避免不必要的重复代码方便维护。图层不是视图的替代品,我们无法创建一个基于单一图层对象的可视界面。不过图层能让视图的绘图和动画更简单和高效,并且能在绘图和动画时保持高帧率。可以说UIView的内部实现其实就是CALayer对象,所以我们可以深入到Layer层面对View层面的简单动画进行拓展来获得更高的灵活性。

点赞
收藏
评论区
推荐文章
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
4年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
3年前
Canvas之鼠标滑动特效
大家好,我是皮皮。我们会看到很多网页的粒子特效;如上图所示,这些都是借助HTML新特性,使用新增标签Canvas得到的效果;那么我们来了解下canvas。什么是Canvas在MDN中是这样定义  的: 是HTML5新增的元素,可用于通过使用JavaScript中的脚本来绘制图形。例如,它可以用于绘制图形、制作照片、创建动画,甚至可以进行实时
Wesley13 Wesley13
4年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
4年前
mysql中时间比较的实现
MySql中时间比较的实现unix\_timestamp()unix\_timestamp函数可以接受一个参数,也可以不使用参数。它的返回值是一个无符号的整数。不使用参数,它返回自1970年1月1日0时0分0秒到现在所经过的秒数,如果使用参数,参数的类型为时间类型或者时间类型的字符串表示,则是从1970010100:00:0
Wesley13 Wesley13
4年前
View绘制系列(10)
Canvas基础变换前面学习了Canvas相关的一些绘制方法,不知道大家发现没?我们都是根据左上角(0,0)点算出来新的坐标,然后再绘制,这样明显不符合我们平常基于坐标原点绘制的习惯,那么我们能不能直接在原点绘制图形,然后通过操作Canvas来实现移动到目标位置呢?答案是肯定的,这就需要用到Canvas变换方法了。Canvas变
Wesley13 Wesley13
4年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Easter79 Easter79
4年前
TurnipBit开发板DIY呼吸的吃豆人教程实例
  转载请以链接形式注明文章来源(MicroPythonQQ技术交流群:157816561,公众号:MicroPython玩家汇)  0x00前言  吃豆人是耳熟能详的可爱形象,如今我们的TurnipBit也集成了这可爱的图形,我们这就让他来呼吸了~。  0x01效果展示  先一起看下最终的成品演示视频:  http:/
Easter79 Easter79
4年前
TouchVG答疑
Q:TouchVG是否针对绘制效率做了优化?A:TouchVG针对绘制效率做的优化有:a、包络框检查:在视图外的图形不显示b、九宫格剪裁:对直线段、折线、多边形进行剪裁显示c、后台异步显示:regenAll重新生成所有图形时,在单独的CALayer和GCD线程中绘制,绘制完后再显示到视图,不阻塞主线程交互和显示。例如重绘10000条曲线在后台绘
Easter79 Easter79
4年前
SwiftUI 跨组件数据传递
作者:Cyandev,iOS和MacOS开发者,目前就职于字节跳动0x00前言众所周知,SwiftUI的开发模式与React、Flutter非常相似,即都是声明式UI,由数据驱动(产生)视图,视图也会与数据自动保持同步,框架层会帮你处理“绑定”的问题。在声明式UI中不存在命令式地让一个视图变成xxx
绣鸾 绣鸾
2年前
Animate 2024 for mac(an动画设计软件)
是一款由Adobe公司开发的强大动画制作软件,它能帮助用户轻松制作出各种精美的动画作品。Animate2024拥有强大而直观的设计工作流程,能够让用户自由地构建动画场景、绘制精美的图形,并轻松添加动态效果。无论是传统手绘风格还是骨骼动画,Animate20
元雄
元雄
Lv1
因为她才一米六,所以一旦吵架了,我就必须先低头。
文章
4
粉丝
0
获赞
0