CALayer: چیست؛ مفاهیم کلیدی و رندر لایه

CALayer چیست؟

CALayer — کلاسی از چارچوب QuartzCore است که تصویر راستر یک ناحیه مستطیل از صفحه نمایش را مدیریت می‌کند. آن ویژگی‌های دیداری را ذخیره می‌کند: frame, backgroundColor, opacity, shadow, border, transform. بر خلاف UIView، CALayer رویدادهای لمسی را پردازش نمی‌کند، در Auto Layout شرکت نمی‌کند و چرخه عمر view controller ندارد.

از نظر معماری، CALayer الگوی Model را در زمینه Core Animation پیاده سازی می‌کند. لایه وضعیت ویژگی‌های دیداری را ذخیره می‌کند و Core Animation استفرای بین وضعیت‌ها در طول انیمیشن را مدیریت می‌کند. این جداسازی امکان انیمیشن هر ویژگی لایه را بدون نیاز به ترسیم مجدد محتوا از طریق drawRect فراهم می‌کند.

به استناد به Apple WWDC 2024، CALayer برای کار از طریق Metal بازنویسی شده است. پایپلاین رندر مدرن شامل سه مرحله است: Commit (به‌روزرسانی ویژگی‌ها روی CPU)، Render (تولید دستورات GPU روی CPU) و Composite (اجرای دستورات روی GPU). CALayer در هر سه مرحله شرکت می‌کند و برای هر کدام داده تامین می‌کند.

هر لایه می‌تواند شامل sublayers — لایه‌های فرزند که بالای لایه والد رندر می‌شوند — باشد. سلسله‌مراتب لایه‌ها سلسله‌مراتب UIView را تکرار می‌کند، اما می‌تواند به صورت جداگانه وجود داشته باشد. توسعه‌دهنده می‌تواند لایه‌هایی مستقل از UIView از طریق CALayer() ایجاد کرده و آن‌ها را از طریق addSublayer به سلسله‌مراتب اضافه کند.

تفاوت بین CALayer و UIView

UIView — لایه‌ای است بر روی CALayer که امکانات زیر را اضافه می‌کند: پردازش لمس از طریق UIResponder، شرکت در Auto Layout، نمایش در storyboard، یکپارچگی با UIViewController. CALayer — یک شیء سبک است که می‌توان آن را بدون UIView برای عناصر صرفاً دیداری استفاده کرد.

در عمل، این به آن معنی است که اگر عنصری به لمس و چیدمان نیاز نداشته باشد، می‌توان آن را به عنوان CALayer پیاده سازی کرد. به عنوان مثال، انیمیشن‌های پس‌زمینه، نشانگرهای بارگیری، عناصر تزئینی — همه آن‌ها با پیاده‌سازی از طریق CALayer و اجتناب از سرریست UIView موثرتر هستند.

ویژگی‌های اصلی CALayer

ویژگی‌های پایه CALayer شامل قاب، موقعیت‌یابی، نمایش و افکت‌های دیداری می‌شود. frame ناحیه مستطیل لایه را در مختصات والد، bounds — مختصات داخلی، position — مرکز لایه را مشخص می‌کند. تغییر position به صورت پیش‌فرض از طریق implicit animation انیمیته می‌شود.

• backgroundColor — رنگ پس‌زمینه لایه (CGColor). تنظیم رنگ کدر و opaque = true ترکیب آلفا را حذف می‌کند.
• cornerRadius — گردکندگی گوشه‌ها. پردازش سخت‌افزاری بدون پاس‌های رندر اضافی.
• borderWidth و borderColor — مرز لایه. روی GPU رندر می‌شود، نیازی به drawRect ندارد.
• shadowOffset، shadowRadius، shadowOpacity، shadowPath — سایه. shadowPath صریح رندر را به طور قابل توجهی سرع می‌بخشد.
• opacity — شفافیت لایه از 0.0 تا 1.0. بدون فراخوانی drawRect انیمیته می‌شود.
• transform — CATransform3D برای تبدیلات 2D و 3D. از تحریف‌های پرسپکتیو پشتیبانی می‌کند.

ویژگی contents به شما اجازه می‌دهد محتوای راستر لایه را مستقیماً تعیین کنید — از طریق CGImage یا CIImage. این یک التباطیو برای رسم از طریق drawRect است: اگر تصویر از قبل آماده است، می‌توان آن را به contents ارسال کرد و Core Animation آن را بدون پردازش اضافی رندر خواهد کرد.

برای انیمیشن از CABasicAnimation، CAKeyframeAnimation و CATransition استفاده می‌شود. همه این کلاس‌ها از طریق مسیرهای کلیدی ویژگی‌های CALayer کار می‌کنند که تقریباً هر ویژگی را — از position تا transform.rotation.z — قابل انیمیشن می‌کند.

زیرکلاس‌های CALayer و کاربرد آن‌ها

