CALayer: vad är det, nyckelbegrepp och rendering av lagret

Vad är CALayer?

CALayer — är en klass från QuartzCore-ramverket som hanterar rasterbilden av ett rektangulärt område på skärmen. Den lagrar visuella egenskaper: frame, backgroundColor, opacity, shadow, border, transform. Till skillnad från UIView bearbetar CALayer inte tryckhändelser, deltar inte i Auto Layout och har ingen livscykel för en view controller.

Arkitektoniskt implementerar CALayer Model-mönstret i kontexten av Core Animation. Lagret lagrar tillståndet för visuella egenskaper och Core Animation hanterar interpolationen mellan tillstånd under animationen. Denna separering gör det möjligt att animera valfria egenskaper hos lagret utan att behöva rita om innehållet via drawRect.

Enligt Apple WWDC 2024 har CALayer skrivits om för att fungera via Metal. Den moderna renderingspipelinjen omfattar tre faser: Commit (uppdatering av egenskaper på CPU:n), Render (generering av kommandon för GPU:n på CPU:n) och Composite (exekvering av kommandon på GPU:n). CALayer deltar i alla tre faserna och tillhandahåller data för varje.

Varje lager kan innehålla sublayers — underliggande lager som renderas ovanför det föräldralagret. Lagerhierarkin upprepar UIView-hierarkin men kan existera separat. Utvecklaren kan skapa lager oberoende av UIView via CALayer() och lägga till dem i hierarkin via addSublayer.

Skillnad mellan CALayer och UIView

UIView — är ett lager ovanpå CALayer som lägger till: tryckhantering via UIResponder, deltagande i Auto Layout, presentation i storyboard, integration med UIViewController. CALayer — är ett lättviktigt objekt som kan användas utan UIView för rent visuella element.

I praktiken innebär detta att om ett element inte behöver tryck och layout kan det implementeras som CALayer. Till exempel bakgrundsanimationer, laddningsindikatorer, dekorativa element — allt detta är effektivare att implementera via CALayer och undviker overheaden från UIView.

Grundläggande egenskaper hos CALayer

Grundläggande egenskaper hos CALayer omfattar ram, positionering, visning och visuella effekter. frame definierar lagrets rektangulära område i förälderns koordinater, bounds — interna koordinater, position — lagrets centrum. Ändring av position animeras som standard via implicit animation.

• backgroundColor — bakgrundsfärg för lagret (CGColor). Att ställa in en ogenomskinlig färg och opaque = true eliminerar alfablandning.
• cornerRadius — avrundning av hörn. Hårdvarubearbetning utan extra renderingsgenomgångar.
• borderWidth och borderColor — lagrets kant. Renderas på GPU:n, kräver inte drawRect.
• shadowOffset, shadowRadius, shadowOpacity, shadowPath — skugga. Explicit shadowPath påskyndar renderingen avsevärt.
• opacity — lagrets genomskinlighet från 0.0 till 1.0. Animeras utan att anropa drawRect.
• transform — CATransform3D för 2D- och 3D-transformeringar. Stödjer perspektivförvrängningar.

Egenskapen contents gör det möjligt att direkt ställa in lagrets rasterinnehåll — via CGImage eller CIImage. Detta är ett alternativ till att rita via drawRect: om bilden redan är klar kan den skickas till contents och Core Animation renderar den utan ytterligare bearbetning.

För animationer används CABasicAnimation, CAKeyframeAnimation och CATransition. Alla dessa klasser fungerar via nyckelvägar för CALayer-egenskaper, vilket gör det möjligt att animera nästan vilket attribut som helst — från position till transform.rotation.z.

Underklasser av CALayer och deras syfte

Apple tillhandahåller flera specialiserade underklasser av CALayer, som var och en löser en specifik uppgift. Att välja rätt underklass istället för den grundläggande CALayer kan ge en betydande prestandaökning tack vare hårdvaruacceleration.

• CAShapeLayer — ritning av vektorformer (CGPath) på GPU:n. Kräver ingen separat buffert — formen renderas som en del av föräldralagrets komposition.
• CATextLayer — rendering av text med subpixel-utjämning. Cachelagrar glyfer, vilket snabbar upp visning av återkommande text.
• CAGradientLayer — linjära och radiella gradienter. Hårdvarurendering utan generering av mellanliggande bilder.
• CAEmitterLayer — partikelsystem på GPU:n. Varje partikel renderas som ett separat element utan CPU-deltagande.
• CAReplicatorLayer — automatisk skapande av kopior av underliggande lager med konfigurerbara förskjutningar i position, färg och tid.
• CATiledLayer — rendering av stora bilder i plattor. Laddar och visar endast synliga fragment.

CAReplicatorLayer är särskilt användbart för att skapa repetitiva mönster utan kodduplicering. Till exempel implementeras en laddningsindikator med 10 punkter med en CAReplicatorLayer med instanceCount = 10 och tidsförskjutningen instanceDelay för animationen.

Rendering och komposition av CALayer

Rendering av CALayer går igenom tre faser. Commit — när en egenskap hos lagret ändras bildas ett ändringspaket på CPU:n. Render — Core Animation genererar Metal-kommandon på CPU:n baserat på lagrets egenskaper. Composite — GPU:n exekverar kommandona och visar bildrutan på skärmen. Hela processen är synkroniserad med skärmens uppdateringsfrekvens.

Vid komposition av flera lager slår GPU:n ihop dem till en slutlig bild med hänsyn till genomskinlighet, masker och blandningslägen. Om lagret har opaque = true optimerar Core Animation kompositionen: istället för alfablandning utförs en enkel pixelersättning, vilket är betydligt snabbare.

Enligt Apple Performance Guidelines är de främsta faktorerna som saktar ner rendering av CALayer: komplex sublayer-hierarki (mer än 30 lager på skärmen), användning av masker (mask-egenskapen), automatisk beräkning av skugga utan shadowPath, överdriven användning av shouldRasterize för dynamiska lager.

Verktyget Core Animation Instrument i XCode gör det möjligt att övervaka renderingstiden för varje lager, antalet offscreen-buffertar och frekvensen av drawRect-anrop. Optimal renderingstid för 60 FPS — inte mer än 8 ms på CPU:n och 8 ms på GPU:n.

Offscreen-rendering och dess påverkan

Offscreen-rendering — rendering av lagret i en mellanliggande buffert innan det visas på skärmen. Uppstår vid användning av cornerRadius + masksToBounds med innehåll, grupp-opacity, masker och shouldRasterize. Varje offscreen-genomgång tar 2–5 ms, därför är överdriven offscreen-rendering kritisk för prestandan.

För diagnostik av offscreen-rendering använd verktyget Color Offscreen-Rendered i Core Animation Instrument. Gula lager — offscreen, blå — direkt rendering till skärmen. Minimering av offscreen-genomgångar är den viktigaste optimeringstekniken i iOS.

Kodexempel: arbeta med CALayer i Swift

Det första exemplet visar grundläggande konfiguration av CALayer med skapande av skugga, avrundning av hörn och kant. shadowPath är explicit inställd för att påskynda renderingen:

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
}

Det andra exemplet — animering av transform via CABasicAnimation med perspektivisk 3D-transformering. Rotationsanimationen runt Y-axeln skapar en kortvändningseffekt:

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

Det tredje exemplet — användning av CAGradientLayer för att skapa en bakgrundsgradient. Gradienten renderas på GPU:n och kräver inga extra resurser när storleken ändras:

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