CALayer: apa itu, konsep kunci dan rendering layer

Apa itu CALayer?

CALayer — adalah kelas dari framework QuartzCore yang mengelola gambar raster area persegi panjang di layar. Ia menyimpan properti visual: frame, backgroundColor, opacity, shadow, border, transform. Tidak seperti UIView, CALayer tidak memproses event sentuhan, tidak berpartisipasi dalam Auto Layout, dan tidak memiliki siklus hidup view controller.

Secara arsitektural, CALayer mengimplementasikan pola Model dalam konteks Core Animation. Layer menyimpan status properti visual, dan Core Animation mengelola interpolasi antar status selama animasi. Pemisahan ini memungkinkan animasi properti layer apa pun tanpa perlu menggambar ulang konten melalui drawRect.

Menurut Apple WWDC 2024, CALayer telah ditulis ulang untuk bekerja melalui Metal. Pipeline rendering modern mencakup tiga tahap: Commit (memperbarui properti di CPU), Render (menghasilkan perintah untuk GPU di CPU), dan Composite (mengeksekusi perintah di GPU). CALayer berpartisipasi dalam ketiga tahap, menyediakan data untuk masing-masing.

Setiap layer dapat berisi sublayers — layer anak yang dirender di atas layer induk. Hierarki layer mengulangi hierarki UIView, tetapi dapat berdiri sendiri. Pengembang dapat membuat layer independen dari UIView melalui CALayer() dan menambahkannya ke hierarki melalui addSublayer.

Perbedaan antara CALayer dan UIView

UIView — adalah lapisan di atas CALayer yang menambahkan: pemrosesan sentuhan melalui UIResponder, partisipasi dalam Auto Layout, presentasi di storyboard, integrasi dengan UIViewController. CALayer — adalah objek ringan yang dapat digunakan tanpa UIView untuk elemen visual murni.

Dalam praktiknya, ini berarti jika suatu elemen tidak memerlukan sentuhan dan layout, ia dapat diimplementasikan sebagai CALayer. Misalnya, animasi latar belakang, indikator pemuatan, elemen dekoratif — semuanya lebih efisien diimplementasikan melalui CALayer, menghindari overhead UIView.

Properti Dasar CALayer

Properti Dasar CALayer mencakup bingkai, penempatan, tampilan, dan efek visual. frame menentukan area persegi panjang layer dalam koordinat induk, bounds — koordinat internal, position — pusat layer. Perubahan position dianimasikan secara default melalui implicit animation.

• backgroundColor — warna latar belakang layer (CGColor). Mengatur warna buram dan opaque = true menghilangkan pencampuran alfa.
• cornerRadius — pembulatan sudut. Pemrosesan perangkat keras tanpa lintasan rendering tambahan.
• borderWidth dan borderColor — batas layer. Dirender di GPU, tidak memerlukan drawRect.
• shadowOffset, shadowRadius, shadowOpacity, shadowPath — bayangan. shadowPath eksplisit secara signifikan mempercepat rendering.
• opacity — transparansi layer dari 0.0 hingga 1.0. Dianimasikan tanpa memanggil drawRect.
• transform — CATransform3D untuk transformasi 2D dan 3D. Mendukung distorsi perspektif.

Properti contents memungkinkan pengaturan konten raster layer secara langsung — melalui CGImage atau CIImage. Ini adalah alternatif untuk menggambar melalui drawRect: jika gambar sudah siap, dapat diteruskan ke contents, dan Core Animation akan merendernya tanpa pemrosesan tambahan.

Untuk animasi digunakan CABasicAnimation, CAKeyframeAnimation, dan CATransition. Semua kelas ini bekerja melalui jalur kunci properti CALayer, yang memungkinkan animasi hampir semua atribut — dari position hingga transform.rotation.z.

Subclass CALayer dan Fungsinya

Apple menyediakan beberapa subclass CALayer khusus, yang masing-masing menyelesaikan tugas tertentu. Memilih subclass yang tepat daripada CALayer dasar dapat memberikan peningkatan kinerja yang signifikan berkat percepatan perangkat keras.

