diff --git "a/4-\350\247\206\350\247\211\346\225\210\346\236\234/4-\350\247\206\350\247\211\346\225\210\346\236\234.md" "b/4-\350\247\206\350\247\211\346\225\210\346\236\234/4-\350\247\206\350\247\211\346\225\210\346\236\234.md" index f4145f2..e5c4cd9 100644 --- "a/4-\350\247\206\350\247\211\346\225\210\346\236\234/4-\350\247\206\350\247\211\346\225\210\346\236\234.md" +++ "b/4-\350\247\206\350\247\211\346\225\210\346\236\234/4-\350\247\206\350\247\211\346\225\210\346\236\234.md" @@ -65,4 +65,40 @@ CALayer另外两个非常有用属性就是`borderWidth`和`borderColor`。二 ##阴影 -iOS的另一个常见特性呢,就是阴影。阴影往往可以达到图层深度暗示的效果。也能够用来强调正在显示的图层和优先级(比如说一个在其他视图之前的弹出框),不过有时候他们也是单纯的装饰目的而已(让空间有更) \ No newline at end of file +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`属性裁剪掉了阴影和内容 + +从技术角度来说,这个结果是可以是可以理解的,但确实又不是我们想要的效果。如果你 \ No newline at end of file diff --git "a/4-\350\247\206\350\247\211\346\225\210\346\236\234/4.5.png" "b/4-\350\247\206\350\247\211\346\225\210\346\236\234/4.5.png" new file mode 100644 index 0000000..6412b7d Binary files /dev/null and "b/4-\350\247\206\350\247\211\346\225\210\346\236\234/4.5.png" differ diff --git "a/4-\350\247\206\350\247\211\346\225\210\346\236\234/4.6.png" "b/4-\350\247\206\350\247\211\346\225\210\346\236\234/4.6.png" new file mode 100644 index 0000000..7bf0e89 Binary files /dev/null and "b/4-\350\247\206\350\247\211\346\225\210\346\236\234/4.6.png" differ diff --git "a/4-\350\247\206\350\247\211\346\225\210\346\236\234/4.7.png" "b/4-\350\247\206\350\247\211\346\225\210\346\236\234/4.7.png" new file mode 100644 index 0000000..ed6ffa2 Binary files /dev/null and "b/4-\350\247\206\350\247\211\346\225\210\346\236\234/4.7.png" differ diff --git "a/4-\350\247\206\350\247\211\346\225\210\346\236\234/4.8.png" "b/4-\350\247\206\350\247\211\346\225\210\346\236\234/4.8.png" new file mode 100644 index 0000000..abf27c8 Binary files /dev/null and "b/4-\350\247\206\350\247\211\346\225\210\346\236\234/4.8.png" differ