CAAnimation — βασικές έννοιες, CAAnimationGroup και κινούμενα σχέδια επιπέδων

Τι είναι το CAAnimation;

CAAnimation — αφηρημένη κλάση Core Animation που ορίζει μια κοινή διεπαφή για όλα τα κινούμενα σχέδια. Υλοποιεί το πρωτόκολλο CAMediaTiming (χρόνος, επανάληψη, αυτόματη επιστροφή) και CAMediaTimingFillMode (συμπεριφορά πριν/μετά το κινούμενο σχέδιο). Το CAAnimation δεν μπορεί να δημιουργηθεί άμεσα — χρησιμοποιήστε μία από τις υποκλάσεις: CABasicAnimation, CAKeyframeAnimation, CAAnimationGroup, CATransition ή CAAnimation (μέσω animationForKeyPath).

Κάθε CAAnimation προστίθεται στο CALayer μέσω της μεθόδου add(_:forKey:). Η παράμετρος forKey είναι ένα μοναδικό αναγνωριστικό του κινουμένου σχεδίου στο επίπεδο. Το ίδιο keyPath μπορεί να έχει μόνο ένα ενεργό κινούμενο σχέδιο. Για να αντικαταστήσετε ένα κινούμενο σχέδιο, χρησιμοποιήστε το removeAnimation(forKey:) πριν προσθέσετε ένα νέο.

Σύμφωνα με την Apple, το CAAnimation είναι μια προσωρινή αλλαγή του επιπέδου. Μετά την ολοκλήρωση του κινουμένου σχεδίου, το presentation layer επιστρέφει στις τιμές του model layer, εάν δεν έχουν οριστεί fillMode και isRemovedOnCompletion.

Ιεραρχία κλάσεων CAAnimation

Το Core Animation παρέχει τέσσερις κύριες υποκλάσεις CAAnimation, η καθεμία για το δικό της σενάριο κινουμένου σχεδίου. Η κατανόηση της ιεραρχίας βοηθά στην επιλογή του σωστού τύπου για την εργασία.

CABasicAnimation — η απλούστερη και πιο δημοφιλής υποκλάση. Το CAKeyframeAnimation χρησιμοποιείται για σύνθετες τροχιές (π.χ. κίνηση κατά μήκος καμπύλης Bézier). Το CAAnimationGroup εκτελεί πολλά κινούμενα σχέδια παράλληλα. CATransition — έτοιμη μετάβαση μεταξύ εικόνων ή καταστάσεων περιεχομένου.

CAMediaTiming — διαχείριση χρόνου

Το πρωτόκολλο CAMediaTiming — θεμελιώδες μέρος του CAAnimation. Καθορίζει τις βασικές χρονικές ιδιότητες: duration (διάρκεια), repeatCount (αριθμός επαναλήψεων), repeatDuration (συνολική διάρκεια επαναλήψεων), autoreverses (επιστροφή στην αρχή), beginTime (χρόνος έναρξης σε σχέση με τον γονέα), timeOffset (μετατόπιση εντός ενός κύκλου), speed (ταχύτητα αναπαραγωγής).

Η ιδιότητα fillMode (CAMediaTimingFillMode) καθορίζει την εμφάνιση του επιπέδου πριν (backwards) και μετά (forwards) το κινούμενο σχέδιο. Τιμές: removed (προεπιλογή — επιστροφή στο model layer), forwards (παραμένει στην τελική κατάσταση), backwards (εμφανίζει την αρχική κατάσταση πριν από την έναρξη), both (συνδυάζει και τις δύο συμπεριφορές). Το fillMode λειτουργεί μόνο με isRemovedOnCompletion = false.

Το CAAnimation κληρονομεί το CAMediaTiming και μπορεί να ενσωματωθεί σε ένα γονικό κινούμενο σχέδιο (CAAnimationGroup). Σε αυτήν την περίπτωση, το beginTime υπολογίζεται σε σχέση με την έναρξη του γονέα και το duration περιορίζεται από τον γονέα. Speed = 2.0 επιταχύνει το κινούμενο σχέδιο δύο φορές.

CAAnimationGroup και CAKeyframeAnimation

CAAnimationGroup συνδυάζει πολλά CAAnimation σε μία ομάδα. Όλα τα θυγατρικά κινούμενα σχέδια ξεκινούν παράλληλα, εάν δεν έχει οριστεί beginTime για το καθένα. Η ομάδα έχει το δικό της duration που περιορίζει τη μέγιστη διάρκεια των θυγατρικών κινουμένων σχεδίων. Το timingFunction της ομάδας εφαρμόζεται ως προεπιλεγμένη τιμή εάν το θυγατρικό κινούμενο σχέδιο δεν έχει ορίσει το δικό της.

CAKeyframeAnimation δημιουργεί κινούμενο σχέδιο μιας ιδιότητας σε πολλαπλά βασικά καρέ που ορίζονται από τον πίνακα values. Η παράμετρος keyTimes (πίνακας NSNumber από 0 έως 1) καθορίζει τις χρονικές σφραγίδες για κάθε καρέ. Το calculationMode καθορίζει την παρεμβολή: linear, discrete (χωρίς παρεμβολή), paced (ομοιόμορφη ταχύτητα), cubic (spline), cubicPaced.

import QuartzCore

