⁇ του έργου iOS σας για αφήγηση

Πριν από τη συγγραφή μιας ενιαίας γραμμής κώδικα κινουμένων σχεδίων, χρειάζεστε ένα στερεό θεμέλιο. Εκκίνηση Xcode (έκδοση 15 ή αργότερα συνιστάται) και να δημιουργήσετε ένα νέο App project. Επιλέξτε Swift ως γλώσσα και UIKit για τη διασύνδεση. Ονόμασε το έργο σου και να εξασφαλίσεις ότι θα στοχεύσεις iOS 16.0 ή αργότερα για να έχεις πρόσβαση στα τελευταία API κινουμένων σχεδίων.

Μέσα στο έργο, οργανώστε τα αρχεία σας σε ομάδες: Μοντέλα (για δεδομένα ιστορίας), Προβολές (για προσαρμοσμένα συστατικά UI), Ελεγκτές (για ελεγκτές προβολής), και Βοηθητικά (για βοηθούς και επεκτάσεις).

Προσθέστε ένα Main.storyboard ή επιλέξτε μια προγραμματική προσέγγιση χρησιμοποιώντας ] υποκλάσεις. Για ευελιξία, πολλοί προγραμματιστές προτιμούν πίνακες ιστοριών για γρήγορο πρωτοτυπικό και στη συνέχεια μετάβαση στον κώδικα για λεπτό ⁇ κοκκο έλεγχο.

Σχεδιασμός της διεπαφής αφήγησης

Η διεπαφή χρήστη πρέπει να είναι καθαρή, ελάχιστη και εστιασμένη στην αφήγηση. Χρησιμοποιήστε ένα [[LFT:1] για μεγάλα χωρία κειμένου, ένα [[LPT:2]] για εικονογραφήσεις και [[LFT:3]] για επιλογές διακλάδωσης. Σκεφτείτε να χρησιμοποιήσετε [[LFT:0]]UIStackView[[LFT:1]] για να ευθυγραμμίσετε αυτά τα στοιχεία δυναμικά σε διαφορετικά μεγέθη οθόνης.

Διάταξη κειμένου ιστορίας

με και για να αποτραπεί η τυχαία επεξεργασία. Ενεργοποιήστε [[LFT:7]] με τηλεειδοποίηση μόνο αν η ιστορία αποκαλύπτει σελίδα προς σελίδα. Για απρόσκοπτο αυτόματο ⁇ ενδοιωσιακό κείμενο, χρησιμοποιήστε [[LFT:8]] μέσα σε [[LFT:9]] για ομαλότερες ⁇ αλλά πιο προηγμένες ⁇ τυπογραφικές κινούμενες εικόνες.

Προβολές εικόνων και χαρακτήρων

Τοποθετήστε εικόνες χαρακτήρων ή εικόνες φόντου σε αφιερωμένες υποεπισκοπές. Ορίστε [[LFT:11]]] και κλιπ σε όρια. Για εφέ παράλλαξης ή λεπτή κίνηση, εφαρμόστε ένα [[LFT:12]] στην προβολή εικόνας ⁇ αυτό δίνει μια αίσθηση βάθους χωρίς προσαρμοσμένο κώδικα κινουμένων σχεδίων.

Κουμπιά επιλογής

Οι επιλογές κατακλυσμού είναι η καρδιά της διαδραστικής αφήγησης. Θέση δύο ή περισσότερα κουμπιά στο κάτω μέρος της οθόνης. Χρησιμοποιήστε [[LFT:13]] με [[LFT:14]] και χρώματα απόχρωσης που αντανακλούν τη διάθεση ⁇ ζεστούς τόνους για φιλικές επιλογές, δροσερούς τόνους για μυστηριώδεις διαδρομές. Συνδέστε το γεγονός του κάθε κουμπιού [[LFT:15]] σε ένα [[LFT:16]] που ενημερώνει την κατάσταση της ιστορίας και ενεργοποιεί αντίστοιχες κινούμενες εικόνες.

Αρχιτεκτονική των δεδομένων ιστορίας

Αποθήκευση της ιστορίας σας σε ένα δομημένο μοντέλο. Δημιουργήστε μια τάξη που περιέχει ένα αναγνωριστικό, κείμενο, όνομα εικόνας, και μια σειρά από αντικείμενα:

class StoryNode {
 let id: String
 let text: String
 let imageName: String?
 let choices: [Choice]
 var animationType: AnimationType = .slideIn
}
struct Choice {
 let title: String
 let destinationId: String
}

Φόρτωση δεδομένων ιστοριών από ένα αρχείο JSON ή μια τοπική βάση δεδομένων (π.χ., Core Data ή Realm). Κρατώντας τα δεδομένα χωριστά από τη λογική προβολής καθιστά εύκολη την προσθήκη νέων κλάδων χωρίς να αγγίζετε τον κώδικα.

Κρατική διαχείριση

