核心动画基础——2015-11-29

核心动画通常用来APP中的一些View和其它的可视化的元素。核心动画并不是View的替代者。相反的,layer和View组合在一起能够更好地展示和使内容更有生气。

layer是内容绘制和动画的基础

layer是一个展示在3D空间的2D面,并且是一切核心动画的核心。像View一样,layer能够处理层面的几何形状、内容、以及一些可视属性。但是,layer又可以定义他们自己的展示形态。layer不仅仅管理位图(bitmap)的状态信息,它自身可以是绘制的内容也可以是你所定义的图片。因此,应用当中的main layer可以认为是主要处理数据的模型对象,要特别注意这一点,因为这会影响到动画的性能。

基于图层的绘制模型

APP中的许多layer并不会绘制实质性的内容。相反,layer会捕捉到APP的内容,然后缓存到位图中,通常被称为backing store.你之后改变的layer的属性值,就会改变layer所在对象的状态。当一个改变触发动画的时候,核心动画会将layer的位图和状态信息传递给利用新的状态信息渲染位图的图形硬件。

11291.png

基于layer和传统的基于View的绘制技术的最明显的区别就是操纵的是静态的位图。基于View的绘制技术,对于View自身的改变会调用View的drawRect:方法来重新绘制内容。但是,这种方式会更耗CPU性能,因为这样会在主线程进行绘制内容。核心动画会在硬件层通过操纵位图来达到相同的效果。
尽管核心动画会对内容进行缓存,但是应用仍然需要提供原始的并且实时的更新显示内容。

基于layer的动画

layer对象的数据和状态信息是和屏幕上layer内容的展示是分离的。这就使得核心动画能够在旧值和新值之间插入动画转换。下面的图展示了layer可以实现的动画效果。

11292.png

在动画执行的过程当中,核心动画会在硬件层实时绘制内容,你所需要做的就是设置动画的开始和结束。你也可以自定义动画执行的曲线效果以及参数。

layer对象定义自己的几何形状

layer的功能之一就是管理显示内容的几何属性,其中就包括内容的bounds、在屏幕上显示位置position、以及是否旋转、缩放或者是以某种方式转换。layer也像View一样有自己的boundsposition属性,而你可以使用这些属性来控制内容在屏幕上的显示位置。layer也有一些View没有的属性,比如锚点anchor point(表示的是操纵点位置)。

layer有两种坐标系

layer有点坐标系和单位坐标系来规定内容的显示。究竟使用哪种坐标系则取决于所传递的信息的类型。点坐标系通常用在需要确定内容投射到屏幕坐标系位置或者是相对于其他的View的位置的时候,比如position属性。单位坐标系通常用来确定layer的哪一个点来对应屏幕坐标系位置,因为它是相对于其他值的一个数值。例如,layer的anchor point属性确定一个相对于layer自身的bounds属性的一个值,但并不是一个固定值。

layer的属性当中,用boundsposition属性来定义layer的位置和尺寸大小。bounds属性定义layer自身的坐标系系统,包括layer在屏幕上的大小。position属性定义了layer相对于父控件坐标系的位置。尽管layer也有frame属性,这个属性起源于boundsposition的值,用的比较少。

11293.png

需要指出的是,上图中的position属性位于layer的中央。这个属性会随着锚点anchorPoint的改变而改变,锚点表示的是坐标系起始的位置。
锚点是在单位坐标系中使用的属性,核心动画使用单位坐标系表示的属性,会随着layer尺寸的改变而改变。你可以认为单位坐标系表示的是总值的百分比,坐标值都是从0.0~1.0.

11294.png

锚点对几何操纵的影响

可以使用layer的anchorPoint属性来操纵layer几何形状,并且在操纵layer的positiontransform属性的时候作用较为明显。position属性是和锚点属性密切相关的,即使layer没有在父控件内发生移动,通过操纵锚点的位置,同样可以改变layer对象的position属性的值。

![Uploading 11295_604243.png . . .]

下面的图展示了锚点是如何影响layer的transform属性的。当你对一个layer实施旋转rotation的时候,会在锚点处出现旋转效果。锚点在layer中心位置的旋转动画是你最容易也最常见的效果,但是如果你改变了锚点的位置的话,那么效果就会有很大区别了。

11296.png

可以在三维空间操纵layer

layer都有两个transform矩阵可以操纵layer以及它的内容。CALayer的transform属性可以定义layer以及其子layer的transform属性效果。通常会使用这个属性来短暂改变layer的缩放比例或者是对layer进行旋转。sublayerTransform是一个只用在子layer上的一个属性。
因为核心动画可以是三维空间的,可以用CATransform3D类型动画效果来实现,可以通过一个4x4的矩阵来实现。

11297.png
11298.png

layer和View之间的关系

layer并不能完全替代APP的View——你不可能仅仅通过layer对象来创建可视界面。layer是View的基础,特别的,layer会更加有效的在原比例基础上绘制View的内容。但是,也有一些layer不会去做的事情,比如layer不会去处理事件、绘制内容、参与响应者链条以及一些其它的事情。因此,每一个APP必须有一个或者多个View来处理这些事件。
除了与View相关的layer之外,你也可以在APP中添加一些纯layer。也可以将独立的layer作为一个优化方法。例如,如果你想在多处使用同一个图片,你可以使用一些独立layer来加载图片并且添加到layer结构中。每一个layer指向源图片而不是在内存中创建一个图片的副本出来。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,457评论 6 30
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,091评论 5 13
  • 转载:http://www.jianshu.com/p/32fcadd12108 每个UIView有一个伙伴称为l...
    F麦子阅读 6,148评论 0 13
  • 每个UIView有一个伙伴称为layer,一个CALayer。UIView实际上并没有把自己画到屏幕上;它绘制本身...
    shenzhenboy阅读 3,081评论 0 17
  • 五一长假来了,其实随着小长假的大力推行,小时候的五一已经没有那种感觉了,以前每个学期可是都有7天长假的。 因为明天...
    Blue托阅读 465评论 0 50