Skip to content

Commit

Permalink
第四章为什么这么长!
Browse files Browse the repository at this point in the history
  • Loading branch information
evenluo committed Mar 11, 2014
1 parent fb2e732 commit 36c1e27
Show file tree
Hide file tree
Showing 5 changed files with 37 additions and 1 deletion.
38 changes: 37 additions & 1 deletion 4-视觉效果/4-视觉效果.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,4 +65,40 @@ CALayer另外两个非常有用属性就是`borderWidth`和`borderColor`。二

##阴影

iOS的另一个常见特性呢,就是阴影。阴影往往可以达到图层深度暗示的效果。也能够用来强调正在显示的图层和优先级(比如说一个在其他视图之前的弹出框),不过有时候他们也是单纯的装饰目的而已(让空间有更)
iOS的另一个常见特性呢,就是阴影。阴影往往可以达到图层深度暗示的效果。也能够用来强调正在显示的图层和优先级(比如说一个在其他视图之前的弹出框),不过有时候他们只是单纯的装饰目的。

`shadowOpacity`属性一个大于默认值(也就是0)的值,阴影就可以显示在任意图层之下。`shadowOpacity`是一个必须在0.0(不可见)和1.0(完全不透明)之间的浮点数。如果设置为1.0,将会显示一个有轻微模糊的黑色阴影稍微在图层之上。若要改动阴影的表现,你可以使用CALayer的另外三个属性:`shadowColor``shadowOffset``shadowRadius`

显而易见,`shadowColor`属性控制着阴影的颜色,和`borderColor``backgroundColor`一样,它的类型也是`CGColorRef`。阴影默认是黑色,大多数时候你需要的阴影也是黑色的(其他颜色的阴影看起来是不是有一点点奇怪。。)。

`shadowOffset`属性控制着阴影的方向和距离。它是一个`CGSize`的值,宽度控制这阴影横向的位移,高度控制着纵向的位移。`shadowOffset`的默认值是 {0, -3},意即阴影相对于Y轴有3个点的向上位移。

为什么要默认向上的阴影呢?尽管Core Animation是从图层套装演变而来(可以认为是为iOS创建的私有动画框架),但是呢,它却是在Mac OS上面世的,前面有提到,二者的Y轴是颠倒的。这就导致了默认的3个点位移的阴影是向上的。在Mac上,`shadowOffset`的默认值是阴影向下的,这样你就能理解为什么iOS上的阴影方向是向上的了(如图4.5).

![图4.5](./4.5.png)

图4.5 在iOS(左)和Mac OS(右)上`shadowOffset`的表现。

苹果更倾向于用户界面的阴影应该是垂直向下的,所以在iOS把阴影宽度设为0,然后高度设为一个正值不失为一个做法。

`shadowRadius`属性控制着阴影的*模糊度*,当它的值是0的时候,阴影就和视图一样有一个非常确定的边界线。当值越来越大的时候,边界线看上去就会越来越模糊和自然。苹果自家的应用设计更偏向于自然的阴影,所以一个非零值再合适不过了。

通常来讲,如果你想让视图或控件非常醒目独立于背景之外(比如弹出框遮罩层),你就应该给`shadowRadius`设置一个稍大的值。阴影越模糊,图层的深度看上去就会更明显(如图4.6).

![图4.6](./4.6.png)

图4.6 大一些的阴影位移和角半径会增加图层的深度即视感

##阴影裁剪

和图层边框不同,图层的阴影继承自内容的外形,而不是根据边界和角半径来确定。为了计算出阴影的形状,Core Animation会将寄宿图(包括子视图,如果有的话)考虑在内,然后通过这些来完美搭配图层形状从而创建一个阴影(见图4.7)。

![图4.7](./4.7.png)

图4.7 阴影是根据寄宿图的轮廓来确定的

当阴影和裁剪扯上关系的时候就有一个头疼的限制:阴影通常就是在Layer的边界之外,如果你开启了`masksToBounds`属性,所有从图层中突出来的内容都会被才剪掉。如果我们在我们之前的边框示例项目中增加图层的阴影属性时,你就会发现问题所在(见图4.8).

图4.8 `maskToBounds`属性裁剪掉了阴影和内容

从技术角度来说,这个结果是可以是可以理解的,但确实又不是我们想要的效果。如果你
Expand Down
Binary file added 4-视觉效果/4.5.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 4-视觉效果/4.6.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 4-视觉效果/4.7.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 4-视觉效果/4.8.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 36c1e27

Please sign in to comment.