• CAShapeLayer — menggambar bentuk vektor (CGPath) di GPU. Tidak memerlukan buffer terpisah — bentuk dirender sebagai bagian dari komposisi layer induk.
• CATextLayer — rendering teks dengan anti-aliasing subpiksel. Men-cache glyph, mempercepat tampilan teks berulang.
• CAGradientLayer — gradien linier dan radial. Rendering perangkat keras tanpa menghasilkan gambar perantara.
• CAEmitterLayer — sistem partikel di GPU. Setiap partikel dirender sebagai elemen terpisah tanpa keterlibatan CPU.
• CAReplicatorLayer — pembuatan otomatis salinan layer anak dengan offset posisi, warna, dan waktu yang dapat dikonfigurasi.
• CATiledLayer — rendering gambar besar dalam petak. Memuat dan menampilkan hanya fragmen yang terlihat.

CAReplicatorLayer sangat berguna untuk membuat pola berulang tanpa duplikasi kode. Misalnya, indikator pemuatan 10 titik diimplementasikan dengan satu CAReplicatorLayer dengan instanceCount = 10 dan offset waktu animasi instanceDelay.

Rendering dan Komposisi CALayer

Rendering CALayer melalui tiga fase. Commit — saat properti layer diubah di CPU, paket perubahan terbentuk. Render — Core Animation menghasilkan perintah Metal di CPU berdasarkan properti layer. Composite — GPU mengeksekusi perintah dan menampilkan bingkai di layar. Seluruh proses disinkronkan dengan frekuensi penyegaran layar.

Pada komposisi beberapa layer, GPU menggabungkannya menjadi gambar akhir dengan mempertimbangkan transparansi, mask, dan mode pencampuran. Jika layer memiliki opaque = true, Core Animation mengoptimalkan komposisi: alih-alih pencampuran alfa, dilakukan penggantian piksel sederhana, yang jauh lebih cepat.

Menurut Apple Performance Guidelines, faktor utama yang memperlambat rendering CALayer: hierarki sublayers yang kompleks (lebih dari 30 layer di layar), penggunaan mask (properti mask), perhitungan bayangan otomatis tanpa shadowPath, penggunaan shouldRasterize yang berlebihan untuk layer dinamis.

Alat Core Animation Instrument di XCode memungkinkan pemantauan waktu rendering setiap layer, jumlah buffer offscreen, dan frekuensi panggilan drawRect. Waktu rendering optimal untuk 60 FPS — tidak lebih dari 8 ms di CPU dan 8 ms di GPU.

Offscreen rendering dan dampaknya

Offscreen rendering — rendering layer dalam buffer perantara sebelum ditampilkan di layar. Terjadi saat menggunakan cornerRadius + masksToBounds dengan konten, opacity grup, mask, dan shouldRasterize. Setiap lintasan offscreen memakan waktu 2–5 ms, oleh karena itu rendering offscreen yang berlebihan sangat kritis bagi kinerja.

Untuk diagnostik offscreen rendering, gunakan alat Color Offscreen-Rendered di Core Animation Instrument. Layer kuning — offscreen, biru — rendering langsung ke layar. Meminimalkan lintasan offscreen adalah teknik optimasi kunci di iOS.

Contoh Kode: Bekerja dengan CALayer di Swift

Contoh pertama menunjukkan konfigurasi dasar CALayer dengan pembuatan bayangan, pembulatan sudut, dan batas. shadowPath ditetapkan secara eksplisit untuk mempercepat rendering:

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
}

Contoh kedua — animasi transform melalui CABasicAnimation dengan transformasi 3D perspektif. Animasi rotasi di sekitar sumbu Y menciptakan efek membalik kartu:

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

Contoh ketiga — penggunaan CAGradientLayer untuk membuat gradien latar belakang. Gradien dirender di GPU dan tidak memerlukan sumber daya tambahan saat mengubah ukuran:

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