Apple چندین زیرکلاس تخصصی CALayer را ارائه می‌دهد که هر کدام مسئله مشخصی را حل می‌کنند. انتخاب زیرکلاس مناسب به جای CALayer پایه می‌تواند به لطف شتاب‌دهی سخت‌افزاری بهبود قابل توجهی در عملکرد ایجاد کند.

• CAShapeLayer — ترسیم اشکال وکتوری (CGPath) روی GPU. بدون بافر جداگانه — شکل به عنوان بخشی از ترکیب لایه والد رندر می‌شود.
• CATextLayer — رندر متن با هموارسازی زیرپیکسلی. گلیف‌ها را کش می‌کند که نمایش متن تکراری را سرع می‌بخشد.
• CAGradientLayer — گرادیان‌های خطی و شعاعی. رندر سخت‌افزاری بدون تولید تصاویر واسطی.
• CAEmitterLayer — سیستم ذرات روی GPU. هر ذره بدون مشارکت CPU به عنوان عنصری مستقل رندر می‌شود.
• CAReplicatorLayer — ایجاد خودکار کپی‌هایی از لایه‌های فرزند با جابجایی‌های قابل تنظیم در موقعیت، رنگ و زمان.
• CATiledLayer — رندر تصاویر بزرگ به صورت کاشی. تنها بخش‌های قابل دید را بارگیری و نمایش می‌دهد.

CAReplicatorLayer به ویژه برای ایجاد الگوهای تکرارشونده بدون دوباره‌نویسی کد مفید است. به عنوان مثال، نشانگر بارگیری از 10 نقطه با یک CAReplicatorLayer با instanceCount = 10 و جابجایی زمان انیمیشن instanceDelay پیاده سازی می‌شود.

رندر و ترکیب CALayer

رندر CALayer در سه فاز انجام می‌شود. Commit — با تغییر ویژگی لایه روی CPU، بسته تغییرات شکل می‌گیرد. Render — Core Animation بر اساس ویژگی‌های لایه دستورات Metal را روی CPU تولید می‌کند. Composite — GPU دستورات را اجرا و کادر را روی صفحه نمایش می‌دهد. تمام فرآیند با نرخ تازه‌سازی نمایشگر همگام می‌شود.

در ترکیب چند لایه، GPU آن‌ها را در یک تصویر نهایی با حساب شفافیت، ماسک‌ها و حالات ادغام ادغام می‌کند. اگر لایه opaque = true داشته باشد، Core Animation ترکیب را بهینه می‌کند: به جای ادغام آلفا، جایگزینی ساده پیکسل انجام می‌شود که بسیار سریع‌تر است.

به استناد به Apple Performance Guidelines، عوامل اصلی کندکننده رندر CALayer: سلسله‌مراتب پیچیده sublayers (بیش از 30 لایه روی صفحه)، استفاده از ماسک‌ها (ویژگی mask)، محاسبه خودکار سایه بدون shadowPath، استفاده از حد زیاد shouldRasterize برای لایه‌های پویا.

ابزار Core Animation Instrument در XCode به شما امکان می‌دهد زمان رندر هر لایه، تعداد بافرهای offscreen و دفعات فراخوانی drawRect را نظارت کنید. زمان رندر بهینه برای 60 FPS — حداکثر 8 ms روی CPU و 8 ms روی GPU.

رندر Offscreen و تأثیر آن

رندر Offscreen — رندر لایه در یک بافر واسطی قبل از نمایش روی صفحه. در زمان استفاده از cornerRadius + masksToBounds با محتوا، opacity گروهی، ماسک‌ها و shouldRasterize اتفاق می‌افتد. هر گذر offscreen 2–5 ms طول می‌کشد، بنابراین رندرهای افزایشی offscreen برای عملکرد حیاتی هستند.

برای تشخیص رندر offscreen از ابزار Color Offscreen-Rendered در Core Animation Instrument استفاده کنید. لایه‌های زرد — offscreen، آبی — رندر مستقیم روی صفحه. کاهش گذرهای offscreen تکنیک کلیدی بهینه‌سازی در iOS است.

نمونه کد: کار با CALayer در Swift

نمونه اول تنظیمات پایه CALayer را با ایجاد سایه، گردکندگی گوشه‌ها و مرز نمایش می‌دهد. shadowPath برای سرعت بخشی رندر به صورت صریح تعیین شده است:

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
}

نمونه دوم — انیمیشن transform از طریق CABasicAnimation با تبدیل یک 3D پرسپکتیو. انیمیشن چرخش در محور Y افکت چرخیدن کارت را ایجاد می‌کند:

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")

نمونه سوم — استفاده از CAGradientLayer برای ایجاد گرادیان پس‌زمینه. گرادیان روی GPU رندر می‌شود و هنگام تغییر اندازه به منابع اضافی نیاز ندارد:

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)
}