【转】和我一起来学iOS（五）负责表现的CALayer

最新推荐文章于 2021-05-12 17:27:50 发布

转载最新推荐文章于 2021-05-12 17:27:50 发布 · 462 阅读

object-c 专栏收录该内容

32 篇文章

订阅专栏

和我一起来学iOS（五）负责表现的CALayer

CALayer 在很多方面都与 UIView 非常相似。它拥有位置、大小、变形和内容。你可以用自定义的代码(通常会用到 Core Graphics )来覆盖绘制方法以绘制定制内容。图层的层级关系与视图的非常接近。你可能会问:为什么还要有分离的对象?

最重要的答案是 UIView 是一个很重量级的对象,它管理绘制与事件处理(尤其是触摸事件)。 CALayer 完全关乎绘制。事实上,UIView 依靠 CALayer来管理绘制,这样两者就能协作得很好。

每个 UIView 都有一个 CALayer 用于绘制。而且每个 CALayer 都可以拥有子图层,就像每个 UIView 都可以拥有子视图一样

有多种方法可以设置图层的内容。可以直接调用 setContent:方法,也可以通过实现 display 或 displayLayer:方法做到,还可以实现drawInContext:或 drawLayer:inContext: 方法。接下来我们就分别讨论各种方法。

绘图系统几乎不会像 UIView 一样经常自动更新内容。比如说,UIView 在屏幕上第一次出现时会对自身进行绘制,而 CALayer 则不会。使用setNeedsDisplay 方法标记 UIView 为需要重绘的, 这样就可以自动绘制所有子视图了。使用 setNeedsDisplay 方法标记 CALayer 为需要重绘的则并不会对子图层产生影响。需要记住默认的是:UIView 默认会在它认为你需要的时候绘制,而 CALayer 默认只会在你明确要求时绘制。CALayer 是很底层的对象,它经过了优化,除非你明确要求,否则它不会浪费时间执行任何操作。

CALayer 相对于 UIView 有一个主要优点,即便你工作在 2D 环境中,CALayer 也支持自动边框效果。比如说,CALayer 可以自动生成圆角、彩色边线以及阴影。所有这些都可应用动画效果,可以提供非常好的视觉效果。举个例子,你可在用户点击并释放图层时触发更改位置和阴影的动画效果。

CALayer *layer = [CALayer layer]; 5 layer.frame = CGRectMake(100, 100, 100, 100);
layer.cornerRadius = 10;
layer.backgroundColor = [[UIColor redColor] CGColor];
layer.borderColor = [[UIColor blueColor] CGColor]; 6 layer.borderWidth = 5;
layer.shadowOpacity = 0.5;
layer.shadowOffset = CGSizeMake(3.0, 3.0);
[self.view.layer addSublayer:layer];

模型层与表示层

动画中的一个常见问题就是麻烦的“跳回”效果。错误如下:

    CABasicAnimation *fade;
    fade = [CABasicAnimation animationWithKeyPath:@"opacity"];
    fade.duration = 1;
    fade.fromValue = [NSNumber numberWithDouble:1.0];
    fade.toValue = [NSNumber numberWithDouble:0.0];
    [circleLayer addAnimation:fade forKey:@"fade"];

这段代码会让圆圈淡出大约 1 秒钟,之后突然出现。要了解突然出现的原因,需要明了模型层与表示层的区别。

模型层是由“真正”CALayer 对象的属性定义的。前面的代码没有任何地方修改 circleLayer 本身。相反,CAAnimation 创建了 circleLayer 的副本并对其进行修改,使其变成表示层。它们大致表示会在屏幕上显示什么内容。

那么前面的代码中发生了什么?CAAnimation 修改了表示层,表示层将被绘制到屏幕,绘制完成后,所有的更改都会丢失并由模型层决定新状态。模型层没有改变,因此会恢复一开始的状态。解决方法是设置模型层,如下所示:

circleLayer.opacity = 0; 2 CABasicAnimation *fade;
fade = [CABasicAnimation animationWithKeyPath:@"opacity"];
...1

[circleLayer addAnimation:fade forKey:@"fade"]; 3

有时它能正常工作,但有时 setOpacity:中的隐式动画会与 animationWIthKeyPath:的显式动画冲突。最好的解决办法是在执行显式动画时关闭隐式动画:

[CATransaction begin];
[CATransaction setDisableActions:YES];
circleLayer.opacity = 0;
CABasicAnimation *fade;
fade = [CABasicAnimation animationWithKeyPath:@"opacity"]; ...
[circleLayer addAnimation:fade forKey:@"fade"]; [CATransaction commit];

我做了个例子，代码放在github上，地址是 https://github.com/langxue/SlideChat ，看起来就像下面这样：

接下来我会用NavigationController把这个开场动画和前一节的UITableView关联起来，然后连接上用Node.js做的后台https://github.com/langxue/uberchat ，最后成一个相对完整的项目。