iOS动画学习-CALayer

时间:2023-12-30 17:12:26

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];

效果图:

iOS动画学习-CALayer

可能大家想知道 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];

效果图如下:

iOS动画学习-CALayer

contentGravity

如上面代码所示,我们得到了一个变形了的图片,这当然不是我们想要的,如果想让图片正确显示,我们可以设置contentGravity,这个属性用法类似UIView中的contentMode属性,我们可以看一下它的枚举:

  • kCAGravityCenter
  • kCAGravityTop
  • kCAGravityBottom
  • kCAGravityLeft
  • kCAGravityRight
  • kCAGravityTopLeft
  • kCAGravityTopRight
  • kCAGravityBottomLeft
  • kCAGravityBottomRight
  • kCAGravityResize
  • kCAGravityResizeAspect
  • kCAGravityResizeAspectFill

是不是看着很熟悉啊!这对上面图片变形,我们可以设置这个属性值为kCAGravityResizeAspect,这样就能得到我们想要的正确的效果了

添加代码:

layer.contentsGravity = kCAGravityResizeAspect;

就能得到显示正确的图:

iOS动画学习-CALayer

contentsScale

contentsScale属性定义了寄宿图的像素尺寸和视图大小的比例,默认情况下它是一个值为1.0的浮点数。

如果你设置了contentsGravity属性,contentsScale就不在寄宿图有影响,因为它已经被拉伸以适应图层的边界。

contentsScale属性其实属于支持高分辨率(又称Hi-DPI或Retina)屏幕机制的一部分,它用来判断在绘制图层的时候应该为寄宿图创建的空间大小,和需要显示的图片的拉伸度(假设并没有设置contentsGravity属性),UIView有一个类似功能但是非常少用到的contentScaleFactor属性。

maskToBounds

如果把contentsGravity设置成kCAGravityCenter,我们看到图片超出了视图边界

iOS动画学习-CALayer

UIView有一个叫做clipsToBounds的属性可以用来决定是否显示超出边界的内容,CALayer对应的属性叫做masksToBounds,把它设置为YES,即可看到图片被剪切了,如下图:

iOS动画学习-CALayer

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创建了一个合适尺寸的空寄宿图(尺寸由boundscontentsScale决定)和一个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);


}


效果图:

iOS动画学习-CALayer