iOS开发CoreAnimation解读之一——初识CoreAnimation核心动画编程

iOS开发CoreAnimation解读之一——初识CoreAnimation核心动画编程

一、引言

        众所周知,绚丽动画效果是iOS系统的一大特点,通过UIView层封装的动画,基本已经可以满足我们应用开发的所有需求,但若需要更加自由的控制动画的展示,我们就需要使用CoreAnimation框架中的一些类与方法。这里先附上前几篇与动画相关的博客地址,这一系列,我们抽出其中的CoreAnimation框架来详细解读。

UIViewAnimation动画的使用:http://my.oschina.net/u/2340880/blog/484457 

UIView动画执行的另一种方式:http://my.oschina.net/u/2340880/blog/484538

UIView转场动画:http://my.oschina.net/u/2340880/blog/484669

CoreAnimation隐式动画的应用:http://my.oschina.net/u/2340880/blog/484793

粒子效果的使用:http://my.oschina.net/u/2340880/blog/485095

二、初识CoreAnimation

        CoreAnimation框架是基于OpenGL与CoreGraphics图像处理框架的一个跨平台的动画框架。简单来说,它使帮助我们将图像读取成位图,通过硬件的处理,实现动画效果。文档中的一张图片十分形象的描述了CoreAnimation与UIKit框架的关系:

在CoreAnimation中,大部分的动画效果都是通过Layer层来实现的,通过CALayer,我们可以组织复杂的层级结构。

        在CoreAnimation中,大多数的动画效果是添加在图层属性的变化上,例如,改变图层的位置,大小,颜色,圆角半径等。Layer层并不决定视图的展现,它只是存储了视图的几何属性状态。

三、锚点对几何属性的影响

        关于Layer层,我们需要了解一个有关锚点的概念,锚点决定了图层的绘制位置以及动画展示时其参照的点,锚点的取值范围为0-1,锚点有两个地方在应用中会有很大影响:

1.layer层的position参照点始终和锚点重合

通过position决定了layer所在的位置,在Layer中,虽然也有frame这样的属性,但我们很少使用,一般我们会使用bounds和position确定Layer层的大小和位置。

2.锚点决定进行动作的参照点

例如一个旋转动作,锚点决定了层旋转的中心点,对于放大缩小的动作,锚点决定了放大或者缩小参照的中心点。

可以来看下边一组图:

上面两个矩形,frame和bounds都是一样的,第一个矩形的锚点位置为(0.5,0.5),第二个为(0,0),

因此,两个矩形的position点是不同的,第一个是(100,100),第二个是(40,60)。再看当产生动作时锚点的影响:

现在就很好理解了,锚点的不同直接影响了动作产生的参照点。

通过CALayer的如下属性,我们可以设置锚点,注意x,y的取值范围都是0~1,代表所占宽度和高度的比例:

@property CGPoint anchorPoint;

四、Layer与View之间的关系

        Layer是专门用于辅助我们绘制图像的层,它使支持三维坐标系的绘制的,通过每个坐标点与转换矩阵的运算,来决定最后绘制的状态,并且,Layer可以更高帧率的绘制动画效果。然而Layer与View依然有很大不同,首先,我们不可能只通过Layer来开发应用程序,Layer并没有接收事件和处理用户交互的能力,这些依然需要View来完成,每一个View中,都有一个Layer的属性来辅助进行图形的绘制。并且Layer是可以层级嵌套的,开发中,我们可以根据需求灵活选择。

专注技术,热爱生活,交流技术,也做朋友。 ——珲少 QQ群:203317592

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GIS讲堂

地图切片详解

地图切片很多做GIS的筒子都不陌生,但是其中的原理一直是马马虎虎,在此,就地图切片中的几个重要的概念做一个介绍,一则自己做个总结,二则希望能够帮助到有此困惑的战...

86520
来自专栏数据小魔方

图表中包含负值的双色填充技巧

今天教大家怎么在Excel里制作带负值的双色填充图表 正负值双色填充 ▼ 通常如果数据中带负值 默认的图表输出虽然能够显示负值 但是负值颜色与正值并没有任何区别...

28860
来自专栏钱塘大数据

【干货】如何提升Excel表格的颜值?

下载了几个歪果仁做的Excel表格,非常的漂亮: ? ? 再看看我们最常见的表格,难看的瞬间爆表 ? 兰色对歪果仁的表格好看的原因进行了归纳,下面我们按歪果仁...

43890
来自专栏成长道路

html 边框变粗 margin -1px

最近刚开始学习web前端,html和css,对于遇到的边框变粗的问题,用margin为负值解决问题发表一些自己的理解 首先我们来看看下面一张图片 ? lis...

33200
来自专栏Coco的专栏

妙用 scale 与 transfrom-origin,精准控制动画方向

17640
来自专栏带你撸出一手好代码

px转vw和vh的工具(对前端同学有用)

CSS3中有两个新尺寸单位vw和vh, 这两个单位非常适合于开发移动端自适应页面。 假如说有一个设计师做了一张1136x750px的页面,这长页面是针对iPho...

66780
来自专栏微信小程序开发

CSS实现多列复杂界面布局

最近做一个云客服项目,可以把多个微信号消息集中到一个客服平台中,方便统一管理,这里就不详细说客服平台的功能。 做为码农,工作职责就是把功能实现了,在此,我简单说...

836130
来自专栏数据小魔方

创意饼图的制作技巧——图标填充饼图!

今天给大家介绍一种创意饼图的制作技巧——图标填充饼图! 创意饼图 ▽ 觉得默认的饼图不够炫酷、不够养眼,木有逼格 没关系,今天就交给大家一种创意饼图的制作技...

401100
来自专栏Coco的专栏

【CSS3进阶】酷炫的3D旋转透视

28240
来自专栏黑白安全

web前端技术课程内容详解之语义化标签的理解

在学习HTML阶段的最后,我们会涉及到学习语义化标签,明明用div等标签就可以构成页面,那么为什么还会有语义化标签的存在?语义化标签到底是什么?学好语义化标签又...

10220

扫码关注云+社区

领取腾讯云代金券