Διατηρήστε ένα λεξικό για να παρακολουθείτε τις αποφάσεις των χρηστών, την απογραφή ή τις σημαίες. Αυτό επιτρέπει την υπό όρους διακλάδωση αργότερα. Για παράδειγμα, αν ο χρήστης είχε προηγουμένως σώσει έναν χαρακτήρα, η ιστορία μπορεί να ξεκλειδώσει μια κρυφή διαδρομή. Ενημερώστε την κατάσταση σε απάντηση σε κάθε επιλογή και περάστε την στην επόμενη .

Εφαρμογή προσαρμοσμένων κινουμένων σχεδίων

Οι κινούμενες εικόνες μετατρέπουν μια στατική ιστορία σε μια εμβιωτική εμπειρία. Το UIKit παρέχει αρκετούς ενσωματωμένους μηχανισμούς.

Βασικές κινούμενες εικόνες UIView

Χρήση για τις περισσότερες μεταβάσεις. Για παράδειγμα, ολίσθηση σε έναν χαρακτήρα:

UIView.animate(withDuration: 0.8, delay: 0.2, usingSpringWithDamping: 0.7, initialSpringVelocity: 0.5, options: .curveEaseInOut, animations: {
 characterImageView.center.x = self.view.center.x
}, completion: nil)

Οι ανοιξιάτικες κινούμενες εικόνες αισθάνονται φυσικές και είναι ιδανικές για εισόδους χαρακτήρων ή αποκαλύψεις κειμένου.

Βασική κίνηση με CALayer

Για πιο σύνθετα εφέ όπως το cascading κείμενο ή τα λαμπερά στοιχεία, συνεργαστείτε άμεσα με [[LFT:24]]] και [[LFT:25]]. Δημιουργήστε ένα ξεθώριασμα ⁇ σε κινούμενα σχέδια για την αύρα ενός χαρακτήρα κλειδιού:

let fadeIn = CABasicAnimation(keyPath: "opacity")
fadeIn.fromValue = 0.0
fadeIn.toValue = 1.0
fadeIn.duration = 2.0
characterLayer.add(fadeIn, forKey: "fadeIn")

Συνδυάστε πολλαπλές κινούμενες εικόνες σε ένα για να περιστραφεί, κλίμακα, και να ξεθωριάσουν ταυτόχρονα.

Κινήσεις πλαισίου κλειδιών για διαδρομές

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

let path = UIBezierPath()
path.move(to: startPoint)
path.addCurve(to: endPoint, controlPoint1: cp1, controlPoint2: cp2)
let pathAnimation = CAKeyframeAnimation(keyPath: "position")
pathAnimation.path = path.cgPath
pathAnimation.duration = 3.0

Αυτή η τεχνική λειτουργεί όμορφα για διακοσμητικά στοιχεία που ενισχύουν την ατμόσφαιρα.

Κείμενο ⁇ Ειδικές κινούμενες εικόνες

Ένα γράμμα εμφάνισης κειμένου ⁇ με ⁇ γράμμα που χρησιμοποιεί ] και ένα χρονόμετρο. Εναλλακτικά, εφαρμόστε με (iOS 17+) για ένα εφέ γραφομηχανής. Συνδυάστε με μια λεπτή κλίμακα ή θολούρα για δραματικές αποκαλύψεις.

Μεταβατικές Κινήσεις Μεταξύ Σκηνών

Όταν μετακινείστε από το ένα κόμβο ιστορία στο επόμενο, χρησιμοποιήστε προσαρμοσμένες μεταβάσεις ελεγκτή προβολής. Συμμορφωθείτε σε [[LPT:34]] για να ορίσετε ένα push ⁇ σε ισχύ για τις προσωπικές στιγμές ή μια σελίδα ⁇ curl για την στροφή μιας σελίδας. Αυτό είναι περισσότερο γυαλισμένο από ένα απλό παρόν / απόρριψη.

Προσθήκη διαδραστικών στοιχείων

Πέρα από τα κουμπιά, ενσωματώστε χειρονομίες για να εμβαθύνετε την αλληλεπίδραση. Οι χειρονομίες Swipe μπορούν να προωθήσουν την ιστορία ή να αποκαλύψουν κρυμμένα αντικείμενα. Το Long ⁇ press θα μπορούσε να επιθεωρήσει ένα αντικείμενο. Προσθέστε [[LFT:35]] σε έναν χαρακτήρα που επιτρέπει το σύρσιμο ⁇ και να ζωντανέψει τον χαρακτήρα πίσω στην αρχική του θέση αν πέσει έξω από μια περιοχή-στόχο.

Ήχος και Απτική Ανατροφοδότηση

Ζευγάρι κινούμενα σχέδια με ήχο που χρησιμοποιούν [[LFT:36]]]. Τριγύρνα απτική ανάδραση μέσω [[LPT:37]] όταν πατιέται ένα κουμπί ή εμφανίζεται ένα κρίσιμο story beat. Αυτή η πολυαισθητική προσέγγιση αυξάνει σημαντικά την εμβάπτιση.

