UIView.animate: τι είναι, κινούμενα σχέδια ιδιοτήτων UIView σε iOS

Τι είναι το UIView.animate;

UIView.animate — μια στατική μέθοδος της κλάσης UIView, που εισήχθη στο iOS 4 (2010). Παρέχει ένα δηλωτικό API για την κίνηση κινήσιμων ιδιοτήτων UIView: frame, bounds, center, alpha, transform, backgroundColor. Η μέθοδος δέχεται ένα μπλοκ (κλείσιμο) με αλλαγές ιδιοτήτων — το σύστημα δημιουργεί αυτόματα CABasicAnimation για κάθε αλλαγμένη ιδιότητα.

Η σύνταξη μπλοκ αντικατέστησε την παλιά beginAnimations/commitAnimations (iOS 2-3) και έγινε το πρότυπο κίνησης στο UIKit. Οι κινήσεις UIView.animate εκτελούνται στο κύριο νήμα και δεν μπλοκάρουν το UI. Από προεπιλογή, η διάρκεια κίνησης είναι 0.25 δευτερόλεπτα με καμπύλη easeInOut.

Σύμφωνα με δεδομένα της Apple WWDC 2023, ο προτεινόμενος τρόπος κίνησης σε νέα έργα είναι το SwiftUI με τροποποιητές .animation() και .transition(), αλλά το UIKit.animate παραμένει το κύριο εργαλείο για υποστήριξη iOS 16 και παλαιότερων, καθώς και για σύνθετες προσαρμοσμένες μεταβάσεις.

Παράμετροι και επιλογές κίνησης

UIView.animate παρέχει τρεις βασικές παραμέτρους: duration (διάρκεια σε δευτερόλεπτα), delay (καθυστέρηση πριν την έναρξη) και options (σύνολο bit masks UIView.AnimationOptions). Τα options περιλαμβάνουν curve (easeInOut, easeIn, easeOut, linear), repeat (επανάληψη), autoreverse (αυτόματη αναστροφή), allowUserInteraction, beginFromCurrentState και overrideInheritedDuration.

Η παράμετρος options συνδυάζεται μέσω πίνακα: [.curveEaseOut, .repeat, .autoreverse]. Η κίνηση με repeat και autoreverse επαναφέρει ομαλά το View στην αρχική κατάσταση και επαναλαμβάνεται επ' άπειρον. Για πεπερασμένο αριθμό επαναλήψεων, χρησιμοποιήστε animateKeyframes.

Spring κίνηση μέσω UIView.animate

Spring κίνηση προσθέτει ένα φυσικό εφέ ελατηρίου: το αντικείμενο όχι απλώς μετακινείται από το σημείο Α στο Β, αλλά υπερβαίνει τον στόχο με αποσβενόμενες ταλαντώσεις. Παράμετροι: usingSpringWithDamping (απόσβεση 0-1, όπου 0 — μέγιστες ταλαντώσεις) και initialSpringVelocity (αρχική ταχύτητα ελατηρίου).

Η Apple συνιστά usingSpringWithDamping στο εύρος 0.4-0.8 για φυσικές κινήσεις UI. Η τιμή 0.5 δημιουργεί αισθητή αναπήδηση χωρίς αίσθηση λάστιχου. Το initialSpringVelocity = 1.0 αντιστοιχεί σε ταχύτητα 1 pt/δευτ. Στο 0, η κίνηση ξεκινά από κατάσταση ηρεμίας.

// Παράδειγμα spring και keyframe κίνησης
import UIKit

class AnimatedView: UIView {

    func springBounce() {
        // Spring κίνηση με απόσβεση
        UIView.animate(
            withDuration: 0.8,
            delay: 0,
            usingSpringWithDamping: 0.5,
            initialSpringVelocity: 1.0,
            options: [.allowUserInteraction],
            animations: {
                self.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
                self.alpha = 0.7
            },
            completion: { _ in
                UIView.animate(withDuration: 0.3) {
                    self.transform = .identity
                    self.alpha = 1.0
                }
            }
        )
    }

