CALayer: khái niệm, kiến thức cốt lõi và kết xuất layer

CALayer là gì?

CALayer là một lớp từ framework QuartzCore quản lý hình ảnh bitmap của một vùng hình chữ nhật trên màn hình. Nó lưu trữ các thuộc tính trực quan: frame, backgroundColor, opacity, shadow, border, transform. Không giống như UIView, CALayer không xử lý sự kiện chạm, không tham gia Auto Layout và không có vòng đời view controller.

Về mặt kiến trúc, CALayer triển khai mẫu Model trong bối cảnh Core Animation. Layer lưu trữ trạng thái của các thuộc tính trực quan, trong khi Core Animation quản lý việc nội suy giữa các trạng thái trong quá trình tạo hoạt ảnh. Sự tách biệt này cho phép tạo hoạt ảnh cho bất kỳ thuộc tính layer nào mà không cần vẽ lại nội dung thông qua drawRect.

Theo Apple WWDC 2024, CALayer đã được viết lại để hoạt động thông qua Metal. Đường ống kết xuất hiện đại bao gồm ba giai đoạn: Commit (cập nhật thuộc tính trên CPU), Render (tạo lệnh GPU trên CPU) và Composite (thực thi lệnh trên GPU). CALayer tham gia vào cả ba giai đoạn, cung cấp dữ liệu cho mỗi giai đoạn.

Mỗi layer có thể chứa sublayers — các layer con kết xuất trên layer cha. Hệ thống phân cấp layer phản ánh hệ thống phân cấp UIView nhưng có thể tồn tại độc lập với nó. Nhà phát triển có thể tạo layer độc lập với UIView thông qua CALayer() và thêm chúng vào hệ thống phân cấp qua addSublayer.

Sự khác biệt giữa CALayer và UIView

UIView là một wrapper bao quanh CALayer bổ sung: xử lý chạm qua UIResponder, tham gia Auto Layout, biểu diễn trong storyboard và tích hợp với UIViewController. CALayer là một đối tượng nhẹ có thể được sử dụng mà không cần UIView cho các phần tử trực quan thuần túy.

Trong thực tế, điều này có nghĩa là nếu một phần tử không cần xử lý chạm hoặc bố cục, nó có thể được triển khai dưới dạng CALayer. Ví dụ, hoạt ảnh nền, chỉ báo tải, phần tử trang trí — tất cả đều được triển khai hiệu quả hơn qua CALayer, tránh chi phí của UIView.

Các thuộc tính chính của CALayer

Các thuộc tính cơ bản của CALayer bao gồm khung, định vị, hiển thị và hiệu ứng trực quan. frame xác định vùng hình chữ nhật của layer trong tọa độ cha, bounds xác định tọa độ nội bộ và position xác định tâm của layer. Thay đổi position được tạo hoạt ảnh theo mặc định thông qua hoạt ảnh ngầm định.

• backgroundColor — màu nền của layer (CGColor). Đặt màu đục với opaque = true loại bỏ pha trộn alpha.
• cornerRadius — làm tròn góc. Được xử lý bằng phần cứng mà không cần thêm lượt kết xuất.
• borderWidth và borderColor — viền layer. Kết xuất trên GPU, không yêu cầu drawRect.
• shadowOffset, shadowRadius, shadowOpacity, shadowPath — bóng. Một shadowPath rõ ràng tăng tốc đáng kể quá trình kết xuất.
• opacity — độ trong suốt của layer từ 0.0 đến 1.0. Được tạo hoạt ảnh mà không gọi drawRect.
• transform — CATransform3D cho các biến đổi 2D và 3D. Hỗ trợ biến dạng phối cảnh.

Thuộc tính contents cho phép đặt nội dung bitmap trực tiếp — qua CGImage hoặc CIImage. Đây là một giải pháp thay thế cho việc vẽ qua drawRect: nếu hình ảnh đã sẵn sàng, nó có thể được truyền cho contents và Core Animation sẽ kết xuất nó mà không cần xử lý thêm.

Để tạo hoạt ảnh, CABasicAnimation, CAKeyframeAnimation và CATransition được sử dụng. Tất cả các lớp này hoạt động thông qua key path thuộc tính của CALayer, cho phép tạo hoạt ảnh cho hầu hết mọi thuộc tính — từ position đến transform.rotation.z.

Các lớp con của CALayer và mục đích của chúng

Apple cung cấp một số lớp con chuyên biệt của CALayer, mỗi lớp giải quyết một tác vụ cụ thể. Chọn lớp con phù hợp thay vì CALayer cơ sở có thể mang lại cải thiện hiệu suất đáng kể nhờ tăng tốc phần cứng.

• CAShapeLayer — kết xuất hình dạng vector (CGPath) trên GPU. Không yêu cầu bộ đệm riêng — hình dạng được kết xuất như một phần của tổng hợp layer cha.
• CATextLayer — kết xuất văn bản với khử răng cưa subpixel. Lưu đệm glyph, tăng tốc hiển thị văn bản lặp lại.
• CAGradientLayer — gradient tuyến tính và xuyên tâm. Kết xuất phần cứng mà không tạo hình ảnh trung gian.
• CAEmitterLayer — hệ thống hạt trên GPU. Mỗi hạt được kết xuất như một phần tử riêng biệt mà không có sự tham gia của CPU.
• CAReplicatorLayer — tự động tạo bản sao của các layer con với độ lệch có thể cấu hình về vị trí, màu sắc và thời gian.
• CATiledLayer — kết xuất hình ảnh lớn theo ô. Chỉ tải và hiển thị các phần nhìn thấy được.