Δυναμικός τύπος και δυνατότητα πρόσβασης

Υποστήριξη Dynamic Type χρησιμοποιώντας προτιμώμενες γραμματοσειρές ([[[LFT:38]]]) με κλίμακα γραμματοσειρών. Βεβαιωθείτε ότι όλα τα διαδραστικά στοιχεία έχουν ετικέτες προσβασιμότητας. Χρησιμοποιήστε [[LFT:39]] για να ανακοινώσετε αλλαγές ιστορίας στους χρήστες VoiceOver.

Βελτιστοποίηση απόδοσης

Τα ομαλά κινούμενα σχέδια είναι κρίσιμα, οι σταγόνες καρέ σπάνε την εμβάπτιση. Προφίλ της εφαρμογής σας με τα όργανα Xcode (εργαλείο κινουμένων σχεδίων Core).

  • Υπερανάληψη: Αποφύγετε τη ρύθμιση [[LFT:40]] σε στρώματα που είναι πλήρως αδιαφανή.
  • Αποτύπωση εκτός οθόνης: Ελαχιστοποιήστε τη χρήση [[LFT:41]] και [[LFT:42]] σε μεγάλες εικόνες. Αντ 'αυτού, προ-μάσκετε την εικόνα σε κώδικα ή χρησιμοποιήστε μια προβολή δοχείου.
  • Μεγάλες διαστάσεις εικόνας: Κατεβάστε τις εικόνες για να εμφανίσετε το μέγεθος. Χρησιμοποιήστε [[LFT:43]] με κατάλληλες λειτουργίες απόδοσης.

Ορίστε την παράμετρο επιλογών στην οπότε οι πινελιές παραμένουν ανταποκρίσιμες κατά τη διάρκεια κινουμένων σχεδίων.

Δοκιμή σε πραγματικές συσκευές

Ο Προσομοιωτής iOS δεν αναπαράγει την πραγματική ⁇ παγκόσμια απόδοση. Δοκιμή σε πολλαπλές συσκευές, ειδικά παλαιότερα μοντέλα (iPhone 11 ή νωρίτερα). Δώστε προσοχή στην αποστράγγιση μπαταρίας ⁇ τα υπερβολικά κινούμενα σχέδια μπορούν να προκαλέσουν θερμότητα και χρήση μπαταρίας. Χρησιμοποιήστε [[LFT:46]] συνετά και προτιμήστε block ⁇ based animations over timer ⁇ led loops.

Γράψτε μονάδες δοκιμών για την ιστορία σας κατάσταση λογική και UI δοκιμές για τις κρίσιμες ροές των χρηστών. A / B τεστ διαφορετικές διάρκεια κινουμένων σχεδίων και στυλ με μια μικρή ομάδα χρηστών για να δείτε ποια αποδίδει υψηλότερη δέσμευση.

Έκδοση και διανομή

Όταν η εφαρμογή σας είναι γυαλισμένη, αρχειοθετήστε την σε Xcode και ανεβάστε στο App Store Connect. Προετοιμάστε στιγμιότυπα οθόνης που δείχνουν τα καλύτερα κινούμενα σχέδια σας. Γράψτε μια συναρπαστική περιγραφή δίνοντας έμφαση στη διαδραστική αφήγηση.

Για εξωτερικούς πόρους, συμβουλευτείτε τον επίσημο οδηγό της Apple ] τεκμηρίωσης της Animation and Haptics και Οδηγός κινουμένων σχεδίων της Apple. Για έμπνευση, εξερευνήστε [] το βιβλίο κινουμένων σχεδίων του Kodeco].

Συμπέρασμα

Η δημιουργία μιας διαδραστικής εφαρμογής αφήγησης για iOS με προσαρμοσμένες κινούμενες εικόνες είναι ένα ανταμείβοντας μείγμα αφηγηματικού σχεδιασμού και τεχνικής δεξιότητας. Με τη διάρθρωση των δεδομένων της ιστορίας σας, την επιλογή των σωστών τεχνικών κινουμένων σχεδίων και την αυστηρή δοκιμή απόδοσης, μπορείτε να δημιουργήσετε μια εφαρμογή που αιχμαλωτίζει πραγματικά τους χρήστες. Ξεκινήστε με μικρές αλληλεπιδράσεις ⁇ μια διαφάνεια, μια ξεθωριαστή, μια βρύση ⁇ τότε η πολυπλοκότητα του στρώματος μέχρι να αισθανθεί ζωντανή ο κόσμος της ιστορίας σας.

Ο συνδυασμός του στοχαστικό σχεδιασμό, καθαρό κώδικα, και γυαλισμένα κινούμενα σχέδια θα θέσει την εφαρμογή αφήγηση ιστορία σας χωριστά σε μια πολυσύχναστη αγορά. Τώρα ανοίξτε Xcode και να φέρει το πρώτο σας κινούμενο χαρακτήρα στην οθόνη.