前言

 

在渲染过程中,核心动画获取Layer的各种属性并以特定的顺序渲染他们。这个顺序决定了Layer的最终的样貌。本节将会阐述通过设置不同的Layer样貌相关属性对应产生的渲染结果。

注意:Mac OSX与iOS平台中,Layer样貌相关属性是不同的,通过本节将会知道他们的区别。(鄙人暂不翻译Mac OSX的内容,除非牵涉到iOS。)

 

几何属性

 

一个Layer的几何属性指定了它相对于它的父视图如何展示(摆放)。集合属性指定了用于是Layer边角变圆的圆角属性,并制定了应用于Layer本身和他的sublayers的transform属性。图A-1展示了示例Layer的bounds矩形。

 

图A-1Layer的几何形状

 

下面的CALayer属性指定一个Layer的相关几何形状。

 

背景属性

 

核心动画首先渲染的就是Layer的background(背景)。我们可以为背景指定一个颜色。在OSX中,我们也能指定一个我们想要应用到背景content的Core Image filter,图A-2展示了这两种样式的Layer。左边的是设置了backgroundColor属性;右边的没有设置backgroundColor属性,但是设置了border(边框)和backgroundFilters属性。
 
图A-2带背景的Layer

 

Background filter是被应用到Layer后面的content,这content主要是有父Layer的content组成。我们一般使用background filter让处在前面的Layer的content更突出;例如通过应用毛玻璃filter。
以下CALayer属性影响Layer的背景的显示:

平台提醒:在iOS中,CALayer虽然讲backgroundFilters属性暴露出来了,但是我们讲filters关联到该属性是无效的。

 

背景属性

 

如果Layer有content,content就会渲染在background color的上层。我们可以通过3中方式为Layer设置content——直接设置bitmap、使用代理或者继承Layer并绘制content,并且我们可以使用多种绘制技术(Quartz,Metal,OpenGL,Quartz 合成器)提供content。图A-3展示了示例Layer,该Layer的content是被直接设置为bitmap,这个bitmap由大量的透明部分和右下角的icon。
 
图A-3显示bitmap image的Layer

 

设置圆角的Layer不会自动裁剪他们的contents;但是,将Layer的masksToBounds属性设置为YES,就会引起Layer裁剪圆角。
下面的CALayer属性影响Layer的content的显示:

 

Sublayers的content

 

每个Layer都可能包含一个或者多个子Layers,这些子Layers被称为sublayers。相对于父Layerde bounds矩形,sublayers是递归渲染和放置的。另外,核心动画以父Layer的锚点将父Layer的subLayerTransform应用于每个sublayer。我们可以为sublayer transform设置视角观点或者其他效应。图A-4展示了一个示例,左边的有背景色,右边的没有背景色。

 
图A-4显示subLayers的content内容的Layer

 

将Layer的masksToBounds属性设置为YES,将会导致所有的sublayer按照该Layer的bounds裁剪。
下面的CALayer属性影响sublayers的显示:

 

Border属性

 

一个Layer可以显示特定颜色和宽度的边框,边框是沿着Layer的bounds矩形并且可以设置圆角值。图A-5展示了带有边框的Layer。注意,content和subLayers都是在Layer的边框下面渲染的。

 
图A-5显示具有边框属性的Layer

 

下面的CALayer的属性影响Layer边框的展示:

 

Shoadow属性

 

Layers能够显示阴影效果,shadow的配置项包括:形状、opacity、color、模糊程度。如果我们没有指定自定义的shadow形状,这个shadow取决于不完全透明的Layer的一部分。图A-7展示了几个不同版本且具有相同红色shadow样式的Layer。左边和中间的设置了背景色,因此阴影仅仅在Layer的边框外围显示。右边的不包含背景色,此时,shadow是被应用到Layer的content、border和subLayers。

 
图A-7显示具有shadow属性的Layer

 
下面的CALayer属性能够影响Layer的阴影的显示:

 

Opacity属性

 

这个Layer的opacity属性决定了后面的content穿过Layer显示多少。图A-8展示了opacity被设置为0.5的Layer。这属性是允许后面图片显示一部分。

 
图A-8显示具有shadow属性的Layer

 

下面CALayer属性指定Layer的opacity:

 

Mask属性

 

我们可以使用mask遮罩所有或者部分Layer的contents。Mask本身就是一个Layer,他的透明通道是被用于决定哪些部分将被遮盖以及哪些部分会被显示。Mask layer的content的不透明部分将会使下面的Layer的content显示出来,全透明的部分或者半透明的部分将会模糊化下面的content。图A-9展示了一个具有mask layer和两个不同背景的Layer。左边layer的opacity是被设置为1.0。右边,layer的opacity是被设置为0.5,这将增加后面content透过mask layer显示出的量。

 
图A-9显示设置mask属性的Layer

 

