Καλύτερα κινούμενα σχέδια iOS με συναλλαγή CAT

Το Core Animation, το κακάο που είναι υπεύθυνο για τα περισσότερα animations iOS και macOS, είναι ένα πολύπλοκο σύστημα με πολλές κρυφές και λιγότερο γνωστές λειτουργίες.

Το Core Animation χειρίζεται τα κινούμενα γραφικά σας πίσω από τις σκηνές και γνωρίζοντας λίγο περισσότερο το πώς λειτουργεί, μπορούμε να το εκμεταλλευτούμε πλήρως και να δημιουργήσουμε κιτρινωπά animations.

Οι κινούμενες εικόνες είναι εύκολες. Εκτός από όταν δεν είναι.
BetterAnimations.playground

Οι κινούμενες εικόνες αποτελούν τον καλύτερο τρόπο εμφάνισης αλλαγής σε χρήστη. Το UIKit της Apple (ή το AppKit για macOS) κάνει ένα άλμα σε animations. Έχετε χρησιμοποιήσει πιθανώς το UIKit για τις περισσότερες από τις συναντήσεις σας με κινούμενα σχέδια και ο κώδικας μοιάζει πιθανώς κάτι τέτοιο:

Είναι καθαρό και εύκολο στη χρήση. Τα πλαίσια UIKit / AppKit υψηλότερου επιπέδου (που βρίσκονται πάνω από το Core Animation) κάνουν εξαιρετική δουλειά να κάνουν τα κινούμενα σχέδια εύκολα. Ωστόσο, υπάρχουν κάποιες παγίδες όταν θέλετε πιο πολύπλοκες κινήσεις.

Παράδειγμα κινούμενης εικόνας

Σκεφτείτε το εξής: έχετε UIButton, έναν απόγονο της UIView, και θέλετε να το κάνετε μια κυκλική προβολή, και όταν πιέσετε θα αλλάξει το μέγεθος της προβολής.

Ηχεί απλά. Μπορούμε να ζωντανέψουμε το styledButton.layer.cornerRadius και να το ορίσουμε στο μισό πλάτος καθώς αλλάζει το πλαίσιο μας. Αλλά περιμένετε ... υπάρχει ένα πρόβλημα. Το UIView.animate (...) θα χειριστεί μόνο τις κινήσεις ιδιοτήτων των προβολών, όχι τα κινούμενα σχέδια ιδιοτήτων στρώματος. Εάν προσπαθήσαμε να αλλάξουμε το πλαίσιο του στυλ του κουμπιού και το cornerRadius του styledButton στο μπλοκ κινούμενων εικόνων παρακάτω, έχουμε ένα ανεπιθύμητο αποτέλεσμα:

Αποτέλεσμα του τμήματος κώδικα

Το πλαίσιο κινείται σωστά, ωστόσο το cornerRadius μεταπηδά κατευθείαν στη νέα του τιμή χωρίς να κινούμαστε. Αργότερα θα μιλήσουμε για τη συναλλαγή CAT και πώς θα λύσει αυτό το ζήτημα. Αλλά πρώτα, είναι καλό να γνωρίζουμε τι συμβαίνει κάτω από την κουκούλα των κινούμενων σχεδίων μας και γιατί συμβαίνει αυτό.

Μέσα στο Core Animation

Οι παράμετροι UIView (καθώς και οι επεκτάσεις NSView που υποστηρίζονται από το στρώμα) έχουν μια ιδιότητα CALayer που ονομάζεται στρώμα στο οποίο λειτουργούν τα κινούμενα σχέδια. Η άποψη μεταβιβάζει την απόδοση των επιπέδων τους σε Core Animation. Ωστόσο, όταν προστίθενται κινούμενες εικόνες στο επίπεδο, οι ιδιότητες του στρώματος δεν τροποποιούνται άμεσα.

Το Core Animation διατηρεί δύο παράλληλες ιεραρχίες δέντρων: ένα δομικό στρώμα μοντέλου και ένα δέντρο στρώματος παρουσίασης. Αυτά μπορούν να φανούν στην ιδιότητα παρουσίασης του CALayerLayer και modelLayer. Είναι η παρουσίασηLayer που είναι υπεύθυνη για την εμφάνιση οποιασδήποτε αλλαγής κατά τη διάρκεια μιας κινούμενης εικόνας. Εάν θέλετε να ζωντανέψετε την ιδιότητα borderwidth ενός στρώματος και να παρατηρήσετε την τιμή κατά τη διάρκεια της κινούμενης εικόνας, η τιμή borderWidth θα αλλάξει μόνο στο δέντρο του στρώματος παρουσίασης κατά τη διάρκεια της κινούμενης εικόνας.

Μέσω του CABasicAnimation μπορούμε να εμψυχώσουμε τις ιδιότητες στρώματος. Αλλά μην αφήνετε τη λέξη "Basic" να σας αποθαρρύνει - αυτό είναι ένα από τα πιο ισχυρά εργαλεία κινούμενων σχεδίων για την ωραία μικροαλλαγές των κινούμενων εικόνων σας.

