CALayer: ano ito, mga pangunahing konsepto at pag-render ng layer

Ano ang CALayer?

CALayer — ay isang klase mula sa QuartzCore framework na namamahala sa raster image ng isang parihabang lugar ng screen. Nag-iimbak ito ng mga visual na property: frame, backgroundColor, opacity, shadow, border, transform. Hindi tulad ng UIView, hindi pinoproseso ng CALayer ang mga touch event, hindi lumalahok sa Auto Layout, at walang lifecycle ng view controller.

Sa arkitektura, ipinapatupad ng CALayer ang pattern na Model sa konteksto ng Core Animation. Iniimbak ng layer ang estado ng mga visual na property, at pinamamahalaan ng Core Animation ang interpolation sa pagitan ng mga estado sa panahon ng animation. Ang paghihiwalay na ito ay nagbibigay-daan sa pag-animate ng anumang property ng layer nang hindi kinakailangang i-redraw ang content sa pamamagitan ng drawRect.

Ayon sa Apple WWDC 2024, muling isinulat ang CALayer upang gumana sa pamamagitan ng Metal. Ang modernong pipeline ng rendering ay may tatlong yugto: Commit (pag-update ng mga property sa CPU), Render (pagbuo ng mga command para sa GPU sa CPU), at Composite (pag-execute ng mga command sa GPU). Lumalahok ang CALayer sa lahat ng tatlong yugto, nagbibigay ng data para sa bawat isa.

Bawat layer ay maaaring maglaman ng sublayers — mga anak na layer na nire-render sa ibabaw ng parent layer. Inuulit ng hierarchy ng mga layer ang hierarchy ng UIView, ngunit maaaring umiral nang hiwalay. Maaaring gumawa ang developer ng mga layer na independyente sa UIView sa pamamagitan ng CALayer() at idagdag ang mga ito sa hierarchy sa pamamagitan ng addSublayer.

Pagkakaiba sa pagitan ng CALayer at UIView

UIView — ay isang layer sa ibabaw ng CALayer na nagdaragdag ng: pagproseso ng touch sa pamamagitan ng UIResponder, pakikilahok sa Auto Layout, presentasyon sa storyboard, integrasyon sa UIViewController. CALayer — ay isang magaan na bagay na maaaring gamitin nang walang UIView para sa purong visual na mga elemento.

Sa praktika, nangangahulugan ito na kung ang isang elemento ay hindi nangangailangan ng touch at layout, maaari itong ipatupad bilang CALayer. Halimbawa, mga animation sa background, loading indicator, decorative elements — lahat ng ito ay mas mahusay na ipinatupad sa pamamagitan ng CALayer, iniiwasan ang overhead ng UIView.

Mga Pangunahing Property ng CALayer

Mga Pangunahing Property ng CALayer ay kinabibilangan ng frame, pagpoposisyon, pagpapakita, at visual na mga epekto. frame ay tumutukoy sa parihabang lugar ng layer sa mga coordinate ng parent, bounds — panloob na mga coordinate, position — sentro ng layer. Ang pagbabago ng position ay nai-animate bilang default sa pamamagitan ng implicit animation.

• backgroundColor — kulay ng background ng layer (CGColor). Ang pagtatakda ng opaque na kulay at opaque = true ay nag-aalis ng alpha blending.
• cornerRadius — pagbilog ng mga sulok. Pagproseso ng hardware nang walang karagdagang rendering pass.
• borderWidth at borderColor — hangganan ng layer. Nire-render sa GPU, hindi nangangailangan ng drawRect.
• shadowOffset, shadowRadius, shadowOpacity, shadowPath — anino. Ang explicit na shadowPath ay makabuluhang nagpapabilis ng rendering.
• opacity — transparency ng layer mula 0.0 hanggang 1.0. Nai-animate nang hindi tumatawag sa drawRect.
• transform — CATransform3D para sa 2D at 3D na mga transformasyon. Sumusuporta sa perspective distortions.

Ang property na contents ay nagbibigay-daan sa direktang pagtatakda ng raster content ng layer — sa pamamagitan ng CGImage o CIImage. Ito ay alternatibo sa pagguhit sa pamamagitan ng drawRect: kung ang imahe ay handa na, maaari itong ipasa sa contents, at ire-render ito ng Core Animation nang walang karagdagang pagproseso.

Para sa mga animation ay ginagamit ang CABasicAnimation, CAKeyframeAnimation, at CATransition. Lahat ng mga klaseng ito ay gumagana sa pamamagitan ng key path ng mga property ng CALayer, na nagbibigay-daan sa pag-animate ng halos anumang attribute — mula position hanggang transform.rotation.z.

Mga Subclass ng CALayer at Ang Gamit Nito

