实现动画方式深度解析(十三) —— Core Animation之图层样式属性动画(十)

版本记录

版本号 时间
V1.0 2017.09.23

前言

app中好的炫的动画可以让用户耳目一新,为产品增色不少,关于动画的实现我们可以用基本动画、关键帧动画、序列帧动画以及基于CoreGraphic的动画等等,接下来这几篇我就介绍下我可以想到的几种动画绘制方法。具体Demo示例已开源到Github —— 刀客传奇,感兴趣的可以看我写的另外几篇。
1. 实现动画方式深度解析(一) —— 播放GIF动画(一)
2. 实现动画方式深度解析(二) —— 播放GIF动画之框架FLAnimatedImage的使用(二)
3. 实现动画方式深度解析(三) —— 播放序列帧动画(一)
4. 实现动画方式深度解析(四) —— QuartzCore框架(一)
5. 实现动画方式深度解析(五) —— QuartzCore框架之CoreAnimation(二)
6. 实现动画方式深度解析(六) —— Core Animation Basics(三)
7. 实现动画方式深度解析(七) —— Core Animation之Setting Up Layer Objects(四)
8. 实现动画方式深度解析(八) —— Core Animation之动画层内容 (五)
9. 实现动画方式深度解析(九) —— Core Animation之构建图层层级 (六)
10. 实现动画方式深度解析(十) —— Core Animation之高级动画技巧 (七)
11. 实现动画方式深度解析(十一) —— Core Animation之更改图层的默认行为(八)
12. 实现动画方式深度解析(十二) —— Core Animation之提高动画的性能(九)

Layer Style Property Animations - 图层样式属性动画

在渲染过程中,Core Animation会采用不同的图层属性,并以特定的顺序渲染它们。 此顺序决定层的最终外观。 本章说明了通过设置不同图层样式属性实现的渲染结果。

注意:Mac OS X和iOS上可用的图层样式属性有所不同,并在本章中提到。


Geometry Properties - 几何属性

图层的几何属性指定相对于其父层如何显示。 几何还指定了用于图层圆角的半径以及应用于图层及其子图层的变换。 下图示出了示例层的边界矩形。

Layer geometry

以下CALayer属性指定图层的几何图形:

注意:cornerRadius属性是在iOS 3.0 以后加的。


Background Properties - 背景属性

Core Animation渲染的第一件事就是层的背景。 您可以为背景指定颜色。 在OS X中,您还可以指定要应用于背景内容的Core Image过滤器。 下图显示了样品层的两个版本。 左侧的图层具有backgroundColor属性,而右侧的图层没有背景颜色,但是有一些内容和一个夹点失真滤镜分配给其backgroundFilters属性。

Layer with background color

背景过滤器应用于层后面的内容,主要由父层的内容组成。 您可以使用背景过滤器来使前景层内容脱颖而出; 例如,通过应用模糊滤波器。

以下CALayer属性会影响图层背景的显示:

平台注意:在iOS中,backgroundFilters属性在CALayer类中公开,但您分配给此属性的过滤器将被忽略。


Layer Content - 层的内容

如果图层有任何内容,则该内容将在背景颜色之上呈现。 您可以通过直接设置位图,使用委托来指定内容,或通过对图层进行子类化和直接绘制内容来提供图层内容。 您可以使用许多不同的绘图技术(包括Quartz,Metal,OpenGL和Quartz Composer)来提供该内容。 下图显示了一个示例层,其内容是直接设置的位图。 位图内容由右下角的Automator图标的大部分透明空间组成。

Layer displaying a bitmap image

具有角半径的图层不会自动剪切其内容; 然而,将图层的masksToBounds属性设置为YES会导致图层剪切到其圆角半径。

以下CALayer属性会影响图层内容的显示:


Sublayers Content - 子图层的内容

任何图层可能包含一个或多个子图层,称为子图层。 子层相对于父层的边界矩形递归呈现并定位。 此外,Core Animation将父层的子层转换应用于相对于父层的锚点的每个子层。 您可以使用子层变换将透视图和其他效果均匀地应用于所有图层。 下图展示出了具有两个子层的样品层。 左侧的版本包括背景颜色,而右侧的版本不包含。

Layer displaying the sublayers content

将图层的masksToBounds属性设置为YES会将任何子图层剪切到图层的边界。

以下CALayer属性会影响图层子图层的显示:


Border Attributes - 边界特性

图层可以使用指定的颜色和宽度显示可选边框。 边框跟随层的边界矩形,并考虑到任何角半径值。 图A-5显示了应用边框后的样品层。 请注意,层之外的内容和子层被渲染在边框的下方。

Layer displaying the border attributes content

以下CALayer属性会影响图层边框的显示:

平台注意:borderColorborderWidth属性仅在iOS 3.0及更高版本中受支持。


Filters Property - 过滤器属性

在OS X中,您可以对图层的内容应用一个或多个过滤器,并使用自定义合成过滤器来指定图层的内容如何与其底层的内容混合。 图A-6显示了应用了Core Image后缀滤镜的样品层。

Layer displaying the filters properties

以下CALayer属性指定图层内容过滤器:

平台注意:在iOS中,图层会忽略您分配给它们的任何过滤器。


Shadow Properties - 阴影属性

图层可以显示阴影效果并配置其形状,不透明度,颜色,偏移和模糊半径。 如果您没有指定自定义阴影形状,则阴影基于图层中不完全透明的部分。 下图显示了使用红色阴影的相同样品层的几种不同版本。 左和中间版本包括背景颜色,因此阴影仅在图层的边框周围显示。 但是,右侧的版本不包含背景颜色。 在这种情况下,阴影将应用于图层的内容,边框和子图层。

Layer displaying the shadow properties

以下CALayer属性会影响图层阴影的显示:

平台注意:iOS 3.2及更高版本中支持shadowColor,shadowOffset,shadowOpacity和shadowRadius属性。 iOS 3.2及更高版本以及OS X v10.7及更高版本支持shadowPath属性。


Opacity Property - 不透明属性

图层的不透明度属性决定了通过图层显示多少背景内容。 下图显示了其不透明度设置为0.5的样品层。 这允许背景图像的部分显示通过。

Layer including the opacity property

以下CALayer属性指定图层的不透明度:


Mask Properties - 遮罩属性

您可以使用掩码来遮盖图层内容的全部或部分内容。 掩码本身是一个层对象,其alpha通道用于确定被阻止的内容和传输的内容。 掩模层的内容的不透明部分允许下面的层内容显示通过,而透明部分部分或完全遮蔽底层内容。 下图示出了与掩模层和两个不同背景合成的样品层。 在左侧版本中,图层的不透明度设置为1.0。 在右侧的版本中,图层的不透明度设置为0.5,这增加了通过图层的蒙版部分传输的背景内容的数量。

Layer composited with the mask property

以下CALayer属性指定图层的掩码:

平台注意:iOS 3.0及更高版本支持mask属性。

后记

未完,待续~~~

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

推荐阅读更多精彩内容