下面的CALayer属性为Layer指定mask:

Core Animation 文档翻译—附录A(Layer样貌相关属性动画)的更多相关文章

  1. Core Animation 文档翻译—附录B(可动画的属性)

    前言   许多CALayer和CIFliter的属性都是可动画的.本节附录列出了这些属性默认使用的动画.   CALayer可动画属性   表B-1展示了CALayer类的可动画属性.针对每个属性此表 ...

  2. Core Animation 文档翻译—附录C(KVC扩展)

    前言   关于CAAnimation和CALayer类,核心动画扩展了NSKeyValueCoding协议.这个扩展为一些keys添加了默认值,扩大了封装协议,添加了为CGpoint.CGRect.C ...

  3. Core Animation 文档翻译 (第一篇)

    Core Animation 文档翻译(第一篇)   2018-01-13  星期6 前言:作为iOS 开发,官方文档的阅读是很有必要的,值此周末便写下此文.作为iOS 实际经验3年的开发,之前的应用 ...

  4. Core Animation文档翻译 (第一篇)

    Core Animation 文档翻译(第一篇) 前言 作为iOS 开发,官方文档的阅读是很有必要的,值此周末便写下此文.作为iOS 实际经验3年的开发,之前有阅读并实践过经典的<iOS核心动画 ...

  5. Core Animation 文档翻译 (第二篇)

    Core Animation 文档翻译 (第二篇) 核心动画基础要素 核心动画为我们APP内Views动画和其他可视化元素动画提供了综合性的实现体系.核心动画不是我们APP内Views的替代品,相反, ...

  6. Core Animation 文档翻译 (第四篇)

    Core Animation 文档翻译(第四篇) 让Layer的content动画起来 核心动画的基础接口以及为拥有Layer的View做的动画扩展接口,使得为Layer制作复杂动画变得简单化.例如改 ...

  7. Core Animation 文档翻译 (第七篇)——改变Layer的默认动画

    前言 核心动画使用action对象实现它的可视化动画.一个action对象是指遵循CAAction协议并定义了Layer相关的动画行为的对象.所有的CAAnimation对象实现了这个协议,无论何时L ...

  8. Core Animation 文档翻译 (第六篇)

      高级动画技巧 配置属性动画或者关键帧动画的方式是多种多样的.需要同时执行多个动画或者顺序执行多个动画的APP,可以通过高级的方式同步这些动画的timing或者将这些动画绑定在一起.我们也可以使用其 ...

  9. Core Animation 文档翻译 (第八篇)—提高动画的性能

    前言 核心动画是提高基于APP动画帧率的好方式,但是核心动画的使用不代表性能的提升的保证.尤其在OSX,当使用核心动画时,我们仍需选择最有效的方式.和所有的性能相关的问题一样,我们应该使用工具时时的评 ...

随机推荐

  1. PHP写文件到指定位置

    <?php $fp = fopen("output.json", "r+"); $flag = fseek($fp, -3, SEEK_END); if( ...

  2. MVC5发展历程,从MVC2谈起

    目前,MVC已经发布了5个版本,不包括一些临时的版本,为了更好的了解MVC5,知道MVC的发展历程是非常重要的.本篇随笔主要讲解3个版本的内容及其新特性. 1.MVC 2,发布日期:2010年3月 部 ...

  3. div动态加载页面

    div动态加载页面 /* /// method 1 var url="<%=basePath%>/qne.do?p=pessegerCountSet"; $.post( ...

  4. 学习《人工智能一种现代的方法(第3版)》中文PDF+英文PDF

    学习人工智能概论时,推荐看看<人工智能:一种现代的方法(第3版)>,最权威.最经典的人工智能教材,已被全世界100多个国家的1200多所大学用作教材. 全面性以及结构的安排还是不错的,值得 ...

  5. 记一次 Apache HUE 优化之因使用 Python 魔术方法而遇到的坑

    最近的工作是基于 Apache HUE 做二次开发.刚接手 HUE 的代码的时候,内心是崩溃的:开源的代码,风格很多种, 代码比较杂乱; 虽是基于 Django 开发的,但是项目的结构改变很大; 很多 ...

  6. Android自己定义动态布局 — 多图片上传

    Android自己定义动态布局 - 多图片上传 本文介绍Android中动态布局加入图片,多图片上传. 项目中效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5 ...

  7. BZOJ 2037 区间DP

    跟POJ 3042是一个类型的http://blog.csdn.net/qq_31785871/article/details/52954924 思路: 先排个序 (把初始位置也插进去) f[i][j ...

  8. javafx ComboBox Event and change cell color

    public class EffectTest extends Application { public static void main(String[] args) { launch(args); ...

  9. 分享js寄生组合模式继承

    function person(){ this.name = 'taobao'; this.showMess = function(){ return this.name; } } person.pr ...

  10. Flex 转载