CALayer: τι είναι, βασικές έννοιες και αποδοση του επιπέδου

Τι είναι το CALayer;

CALayer — είναι μια κλάση από το πλαίσιο QuartzCore που διαχειρίζεται την εικόνα raster μιας ορθογώνιας περιοχής της οθόνης. Αποθηκεύει οπτικές ιδιότητες: 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 για καθαρά οπτικά στοιχεία.

Στην πράξη, αυτό σημαίνει ότι αν ένα στοιχείο δεν χρειάζεται αφή και layout, μπορεί να υλοποιηθεί ως 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. Δεν απαιτεί ξεχωριστό buffer — το σχήμα αποδίδεται ως μέρος της σύνθεσης του γονικού επιπέδου.
• CATextLayer — απόδοση κειμένου με εξομάλυνση υποπιξέλ. Αποθηκεύει στη κρυπτή τα glyphs, επιταχύνοντας την εμφάνιση επαναλαμβανόμενου κειμένου.
• 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 buffers και της συχνότητας κλήσεων drawRect. Ο βελτιστος χρόνος απόδοσης για 60 FPS — όχι περισσότερο από 8 ms στη CPU και 8 ms στη GPU.

Offscreen απόδοση και η επίδρασή της

Offscreen απόδοση — απόδοση του επιπέδου σε έναν ενδιάμεσο buffer πριν από την εμφάνιση στην οθόνη. Προκύπτει κατά τη χρήση 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)
}