// CAAnimationGroup — συνδυασμός κινουμένων σχεδίων
func complexLayerAnimation(_ layer: CALayer) {
    let fade = CABasicAnimation(keyPath: "opacity")
    fade.fromValue = 1.0
    fade.toValue = 0.3

    let scale = CABasicAnimation(keyPath: "transform.scale")
    scale.fromValue = 1.0
    scale.toValue = 1.5

    let rotate = CABasicAnimation(keyPath: "transform.rotation.z")
    rotate.fromValue = 0
    rotate.toValue = Double.pi * 2

    let group = CAAnimationGroup()
    group.animations = [fade, scale, rotate]
    group.duration = 2.0
    group.repeatCount = .infinity
    group.autoreverses = true

    layer.add(group, forKey: "pulse")
}

// CAKeyframeAnimation — κίνηση κατά μήκος τροχιάς
func animateAlongPath(_ layer: CALayer) {
    let path = UIBezierPath()
    path.move(to: CGPoint(x: 0, y: 0))
    path.addCurve(
        to: CGPoint(x: 200, y: 300),
        controlPoint1: CGPoint(x: 100, y: 0),
        controlPoint2: CGPoint(x: 100, y: 300)
    )

    let anim = CAKeyframeAnimation(keyPath: "position")
    anim.path = path.cgPath
    anim.duration = 1.5
    anim.calculationMode = .cubicPaced
    anim.rotationMode = .auto
    anim.fillMode = .forwards
    anim.isRemovedOnCompletion = false

    layer.add(anim, forKey: "pathAnim")
    layer.position = CGPoint(x: 200, y: 300)
}

// CAKeyframeAnimation με προσαρμοσμένες τιμές
func bounceAnimation(_ layer: CALayer) {
    let bounce = CAKeyframeAnimation(keyPath: "position.y")
    bounce.values = [0, -50, 0, -25, 0, -10, 0]
    bounce.keyTimes = [0, 0.15, 0.3, 0.45, 0.6, 0.8, 1.0]
    bounce.duration = 0.8
    bounce.timingFunction = CAMediaTimingFunction(name: .easeOut)
    bounce.isAdditive = true // σε σχέση με την τρέχουσα θέση
    layer.add(bounce, forKey: nil)
}

Το CAAnimationGroup εκτελεί fade, scale και rotate παράλληλα με duration 2.0. Το CAKeyframeAnimation με path και calculationMode = .cubicPaced παρέχει ομοιόμορφη κίνηση κατά μήκος καμπύλης Bézier με αυτόματη περιστροφή (rotationMode = .auto). Το bounceAnimation χρησιμοποιεί isAdditive για σχετική μετατόπιση.

Παραδείγματα κώδικα σε Swift

Πλήρες παράδειγμα CAAnimation για σύνθετο κινούμενο σχέδιο επιπέδου με χρήση CATransition για αλλαγή περιεχομένου και CAAnimationGroup για παλμό.

import UIKit
import QuartzCore

class AnimationDemoView: UIView {

    private let demoLayer = CALayer()
    private var currentColor: CGColor = UIColor.systemBlue.cgColor

    override func layoutSubviews() {
        super.layoutSubviews()
        demoLayer.frame = CGRect(x: bounds.midX - 40, y: bounds.midY - 40,
                                 width: 80, height: 80)
        demoLayer.backgroundColor = currentColor
        demoLayer.cornerRadius = 12
        layer.addSublayer(demoLayer)
    }

    func animateTransition() {
        // CATransition — μετάβαση μεταξύ καταστάσεων
        let transition = CATransition()
        transition.type = .fade
        transition.duration = 0.5
        transition.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
        demoLayer.add(transition, forKey: nil)

        // Αλλάζουμε περιεχόμενο μέσω συναλλαγής
        currentColor = currentColor == UIColor.systemBlue.cgColor
            ? UIColor.systemRed.cgColor
            : UIColor.systemBlue.cgColor
        demoLayer.backgroundColor = currentColor
    }

    func startPulse() {
        let scaleUp = CABasicAnimation(keyPath: "transform.scale")
        scaleUp.fromValue = 1.0
        scaleUp.toValue = 1.3

        let fadeOut = CABasicAnimation(keyPath: "opacity")
        fadeOut.fromValue = 1.0
        fadeOut.toValue = 0.6

        let glow = CABasicAnimation(keyPath: "shadowOpacity")
        glow.fromValue = 0.0
        glow.toValue = 0.8

        let group = CAAnimationGroup()
        group.animations = [scaleUp, fadeOut, glow]
        group.duration = 1.2
        group.autoreverses = true
        group.repeatCount = .infinity
        group.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)

        demoLayer.add(group, forKey: "pulse")
    }

    func stopAnimations() {
        demoLayer.removeAllAnimations()
        demoLayer.transform = CATransform3DIdentity
        demoLayer.opacity = 1.0
        demoLayer.shadowOpacity = 0.0
    }
}

Το CATransition με type: .fade δημιουργεί μια ομαλή μετάβαση μεταξύ δύο καταστάσεων backgroundColor. Το CAAnimationGroup συνδυάζει scale, opacity και shadowOpacity για το εφέ παλμού. Η removeAllAnimations() επαναφέρει όλα τα κινούμενα σχέδια και επιστρέφει το επίπεδο στις αρχικές τιμές του model layer.