iOS中有很多方法可以实现动画,我们可以用CAKeyframeAnimation, CABasicAnimation,CASpringAnimation(iOS9.0中添加的,实现弹簧的效果),也可以用UIView中为我们提供的动画接口,不管用哪种方法,目的就是实现动画效果,这里重点讲解CAKeyframeAnimation和CABasicAnimation。
在学习动画之前,我们需要了解一些知识,大家都知道动画是作用在图层上面的,我们首先要了解图层。
认识CALayer
大家平时使用最多的就是UIView,我们创建一个视图时,其实就是创建了一个与视图相关的图层,视图负责管理着创建的图层,通过图层来显示相应内容。我们可以直接创建一个图层,然后将它添加到父图层上,这样就能看到我们创建的图层(代码如下)
CALayer *layer = [CALayer layer];
layer.frame = CGRectMake(50, 200, 80, 80);
layer.backgroundColor = [UIColor greenColor].CGColor;
[self.view.layer addSublayer:layer];
效果图:
可能大家想知道 CALayer和UIView的区别在哪?也许最大的区别就是UIView可以和用户交互,CALayer不能交互。相信我们的目的并不是显示一个纯色的矩形块,其实CALayer也可以显示其他类型的内容。
CALayer属性
contents
查看头文件可以知道这个属性的类型为id,也就是说他可以显示任何类型的对象,但实践中,如果不是CGImage类型,将会显示空白,这点会让人产生疑惑,其实还有更奇怪的,你要赋给的类型不是CGImage,而是CGImageRef(指向CGImage结构的指针),UIImage有一个CGImage属性,返回CGImageRef,但是如果把这个值直接赋给contents的话会得到编译错误,因为CGImageRef是一个Core Foundation类型,我们需要用如下代码进行赋值:
layer.contents = (__bridge id)image.CGImage;
以上代码块的前提是使用ARC,不使用ARC的话,不需要__bridge
接下来我们来显示一张图片,代码如下:
// 图片是一个200x200的图,layer的frame故意设置成矩形,为了演示变形
UIImage *image = [UIImage imageNamed:@"image.png"];
CALayer *layer = [CALayer layer];
layer.frame = CGRectMake(50, 150, 80, 100);
layer.contents = (__bridge id)image.CGImage;
[self.view.layer addSublayer:layer];
效果图如下:
contentGravity
如上面代码所示,我们得到了一个变形了的图片,这当然不是我们想要的,如果想让图片正确显示,我们可以设置contentGravity,这个属性用法类似UIView中的contentMode属性,我们可以看一下它的枚举:
- kCAGravityCenter
- kCAGravityTop
- kCAGravityBottom
- kCAGravityLeft
- kCAGravityRight
- kCAGravityTopLeft
- kCAGravityTopRight
- kCAGravityBottomLeft
- kCAGravityBottomRight
- kCAGravityResize
- kCAGravityResizeAspect
- kCAGravityResizeAspectFill
是不是看着很熟悉啊!这对上面图片变形,我们可以设置这个属性值为kCAGravityResizeAspect,这样就能得到我们想要的正确的效果了
添加代码:
layer.contentsGravity = kCAGravityResizeAspect;
就能得到显示正确的图:
contentsScale
contentsScale属性定义了寄宿图的像素尺寸和视图大小的比例,默认情况下它是一个值为1.0的浮点数。
如果你设置了contentsGravity属性,contentsScale就不在寄宿图有影响,因为它已经被拉伸以适应图层的边界。
contentsScale属性其实属于支持高分辨率(又称Hi-DPI或Retina)屏幕机制的一部分,它用来判断在绘制图层的时候应该为寄宿图创建的空间大小,和需要显示的图片的拉伸度(假设并没有设置contentsGravity
属性),UIView有一个类似功能但是非常少用到的contentScaleFactor
属性。
maskToBounds
如果把contentsGravity设置成kCAGravityCenter,我们看到图片超出了视图边界
UIView有一个叫做clipsToBounds
的属性可以用来决定是否显示超出边界的内容,CALayer对应的属性叫做masksToBounds
,把它设置为YES,即可看到图片被剪切了,如下图:
custom drawing
给contents
赋CGImage的值不是唯一的设置寄宿图的方法。我们也可以直接用Core Graphics直接绘制寄宿图。能够通过继承UIView并实现-drawRect:
方法来自定义绘制。
如果你不需要寄宿图,那就不要创建这个方法了,这会造成CPU资源和内存的浪费,这也是为什么苹果建议:如果没有自定义绘制的任务就不要在子类中写一个空的-drawRect:方法。
当视图出现在屏幕上时,-drawRect:方法会被调用,通常是开发者自己调用-setNeedsDisplay方法
CALayer有一个可选的delegate
属性,实现了CALayerDelegate
协议,当CALayer需要一个内容特定的信息时,就会从协议中请求。
当需要被重绘时,CALayer会请求它的代理给它一个寄宿图来显示。它通过调用下面这个方法做到的:
- (void)displayLayer:(CALayer *)layer
如果代理想直接设置contents
属性的话,它就可以在这个方法中做,不然没有别的方法可以调用了
如果代理不实现-displayLayer:
方法,CALayer就会转而尝试调用下面这个方法:
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
在调用这个方法之前,CALayer创建了一个合适尺寸的空寄宿图(尺寸由bounds
和contentsScale
决定)和一个Core Graphics的绘制上下文环境,为绘制寄宿图做准备,它作为ctx参数传入。
如下例子:
代码:
- (void)viewDidLoad {
[super viewDidLoad];
CALayer *blueLayer = [CALayer layer];
blueLayer.frame = CGRectMake(50.0f, 50.0f, 100.0f, 100.0f);
blueLayer.backgroundColor = [UIColor blueColor].CGColor;
blueLayer.delegate = self;
blueLayer.contentsScale = [UIScreen mainScreen].scale; //add layer to our view
[self.view.layer addSublayer:blueLayer];
[blueLayer display];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {
CGContextSetLineWidth(ctx, 5);
CGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor);
CGContextStrokeEllipseInRect(ctx, layer.bounds);
}
效果图: