Apple渲染图像、动画的CALayer
Apple渲染图像、动画的CALayer

Apple渲染图像、动画的CALayer

CALayer 是 macOS 和 iOS 系统中负责 图形渲染、动画和视觉效果的核心类之一,来自 Apple 的 Core Animation 框架(全称 Core Animation Layer)。它是构建现代 UI 的底层核心组件。

为什么需要CALayer?

在没有 CALayer 的世界中,所有绘制都需要手动使用 draw(),性能低、动画难。而有了 CALayer:

1、图形内容由 GPU 加速绘制

2、提供属性动画(位移、旋转、缩放等)。。

3、支持视觉效果(阴影、圆角、透明度等)。

4、支持图层层级管理(Z 顺序)。

macOS中的CALayer

在 macOS 中,NSView 可以拥有一个 CALayer,但默认没有,需要手动启用:

view.wantsLayer = true

然后就可以访问:

view.layer?.backgroundColor = NSColor.red.cgColor
view.layer?.cornerRadius = 10

常见属性

一、几何和布局

1、frame:CGRect类型,图层在父图层坐标系中的位置和大小;

2、bounds:CGRect类型,图层自身的坐标系范围;

3、position:CGPoint类型,图层的锚点在父图层中的位置;

4、anchorPoint:CGPoint类型,锚点(0~1),决定旋转/缩放中心点;

5、transform:CATransform3D类型,三维变换;

6、zPosition:CGFloat类型,控制图层的前后顺序(Z轴);

7、isHidden:Bool类型,控制图层是否隐藏。

二、外观样式

1、backgroundColor:CGColor?类型,背景颜色;

2、borderColor:CGColor?类型,边框颜色;

3、borderWidth:CGFloat类型,边框宽度;

4、cornerRadius:CGFloat类型,圆角半径;

5、opacity:Float类型,不透明度 (0~1);

6、shadowColor:CGColor?类型,阴影颜色;

7、shadowOpacity:Float类型,阴影透明度;

8、shadowOffset:CGSize类型,阴影偏移;

9、shadowRadius:CGFloat类型,阴影模糊半径;

10、shadowPath:CGPath?类型,自定义阴影路径。

三、内容显示

1、contents:Any?类型,显示的内容(通常是 CGImage);

2、contentsGravity:CALayerContentsGravity类型,内容拉伸模式;

3、contentsScale:CGFloat类型,缩放比例(用于 Retina 显示屏);

4、contentsRect:CGRect类型,显示内容的一部分;

5、contentsCenter:CGRect类型,九宫格拉伸的中心区域定义。

四、图层树结构

1、sublayers:[CALayer]?类型,子图层数组;

2、superlayer:CALayer?类型,父图层;

3、mask:CALayer?类型,遮罩图层(决定透明区域);

4、masksToBounds:Bool类型,是否裁剪超出边界的子内容;

5、delegate:CALayerDelegate?类型,响应绘制、动画等事件。

五、动画

1、add(_:forKey:):添加动画;

2、removeAnimation(forKey:):移除指定动画;

3、animationKeys():获取所有动画键值;

4、speed:动画播放速度;

5、beginTime:动画开始时间;

6、timeOffset:动画时间偏移;

7、repeatCount:循环次数(用于动画)。

六、绘图与渲染

1、setNeedsDisplay():标记为需要重绘;

2、draw(in:):使用 Core Graphics 自定义绘图;

3、shouldRasterize:是否缓存图层为位图以提升性能;

4、rasterizationScale:光栅化时的缩放比例;

5、allowsEdgeAntialiasing:是否抗锯齿处理。

设置视图样式

在NSView视图中,将wantsLayer属性改为true后,可以使用CALayer的各种渲染属性。

let view = NSView(frame: NSRect(x: 0, y: 0, width: 200, height: 200))
view.wantsLayer = true
view.layer?.backgroundColor = NSColor.systemBlue.cgColor
view.layer?.cornerRadius = 10
view.layer?.borderWidth = 2
view.layer?.borderColor = NSColor.white.cgColor
view.layer?.shadowColor = NSColor.black.cgColor
view.layer?.shadowOpacity = 0.5
view.layer?.shadowOffset = CGSize(width: 4, height: -4)

CALayer 与 NSView 的区别

1、管理内容:NSView负责事件、布局、交互,CALayer负责渲染、动画、视觉效果。

2、子视图:NSView可以包含子视图,CALayer也可以包含子图层。

3、内容:NSView需要绘制内容,CALayer可显示图片、颜色、子图层。

4、线程:NSView线程绑定(主线程),CALayer相对轻量,可后台渲染。

CALayer 不是替代 NSView,而是NSView的底层绘图引擎和动画基础设施。

使用场景

1、修改背景颜色

view.wantsLayer = true
view.layer?.backgroundColor = NSColor.red.cgColor

DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
    CATransaction.begin()
    CATransaction.setAnimationDuration(1.0)
    view.layer?.backgroundColor = NSColor.green.cgColor
    CATransaction.commit()
}

总结

CALayer(Core Animation Layer),负责图形绘制、动画、视觉效果。

配合 NSView 或 UIView 使用,设置 view.wantsLayer = true 后启用。

优势为:高性能、GPU 加速、可动画、支持视觉特效。

相关文章

1、macOS视图NSView:https://fangjunyu.com/2025/07/01/macos%e8%a7%86%e5%9b%bensview/

2、macOS颜色NSColor:https://fangjunyu.com/2025/07/01/macos%e9%a2%9c%e8%89%b2nscolor/

   

如果您认为这篇文章给您带来了帮助,您可以在此通过支付宝或者微信打赏网站开发者。

欢迎加入我们的 微信交流群QQ交流群,交流更多精彩内容!
微信交流群二维码 QQ交流群二维码

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注