CAReplicatorLayer đặc biệt hữu ích để tạo các mẫu lặp lại mà không trùng lặp mã. Ví dụ, một chỉ báo tải với 10 chấm được triển khai với một CAReplicatorLayer sử dụng instanceCount = 10 và độ lệch thời gian hoạt ảnh instanceDelay.

Kết xuất và tổng hợp CALayer

Kết xuất CALayer diễn ra trong ba giai đoạn. Commit — khi một thuộc tính layer thay đổi, một lô thay đổi được hình thành trên CPU. Render — Core Animation tạo lệnh Metal trên CPU dựa trên các thuộc tính của layer. Composite — GPU thực thi lệnh và xuất khung hình ra màn hình. Toàn bộ quá trình được đồng bộ hóa với tốc độ làm mới màn hình.

Trong quá trình tổng hợp nhiều layer, GPU hợp nhất chúng thành hình ảnh cuối cùng có tính đến độ trong suốt, mặt nạ và chế độ hòa trộn. Nếu một layer có opaque = true, Core Animation tối ưu hóa tổng hợp: thay vì pha trộn alpha, việc thay thế pixel đơn giản được thực hiện, nhanh hơn đáng kể.

Theo Apple Performance Guidelines, các yếu tố chính làm chậm kết xuất CALayer là: hệ thống phân cấp sublayer phức tạp (hơn 30 layer trên màn hình), sử dụng mặt nạ (thuộc tính mask), tính toán bóng tự động không có shadowPath và sử dụng quá mức shouldRasterize cho các layer động.

Core Animation Instrument trong XCode cho phép giám sát thời gian kết xuất của mỗi layer, số lượng bộ đệm offscreen và tần suất gọi drawRect. Thời gian kết xuất tối ưu cho 60 FPS không quá 8 ms trên CPU và 8 ms trên GPU.

Kết xuất offscreen và tác động của nó

Kết xuất offscreen — kết xuất layer vào bộ đệm trung gian trước khi hiển thị trên màn hình. Xảy ra khi sử dụng cornerRadius + masksToBounds với nội dung, độ trong suốt nhóm, mặt nạ và shouldRasterize. Mỗi lượt offscreen mất 2–5 ms, vì vậy kết xuất offscreen quá mức rất quan trọng đối với hiệu suất.

Để chẩn đoán kết xuất offscreen, hãy sử dụng công cụ Color Offscreen-Rendered trong Core Animation Instrument. Layer màu vàng — offscreen, màu xanh lam — kết xuất trực tiếp ra màn hình. Giảm thiểu các lượt offscreen là một kỹ thuật tối ưu hóa chính trong iOS.

Ví dụ mã: làm việc với CALayer trong Swift

Ví dụ đầu tiên minh họa thiết lập CALayer cơ bản với tạo bóng, làm tròn góc và viền. shadowPath được chỉ định rõ ràng để tăng tốc kết xuất:

import UIKit

func configureLayer(_ view: UIView) {
    let layer = view.layer
    layer.cornerRadius = 16
    layer.borderWidth = 2
    layer.borderColor = UIColor.systemBlue.cgColor
    layer.backgroundColor = UIColor.white.cgColor

    layer.shadowColor = UIColor.black.cgColor
    layer.shadowOpacity = 0.2
    layer.shadowOffset = CGSize(width: 0, height: 4)
    layer.shadowRadius = 8
    layer.shadowPath = UIBezierPath(
        roundedRect: view.bounds,
        cornerRadius: layer.cornerRadius
    ).cgPath
}

Ví dụ thứ hai hiển thị hoạt ảnh transform thông qua CABasicAnimation với biến đổi 3D phối cảnh. Hoạt ảnh xoay trục Y tạo hiệu ứng lật thẻ:

let flipAnimation = CABasicAnimation(keyPath: "transform")
var transform = CATransform3DIdentity
transform.m34 = -1.0 / 500.0
transform = CATransform3DRotate(transform, .pi, 0, 1, 0)
flipAnimation.toValue = NSValue(caTransform3D: transform)
flipAnimation.duration = 0.8
flipAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
cardLayer.add(flipAnimation, forKey: "flip")

Ví dụ thứ ba minh họa việc sử dụng CAGradientLayer để tạo gradient nền. Gradient kết xuất trên GPU và không yêu cầu tài nguyên bổ sung khi thay đổi kích thước:

func addGradient(to view: UIView, colors: [UIColor]) {
    let gradient = CAGradientLayer()
    gradient.colors = colors.map { $0.cgColor }
    gradient.locations = [0.0, 0.5, 1.0]
    gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
    gradient.endPoint = CGPoint(x: 1.0, y: 1.0)
    gradient.frame = view.bounds
    view.layer.insertSublayer(gradient, at: 0)
}