Μια πρακτική σημείωση: Είναι μια καλή πρακτική κινούμενων σχεδίων για να ορίσετε την αξία που κινείστε με τη νέα τιμή πριν προσθέσετε την κινούμενη εικόνα. Είναι σύνηθες να βλέπετε την ιδιότητα fillMode που έχει οριστεί σε kCAFillModeForwards και isRemovedOnCompletion να είναι ψευδής. Ωστόσο, αυτό που κάνει αυτό είναι ουσιαστικά "παύση" το στρώμα παρουσίασης στο τέλος της κινούμενης εικόνας. Είναι καλή πρακτική να κρατάτε συγχρονισμένα τα μοντέλα και τα επίπεδα παρουσίασης και ρυθμίζοντας την τιμή πριν προσθέσετε την κινούμενη εικόνα, μπορούμε να κάνουμε ακριβώς αυτό.

Συναλλαγή CAT - Για να εξομαλύνετε τις κινήσεις σας

Εντάξει. Επιστροφή στο παράδειγμα UIButton από το νωρίτερο. Θέλουμε να ζωντανέψει την ιδιότητα cornerRadius του στρώματος και να ζωντανέψει την ιδιότητα πλαισίου της προβολής ταυτόχρονα και να εξασφαλίσει ότι θα παραμείνει τέλεια σε συγχρονισμό για την καλύτερη κίνηση.

ΣΥΝΑΡΤΗΣΗ στη διάσωση!

Η συναλλαγή CAT είναι μια τάξη που συχνά παραβλέπεται από τους περισσότερους προγραμματιστές. Η δουλειά της CATransaction είναι να ομαδοποιήσει πολλές δράσεις σχετικές με την κίνηση. Εξασφαλίζει ότι οι επιθυμητές αλλαγές κινούμενων εικόνων δεσμεύονται ταυτόχρονα με το Core Animation.

Εδώ ξεκινάμε μια συναλλαγή και μπορούμε να αλλάξουμε τις ιδιότητες με ενεργοποιημένη την Core Animation, οι οποίες θα κινούνται μαζί με την άλλη όταν έχουν δεσμευτεί.

Κάνοντας όλοι μαζί

Έτσι, θέλουμε να ζωντανέψουμε ταυτόχρονα τις ιδιότητες στρώσης και προβολής. Αυτή είναι μια τέλεια χρήση για τη διαμετακόμιση CAT. Μπορούμε ακόμη να χρησιμοποιήσουμε τον υπάρχοντα κώδικα UIView.animate () και CABasicAnimation!

Η προκύπτουσα κίνηση

Σε αυτό το παράδειγμα, χρησιμοποιώ τόσο animation UIView όσο και CABasicAnimation για να ολοκληρώσω αυτή την εργασία. Οτιδήποτε συντονίζεται από τη συναλλαγή CAT θα μεταβιβαστεί σε άλλα κινούμενα σχέδια. Για παράδειγμα, η συνάρτηση setAnimationDuration (dur: CFTimeInterval) θα εφαρμοστεί στην CABasicAnimation, έτσι δεν χρειάζεται να καθορίσουμε οποιαδήποτε διάρκεια. Ωστόσο, δεδομένου ότι το UIView.animate () μας κάνει να προσδιορίσουμε τη διάρκεια, μπορούμε απλά να ορίσουμε τη διάρκεια με την ίδια διάρκεια που καθορίζεται στο setAnimationDuration της CAT συναλλαγής.

Προσαρμοσμένες ζωγραφιές βασικών καρέ

Μια άλλη τακτοποιημένη χρήση είναι να χρησιμοποιήσετε τη λειτουργία χρονισμού της CATransaction για να ορίσετε τη δική σας καμπύλη animation bezier. Εάν τυλίξετε το UIView.animate () σας μέσα σε μια συναλλαγή CAT μπορείτε να αποκτήσετε ακριβή έλεγχο της καμπύλης του animation σας:

Τελική κίνηση με λειτουργία χρονισμού

Περίληψη

Η συναλλαγή CAT είναι ένας ισχυρός συντονιστής για τα κινούμενα σχέδια σας και θα σας εξοικονομήσει τόνο χρόνου ενώ παράλληλα θα σας δώσει ακριβή έλεγχο των κινούμενων εικόνων σας. Επιπλέον, δεν είναι μια δέσμη των ένθετων μπλοκ - που είναι πάντα μια αναγνωσιμότητα συν.

Το πλήρες έργο παιδικής χαράς Swift 3, χρησιμοποιώντας την υπηρεσία CAT Transaction μαζί με το UIKit και το CABasicAnimation, μπορείτε να βρείτε εδώ:

Ευχαριστώ για την ανάγνωση! Εάν έχετε ερωτήσεις ή προτάσεις - μην διστάσετε να επικοινωνήσετε μαζί μας!