Τι είναι οι κινούμενες εικόνες στο UIKit;

Οι κινούμενες εικόνες στο UIKit είναι οπτικές αλλαγές στις ιδιότητες των στοιχείων του UI (π.χ., θέση, μέγεθος, χρώμα, διαφάνεια) με την πάροδο του χρόνου, δημιουργώντας την ψευδαίσθηση κίνησης και δυναμικής.

Οι βασικοί τρόποι υλοποίησης κινούμενων εικόνων στο UIKit:

1. UIView.animate(withDuration:animations:): Ο πιο απλός τρόπος για να κινούνται οι τυπικές ιδιότητες του UIView.

   // Κινούμενη αλλαγή κέντρου και διαφάνειας του UIView
   UIView.animate(withDuration: 0.5) {
       myView.center = newCenter
       myView.alpha = 0.0
   }
   

2. UIView.animate(withDuration:delay:options:animations:completion:): Πιο ευέλικτη μέθοδος με παραμέτρους καθυστέρησης, καμπύλης κινούμενης εικόνας και μπλοκ ολοκλήρωσης.

   // Κινούμενη εικόνα με καθυστέρηση και επιλογή επανάληψης
   UIView.animate(withDuration: 0.8, delay: 0.2, options: [.repeat, .autoreverse]) {
       myView.backgroundColor = .red
   } completion: { finished in
       // Ενέργειες μετά το τέλος (αν δεν επαναλαμβάνεται ατέρμονα)
   }
   

3. Βασικές επιλογές κινούμενης εικόνας (UIView.AnimationOptions):

   • .curveEaseInOut
   • .curveEaseIn
   • .curveEaseOut
   • .curveLinear
   • .repeat
   • .autoreverse
   • .allowUserInteraction

4. Κινούμενες εικόνες βασισμένες σε constraints: Κινούμενη αλλαγή constraints με layoutIfNeeded().

   // Αλλαγή constraint
   myViewHeightConstraint.constant = 200
   
   // Κινούμενη αλλαγή διάταξης
   UIView.animate(withDuration: 0.3) {
       self.view.layoutIfNeeded()
   }
   

5. Μεταβάσεις μεταξύ προβολών: Μεταβάσεις μεταξύ διαφορετικών προβολών (transition(from:to:duration:options:completion:)) ή μέσα σε κοντέινερ.

   // Παράδειγμα με μετάβαση
   UIView.transition(from: oldView, to: newView, duration: 0.5, options: [.transitionFlipFromLeft]) { finished in
       // Ενέργειες μετά τη μετάβαση
   }
   

6. Core Animation (CALayer): Πιο χαμηλού επιπέδου και ισχυρό πλαίσιο για κινούμενες εικόνες στρωμάτων. Επιτρέπει την κινούμενη εικόνα ιδιοτήτων CALayer (π.χ., position, bounds, opacity, μετασχηματισμοί).

   // Απλή κινούμενη εικόνα αλλαγής opacity του CALayer
   let animation = CABasicAnimation(keyPath: "opacity")
   animation.fromValue = 1.0
   animation.toValue = 0.0
   animation.duration = 1.0
   myView.layer.add(animation, forKey: "fadeAnimation")
   

7. Κινούμενες εικόνες με χρήση UIStackView: Αυτόματη κινούμενη εικόνα αλλαγών στη διάταξη των στοιχείων.

   // Προσθήκη προβολής σε UIStackView με κινούμενη εικόνα
   UIView.animate(withDuration: 0.3) {
       stackView.addArrangedSubview(newView)
       stackView.layoutIfNeeded()
   }
   

Η χρήση των κινούμενων εικόνων βελτιώνει την εμπειρία χρήστη, καθιστά την εφαρμογή πιο διαδραστική και διαισθητική.