（一一九）通过CALayer实现阴影、圆角、边框和3D变换

在每个View上都有一个CALayer作为父图层，View的内容作为子层显示，通过layer的contents属性决定了要显示的内容，通过修改过layer的一些属性可以实现一些华丽的效果。

【阴影和圆角】

下面以一个普通的蓝色View为例，介绍layer的功能：

_blueView.layer.shadowOpacity = 1.0; // 阴影不透明度

_blueView.layer.shadowColor = [UIColor redColor].CGColor; // 注意所有颜色都要转换为CGColor

_blueView.layer.shadowRadius = 20.0; // 阴影半径

_blueView.layer.shadowOffset = CGSizeMake(20, 20); //阴影偏移，以View中心为原点

_blueView.layer.cornerRadius = _blueView.frame.size.width * 0.5; // 圆角半径，当圆角半径为View尺寸一半时恰好得到圆形

_blueView.layer.borderColor = [UIColor whiteColor].CGColor; // 边框颜色

_blueView.layer.borderWidth = 5; // 边框尺寸

通过这段代码，我们设置了蓝色View的一系列属性，注意设置颜色时的转换。得到的效果如下图所示：

通过这一点我们可以看到layer的强大。

通过这样的方法，我们可以轻易的实现头像的圆角和外框，只要设置UIImageView的layer圆角、边框即可，需要注意的是，图片所在的层是其子层，因此应该设置父层的maskToBounds属性，保证子层裁剪到父层的尺寸。

_headerView.layer.cornerRadius = _headerView.frame.size.width * 0.5;

_headerView.layer.masksToBounds = YES; // 保证子层裁剪到父层尺寸

_headerView.layer.borderWidth = 5;

_headerView.layer.borderColor = [UIColor redColor].CGColor;

实现的效果如下图所示：

【3D变换】

直接修改View的transform，可以实现2D变换，而修改layer可以实现3D变换，3D变换的意义在于可以让图像以与屏幕平行的方向为轴旋转，或者斜着向屏幕内翻转，实现立体效果，要实现3D变换，只要传递3D向量坐标即可，先了解一下坐标系。

与二维类似，向右为x、向下为y，垂直屏幕向外为z。

旋转时，传递的是弧度制转角和旋转轴坐标。

平移时，传递的是三轴的位移量，如果没有相对屏幕翻转，z轴的位移是看不出来的。

缩放时，传递的是三轴的缩放量。

需要注意的是，这三个量通过make实现，则会相互覆盖，一定要保证前面完成后再传递下一个动作。

_blueView.layer.transform = CATransform3DMakeRotation(M_PI, 1, 1, 0);

_blueView.layer.transform = CATransform3DMakeTranslation(10, 10, 0);

_blueView.layer.transform = CATransform3DMakeScale(0.5, 0.5, 1.0);

除此之外，还可以通过KVC实现属性的操作，通过KVC还可以实现对不能直接访问的属性的操作，例如translation.x。

普通的设置：

[_blueView.layer setValue:[NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI, 1, 1, 0)] forKeyPath:@"transform"];

对不能直接访问属性的设置，不推荐。

[_blueView.layer setValue:@30 forKeyPath:@"transform.translation.x"];

通过3D变换可以做出各种酷炫的效果，例如下图相对屏幕旋转：

巴特西

（一一九）通过CALayer实现阴影、圆角、边框和3D变换

最新文章

热门文章