CoreAnimation 视觉效果

CoreAnimation 视觉效果

CoreAnimation 目录

博客园MakeDown支持不佳,如有需要请进GitHub

iPhone手机的视觉效果是十分优秀的,因此作为iOS工程师一定要对其视觉效果的处理有一定的了解.本编博客主要内容如下.

圆角

图层边框

阴影

图层蒙板

首先我们先在主视图上添加两个普通的视图,稍后对其进行相应的视觉效果处理.



[align=center] 图片一[/align]

圆角

圆角是iOS的独特之处,其让我们感觉我们所看到的一切并不是那么的生硬.我将让绿色视图产生一个合适的圆角.



[align=center] 图片二[/align]
绿色视图的圆角让我们觉得很舒服,而且实现起来也十分简单,只需要下面的一行代码.

self.customView.layer.cornerRadius = 20;

绿色视图达到了我们想要的效果,但是上面的小视图遮住了绿色视图的圆角,于此同时我们也不希望将小时图

remove

因此我们可能需要

masksToBounds

,我们将其设置为

YES

就可已得到以下的效果.



[align=center] 图片三[/align]
这样看起来很舒服,与此同时小视图的效果我们也保存了下来.

图层边框

在某些场景我们可能会用到类似于相框一样效果的边框,那样可以让视图看起来更加丰满一些,就像下图一样.



[align=center] 图片四[/align]
图片四与图片三相比,更可以突出边框所包括的视图内容,想要达到此效果很简单.

// 边框颜色
self.customView.layer.borderColor = [UIColor blueColor].CGColor;
// 边框宽度
self.customView.layer.borderWidth = 2;

阴影

以上两个视图效果属性是很常用也是很简单的,接下来便是一个很常用但是稍有复杂的属性-阴影.先看一下简单的效果(为了便于观察,我将此图片放大一点.).



[align=center] 图片五[/align]
可以发现绿色视图的四边有着蓝色的阴影,看起来绿色视图很是显眼,阴影的效果也正是如此,让有阴影存在的视图更加凸显.实现图片五的效果我们需要添加以下代码.

[self.topView removeFromSuperview];// 删除小视图 避免影响阴影的展示
self.customView.layer.shadowOpacity = 1;// (0.0:不可见 ~ 1.0:完全不透明)
self.customView.layer.shadowColor = [UIColor blueColor].CGColor;
self.customView.layer.shadowOffset = CGSizeZero;
self.customView.layer.shadowRadius = 5;// 模糊度(半径) 度数值越大越模糊

shadowOpacity:该属性是控制阴影的可见度的,正如备注,如果设置为0阴影将不会展示.

shadowColor:该属性是设置阴影的颜色.

shadowOffset:该属性是设置阴影的偏移量,是CGSize类型.例如(0,2)水平不偏移,垂直向下偏移2.

shadowRadius:该属性字面理解为阴影的半径,实际效果是设置的值越大,模糊区域越宽,模糊的效果也就越明显.

以上是阴影的正常效果,但是当我设置

masksToBounds

为

YES

的时候阴影将会消失.因为

masksToBounds

的效果就是将图层意外的效果剪裁掉.



[align=center] 图片六[/align]
可是实际状况下我们完全是存在阴影效果与

masksToBounds

同时使用的,那么我们就需要做一些其他的操作.

1) 首先我们对主图层进行阴影,圆角属性的设置.

self.customView.layer.shadowOpacity = 1;// (0.0:不可见 ~ 1.0:完全不透明)
self.customView.layer.shadowColor = [UIColor blueColor].CGColor;
self.customView.layer.shadowOffset = CGSizeMake(0, 10);
self.customView.layer.shadowRadius = 5;// 模糊度(半径) 度数值越大越模糊

2) 构建一个新的图层,此图层设置圆角以及设置

masksToBounds

.

UIView * tempLayerTwo = [[UIView alloc]init];
tempLayerTwo.frame = self.customView.bounds;
tempLayerTwo.backgroundColor = [UIColor greenColor];
tempLayerTwo.layer.cornerRadius = 20;
tempLayerTwo.layer.masksToBounds = YES;

3) 将新构建的图层

add

到主图层上,运行查看效果.

[self.customView addSubview:tempLayerTwo];

[align=center] 图片七[/align]
到此为止阴影的基本操作以及使用技巧已经介绍的大部分了,接着有一个较为实用的属性是:

shadowPath

.其可以根据

path

绘制出相应的阴影.

CGMutablePathRef squarePath = CGPathCreateMutable();
CGPathAddRect(squarePath, NULL, self.customView.bounds);
self.customView.layer.shadowPath = squarePath;
CGPathRelease(squarePath);

[align=center] 图片八[/align]

图层蒙板

图层蒙板听起来有一点点陌生,但是理解起来还是十分容易的,举个栗子.我现在有两个图层一个图层是五角星的形状但是颜色是紫色的,我们伟大祖国的五角星是黄色的,凑巧的是我的另一个图层是黄色的,那么这个时候我就可以利用黄色图层的

mask

属性来简单的构造一个黄色的五角星.这里做了一个不知道是什么形状的图片.



[align=center] 图片九[/align]
我通过添加下面的代码就可以将其颜色改变为绿色.

CALayer * makeLayer = [[CALayer alloc]init];
makeLayer.frame = self.customView.bounds;
UIImage * makeImage = [UIImage imageNamed:@"black"];
makeLayer.contents = (__bridge id)makeImage.CGImage;

self.customView.layer.mask = makeLayer;

[align=center] 图片十[/align]