    func slideIn(from offset: CGFloat) {
        self.transform = CGAffineTransform(translationX: offset, y: 0)
        self.alpha = 0.0

        UIView.animate(
            withDuration: 0.6,
            delay: 0.1,
            options: [.curveEaseOut]
        ) {
            self.transform = .identity
            self.alpha = 1.0
        }
    }
}

Keyframe κίνηση

UIView.animateKeyframes επιτρέπει τη διαίρεση της κίνησης σε πολλαπλά βήματα (keyframes), το καθένα με τον δικό του σχετικό χρόνο και διάρκεια. Η μέθοδος addKeyframe(withRelativeStartTime:relativeDuration:) δέχεται χρονικές τιμές από 0 έως 1 σε σχέση με τη συνολική διάρκεια κίνησης.

Οι κινήσεις keyframe είναι χρήσιμες για εφέ πολλαπλών βημάτων: παλμός κουμπιού (μεγέθυνση → παύση → επιστροφή), διαδοχική εμφάνιση στοιχείων, σύνθετες παραμορφώσεις με ενδιάμεσες καταστάσεις. Κάθε keyframe μπορεί να έχει τη δική του καμπύλη κίνησης μέσω options.

// Keyframe κίνηση με σύνθετη ακολουθία
func complexPulse() {
    UIView.animateKeyframes(withDuration: 2.0, delay: 0, options: [.repeat]) {
        UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.25) {
            self.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
            self.alpha = 0.5
        }
        UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.25) {
            self.transform = CGAffineTransform(scaleX: 0.8, y: 0.8)
            self.alpha = 0.8
        }
        UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5) {
            self.transform = .identity
            self.alpha = 1.0
        }
    }
}

// Κίνηση με ένθετα κλεισίματα
func animateCardTransition() {
    UIView.animate(withDuration: 0.4, delay: 0, options: [.curveEaseOut]) {
        self.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
    } completion: { _ in
        UIView.animate(withDuration: 0.3, delay: 0, options: [.curveEaseIn]) {
            self.transform = .identity
        }
    }
}

Εσωτερική δομή: Core Animation κάτω από το καπό

Κάτω από το καπό, το UIView.animate αναθέτει την κίνηση στο CALayer κάθε UIView μέσω Core Animation (CAAnimation). Όταν αλλάζετε το frame μέσα στο μπλοκ κίνησης, το σύστημα δημιουργεί CABasicAnimation για τις ιδιότητες position και bounds του αντίστοιχου στρώματος. Εάν αλλάξει το alpha — CABasicAnimation για την ιδιότητα opacity του στρώματος.

Το Core Animation χρησιμοποιεί μια ξεχωριστή διεργασία render server (backboardd στο iOS) που επεξεργάζεται κινήσεις σε συχνότητα 120 Hz (ProMotion). Το UIView.animate δεν μπλοκάρει το κύριο νήμα — οι αλλαγές ιδιοτήτων αποστέλλονται στον render server, ο οποίος παρεμβάλλει καρέ χωρίς τη συμμετοχή της εφαρμογής.

Σύμφωνα με την Apple, οι κινήσεις μέσω UIView.animate έχουν επιβάρυνση ~2-3% CPU ανά αλλαγμένο στρώμα στα 60 FPS. Για μαζικές κινήσεις (20+ αντικείμενα ταυτόχρονα) συνιστάται η χρήση CATransaction και χειροκίνητη διαχείριση στρωμάτων.

Για τον εντοπισμό σφαλμάτων και την οπτικοποίηση κινήσεων UIKit, χρησιμοποιήστε το Xcode Debug View Hierarchy — εμφανίζει ενεργά CAAnimations σε κάθε στρώμα, τη διάρκειά τους, την καμπύλη και την τρέχουσα κατάσταση. Η κατανόηση της εσωτερικής δομής του Core Animation βοηθά στην αποφυγή προβλημάτων απόδοσης σε σύνθετες κινήσεις και στην επιλογή της βέλτιστης προσέγγισης μεταξύ UIView.animate και άμεσης χρήσης CABasicAnimation.