Apple ay nagbibigay ng ilang espesyalisadong subclass ng CALayer, bawat isa ay lumulutas ng tiyak na gawain. Ang pagpili ng tamang subclass sa halip na base na CALayer ay maaaring magbigay ng makabuluhang pagtaas sa pagganap dahil sa hardware acceleration.

• CAShapeLayer — pagguhit ng mga vector shape (CGPath) sa GPU. Hindi nangangailangan ng hiwalay na buffer — ang shape ay nire-render bilang bahagi ng komposisyon ng parent layer.
• CATextLayer — rendering ng text na may subpixel antialiasing. Nag-cache ng mga glyph, nagpapabilis ng pagpapakita ng paulit-ulit na text.
• CAGradientLayer — linear at radial gradients. Hardware rendering nang hindi gumagawa ng mga intermediate na imahe.
• CAEmitterLayer — particle system sa GPU. Bawat particle ay nire-render bilang hiwalay na elemento nang walang partisipasyon ng CPU.
• CAReplicatorLayer — awtomatikong paggawa ng mga kopya ng mga anak na layer na may configurable na offsets sa posisyon, kulay, at oras.
• CATiledLayer — rendering ng malalaking imahe sa mga tile. Naglo-load at nagpapakita lamang ng mga nakikitang fragment.

CAReplicatorLayer ay lalong kapaki-pakinabang para sa paggawa ng mga paulit-ulit na pattern nang walang pagdoble ng code. Halimbawa, ang isang loading indicator na may 10 tuldok ay ipinatupad ng isang CAReplicatorLayer na may instanceCount = 10 at time offset ng animation na instanceDelay.

Rendering at Komposisyon ng CALayer

Rendering ng CALayer ay dumadaan sa tatlong phase. Commit — kapag nagbago ang property ng layer sa CPU, nabubuo ang isang packet ng mga pagbabago. Render — ang Core Animation ay bumubuo ng mga Metal command sa CPU batay sa mga property ng layer. Composite — ang GPU ay nag-execute ng mga command at nagpapakita ng frame sa screen. Ang buong proseso ay naka-sync sa refresh rate ng display.

Sa komposisyon ng maraming layer, pinagsasama ng GPU ang mga ito sa isang huling imahe na isinasaalang-alang ang transparency, mask, at blending mode. Kung ang layer ay may opaque = true, ini-optimize ng Core Animation ang komposisyon: sa halip na alpha blending, ginagawa ang simpleng pixel replacement, na mas mabilis.

Ayon sa Apple Performance Guidelines, ang mga pangunahing salik na nagpapabagal sa rendering ng CALayer: kumplikadong hierarchy ng sublayers (higit sa 30 layer sa screen), paggamit ng mask (mask property), awtomatikong pagkalkula ng anino nang walang shadowPath, labis na paggamit ng shouldRasterize para sa mga dynamic na layer.

Ang tool na Core Animation Instrument sa XCode ay nagbibigay-daan sa pag-monitor ng oras ng rendering ng bawat layer, bilang ng offscreen buffers, at dalas ng pagtawag sa drawRect. Ang optimal na oras ng rendering para sa 60 FPS — hindi hihigit sa 8 ms sa CPU at 8 ms sa GPU.

Offscreen rendering at ang epekto nito

Offscreen rendering — rendering ng layer sa isang intermediate buffer bago ipakita sa screen. Nangyayari kapag gumagamit ng cornerRadius + masksToBounds na may content, group opacity, mask, at shouldRasterize. Bawat offscreen pass ay tumatagal ng 2–5 ms, kaya ang labis na offscreen rendering ay kritikal para sa pagganap.

Para sa diagnosis ng offscreen rendering, gamitin ang tool na Color Offscreen-Rendered sa Core Animation Instrument. Ang mga dilaw na layer — offscreen, asul — direktang rendering sa screen. Ang pag-minimize ng offscreen pass ay ang pangunahing teknik sa pag-optimize sa iOS.

Mga Halimbawa ng Code: Paggawa gamit ang CALayer sa Swift

Ang unang halimbawa ay nagpapakita ng pangunahing configuration ng CALayer na may paggawa ng anino, pagbilog ng mga sulok, at border. Ang shadowPath ay explicit na itinakda para pabilisin ang 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
}

Ang pangalawang halimbawa — animation ng transform sa pamamagitan ng CABasicAnimation na may perspective 3D transformation. Ang rotation animation sa paligid ng Y axis ay lumilikha ng epekto ng pag-flip ng card:

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

Ang pangatlong halimbawa — paggamit ng CAGradientLayer para gumawa ng background gradient. Ang gradient ay nire-render sa GPU at hindi nangangailangan ng karagdagang resources kapag nagbabago ang laki:

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