Τάξεις, βρόχοι και πίνακες σε Framer

Εντάξει, έτσι οι σχεδιαστές - ακούστε. Ο προγραμματισμός είναι φοβερός. Στην αρχή, αισθάνεται λίγο σαν τη μαγεία. Μόλις κατάλαβα πώς να οικοδομήσω τα δικά μου σχέδια σε κώδικα, αισθάνθηκα απίστευτα εξουσιοδοτημένος. Χάρη σε εργαλεία όπως ο Framer, οι πρωτοποριακές νέες αλληλεπιδράσεις είναι ευκολότερες από ποτέ. Αυτό μου δίνει ως σχεδιαστή τη δύναμη να δοκιμάσω γρήγορα πώς θα μπορούσε να λειτουργήσει μια σύνθετη αλληλεπίδραση, αντί να ξοδεύει πολύτιμο χρόνο με τους μηχανικούς, απλώς να δοκιμάσει μια ιδέα που δεν μπορούμε ποτέ να τρέξουμε.

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

Ναι.

Διαχείριση της πολυπλοκότητας

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

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

Έτσι, χωρίς περαιτέρω παραβίαση, εδώ είναι μερικές ιδέες που πραγματικά ήθελα να ήξερα όταν ξεκίνησα!

Μαθήματα

Οι προσαρμοσμένες τάξεις ήταν ένας χρόνος εξοικονόμησης χρόνου και ένα από τα σπουδαιότερα μου μαθήματα από το προηγούμενο έργο Framer. Βασικά, στο JavaScript (ή σε οποιαδήποτε άλλη γλώσσα προγραμματισμού με αντικείμενο το αντικείμενο, για αυτό το θέμα) μπορείτε να γράψετε τις δικές σας κλάσεις που είναι ουσιαστικά προκαθορισμένα συστατικά με ιδιότητες που μοιράζονται για κάθε εμφάνιση μιας κλάσης που δημιουργείτε. Αυτό είναι πολύ ισχυρό για τον Framer, επειδή κάθε στοιχείο είναι ήδη βασισμένο σε τάξεις, έτσι μπορείτε να πάρετε πράγματα όπως η Framer που έχει δημιουργήσει την κλάση Layer και να επεκτείνετε ώστε να περιλαμβάνει μια δέσμη των δικών σας προσαρμοσμένων αλληλεπιδράσεων, που μπορείτε στη συνέχεια να επαναχρησιμοποιήσετε ξανά και ξανά στο πρωτότυπο σας.

Χρησιμοποιώ προσαρμοσμένες κλάσεις στο Framer για τη μοντελοποίηση / σχεδίαση πιο σύνθετων στοιχείων διεπαφής. (δηλαδή μια προβολή λεπτομέρειας προϊόντος, μια κάρτα ή κάτι παρόμοιο με πολλά αντικείμενα, καταστάσεις, γεγονότα και όχι). Αυτό μου επιτρέπει να διαχειρίζομαι σωστά τη συνέπεια σε διάφορα μέρη ενός πρωτοτύπου, διότι μπορώ απλά να καλέσω τη νέα τάξη μου για να δημιουργήσω μια λεπτομέρεια να προβάλετε το πρότυπο και να τροποποιήσετε εύκολα την κλάση βάσης για να επαναλάβετε γρήγορα τα σχέδιά μου. Ας βουτήξουμε!

TLDR: Οι κλάσεις στο Framer σας επιτρέπουν να κάνετε επαναχρησιμοποιήσιμα στοιχεία διεπαφής που περιλαμβάνουν αλληλεπιδράσεις, καταστάσεις και κινούμενα σχέδια για τα πρωτότυπά σας.

Παράδειγμα 1: Κλάση με κατάσταση

http://share.framerjs.com/09cvzg0b5uxh/

Υπάρχει μια δέσμη funky πράγματα που συμβαίνουν σε αυτό το πρωτότυπο. Θα σπάσω τα τμήματα που δεν είναι τόσο προφανή, έτσι κατεβάστε τον πηγαίο κώδικα και πυρπολίστε Framer!

Φανταστείτε ότι κάνετε ένα πρωτότυπο ίσως μόνο μιας αλληλεπίδρασης. Ξοδεύετε λίγο χρόνο για να τελειοποιήσετε τους χρονοδιαγράμματα, τις θέσεις και όχι, να παρουσιάσετε τους ενδιαφερόμενους και να πάρετε κάτι τέτοιο σε αντάλλαγμα: "Αυτό φαίνεται και αισθάνεται μεγάλη. Αλλά μπορούμε να προσθέσουμε και αυτό το άλλο πράγμα στο πρωτότυπο; Αυτό θα ήταν πραγματικά σπουδαίο ".

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

Εισάγετε, τάξεις.

Οι κλάσεις σας βοηθούν να παραμείνετε οργανωμένοι όταν χτίζετε σύνθετα συστατικά στοιχεία διασύνδεσης, αφού τα πάντα συνδέονται μεταξύ τους. Όπως ανέφερα προηγουμένως, κάθε συστατικό που χρησιμοποιείται μέσα στο Framer βασίζεται στην τάξη, αυτό σημαίνει ότι είναι επεκτάσιμο - που σημαίνει ότι μπορείτε να αποκτήσετε όλη την υπέροχη σάλτσα που ενσωματώνει η ομάδα Framer για παράδειγμα στην τάξη Layer και στη συνέχεια προσθέστε τη δική σας κώδικα και σχεδίαση πάνω από αυτό!

Η βασική αρχή που χρησιμοποιείται σε αυτό το παράδειγμα είναι η επέκταση της κλάσης Layer που έχει ήδη δημιουργήσει η ομάδα Framer. Μπορούμε να το κάνουμε έτσι:

Class κάρτα επεκτείνει Layer
    κατασκευαστής: (επιλογές) ->
        options.width = 500
        options.height = 700
        options.backgroundColor = "# 28affa"
        σούπερ επιλογές

Στο παραπάνω παράδειγμα, έκανα ακριβώς αυτό. Όλα όσα έχει να κάνουν με αυτή την κάρτα είναι εντελώς μέσα στην κατηγορία των Καρτών, έτσι όπως ακριβώς θα προσθέσετε ένα νέο στρώμα, μπορώ τώρα να καλέσω τη νέα τάξη μου για να δημιουργήσω μια νέα κάρτα με το δικό μου σχεδιασμό χωρίς να χρειάζεται να αντιγράψω / επικολλήσω τρελά ποσά κώδικα, ξανά και ξανά! Μπορείτε να δημιουργήσετε μια νέα παρουσία της κλάσης σας, ακριβώς όπως θα δημιουργούσατε ένα νέο στρώμα ή οποιοδήποτε άλλο αντικείμενο. Σαν αυτό:

cardA = νέα κάρτα

Μέσα σε μια τάξη μπορείτε να κάνετε οτιδήποτε μπορείτε να φανταστείτε να κάνετε σε ένα κανονικό πρωτότυπο. Μπορείτε να προσθέσετε υπο-στρώματα, συμβάντα, καταστάσεις, if / else δηλώσεις κλπ. Είναι σχεδόν σαν ένα μίνι πρωτότυπο στο πρωτότυπο σας! Οι τάξεις πραγματικά λάμπουν όταν ξεκινάτε να κατασκευάζετε πολύ μεγάλα πρωτότυπα με πολλά διαφορετικά πράγματα που συμβαίνουν, ίσως ακόμη και με πραγματικά δεδομένα, σε αντίθεση με την απόδειξη μιας ενιαίας αλληλεπίδρασης.

Προσθέστε προσαρμοσμένες επιλογές

Τώρα, αυτό δεν θα ήταν τέλειο χωρίς τα νέα μας κάρτες να περιέχουν μερικά μοναδικά δεδομένα, σωστά; Αναρωτηθήκατε ποτέ πώς και γιατί οι ιδιότητες δημιουργούνται για ένα Layer όπως είναι; Είναι λίγο πολύ βασισμένο στην τάξη, μόνο με υψηλότερο επίπεδο πολυπλοκότητας. Αλλά δεν πρέπει να είναι! Μπορείτε να δημιουργήσετε τις δικές σας επιλογές που σας επιτρέπουν να προσθέσετε μια δέσμη νέων "λέξεων-κλειδιών" που μπορείτε να χρησιμοποιήσετε για την τάξη σας. Σε αυτή την περίπτωση, πρόσθεσα έναν τίτλο, που μου επιτρέπει να γράψω έναν προσαρμοσμένο τίτλο με κείμενο. Υπάρχει επίσης μια περιγραφή και ένα προσαρμοσμένο πεδίο φωτογραφιών όπου πηγαίνει η φωτογραφία εξώφυλλου για την κάρτα.

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

περιγραφή = νέο επίπεδο
  πλάτος: 425
  ύψος: 100
  html: options.description

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

cardA = νέα κάρτα
  τίτλος: "Η δροσερή μου προσαρμοσμένη κάρτα"
  περιγραφή: "Αυτή είναι η πρώτη προσαρμοσμένη συνιστώσα της κλάσης μου.
  φωτογραφία: "images / yourimage.png"

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

Βρόχους και πίνακες

"Όμως, το Øyvind, πρέπει να επαναλάβω πολλά πράγματα! Αυτό το κομμάτι-thingy-snippet απλώς επιτρέπει να αντιγράψω / επικολλήσω λιγότερο κώδικα τώρα! "

Μην ανησυχείτε. Δεν θα χρειαστεί, εδώ βγαίνουν τα Loops and Arrays. Ας δούμε το επόμενο παράδειγμα.

Παράδειγμα 2: Κάρτες που παράγονται με βρόχο με προσαρμοσμένα δεδομένα

http://share.framerjs.com/qukn2sbd85oi/

Πιάσε την πηγή: http://share.framerjs.com/qukn2sbd85oi/

Με βάση το παράδειγμα που είχαμε πριν, σε αυτό το παράδειγμα χρησιμοποιούμε ένα Loop για να δημιουργήσουμε μια δέσμη περιπτώσεων της Κάρτας που δημιουργήσαμε νωρίτερα.

Με λίγα λόγια, ένας βρόχος είναι ουσιαστικά ένα μπλοκ κώδικα που θα τρέξει ένα δεδομένο χρονικό διάστημα. Γενικά, μοιάζουν με κάτι τέτοιο:

για i στο [0..4]
    print "Αυτός ο κώδικας είναι βρόχος!"

Αυτός ο κώδικας θα τυπώσει το κείμενο "Αυτός ο κώδικας είναι βρόχος!" Πέντε φορές. Τώρα, αυτό μπορεί να είναι λίγο συγκεχυμένο επειδή δεν λέει στην πραγματικότητα πέντε (5) στη δήλωση βρόχου που γράψαμε, αλλά τέσσερις (4). Ο λόγος για τον οποίο εκτελείται ο κώδικας πέντε φορές είναι επειδή ο βρόχος μας αρχίζει να μετράει από το μηδέν (0) και όχι από ένα (1). Εάν θέλετε να κάνετε τον βρόχο σας λίγο πιο σημασιολογικό, μπορείτε να γράψετε κάτι τέτοιο:

για i στο [1..4]
    εκτυπώστε "Αυτός ο κώδικας θα κουμπώσει τέσσερις φορές!"

ή αυτό:

για i στο [0 ... 4]
    εκτυπώστε "Αυτός ο κώδικας θα κουμπώσει τέσσερις φορές!"

Έτσι, στην περίπτωσή μας, δημιουργούμε ένα παράδειγμα της Κάρτας μας όπως κανονικά, ακριβώς μέσα στο βρόχο αυτή τη φορά, έτσι ώστε ο βρόχος να κάνει όλη τη σκληρή δουλειά να κάνει πολλαπλά αντίγραφα αυτού για εμάς.

για i στο [0..4]
    layer = νέα κάρτα

Ρύθμιση της σειράς μας

Να θυμάστε ότι κάναμε κάποιες προσαρμοσμένες επιλογές για την τάξη μας νωρίτερα; Θα μπορούσαμε να έχουμε έναν προσαρμοσμένο τίτλο, μια περιγραφή και μια φωτογραφία εξώφυλλου;

Προτού μπορέσουμε να εισαγάγουμε τα δεδομένα στις κάρτες μας, πρέπει να το μοντελοποιήσουμε. Υπάρχει μια δέσμη διαφορετικών τρόπων που μπορείτε να το κάνετε αυτό, αλλά πρόκειται να καλύψω το πιο βασικό, το οποίο αποθηκεύει μόνο χειροκίνητα πληροφορίες σε συστοιχίες. Μια διάταξη είναι απλά ένα στοιχείο που περιέχει μια δέσμη διαφορετικών στοιχείων, όπως και άλλες μεταβλητές, συμβολοσειρές, αριθμούς. Ουσιαστικά είναι μια λίστα με πράγματα. Αν δεν είστε εξοικειωμένοι με τη βασική ιδέα των συστοιχιών, ελέγξτε το άρθρο του David Lee σχετικά με τον τρόπο αποτελεσματικής χρήσης των Arrays.

Για την περίπτωσή μας, αρκούν μερικές απλές συστοιχίες με ορισμένες χορδές κειμένου.

τίτλοι = ["Νέα Υόρκη", "Άμστερνταμ", "Ρώμη", "Όσλο"]

Σημειώστε ότι ένας πίνακας είναι πάντα περικλεισμένος με αγκύλες []. Κάθε στοιχείο μέσα σε έναν πίνακα έχει τον δικό του αριθμό ή ευρετήριο, εάν το επιθυμείτε. Το πρώτο στοιχείο σε μια συστοιχία αναφέρεται ως [0], το επόμενο [1] και ούτω καθεξής. Για παράδειγμα:

τίτλοι εκτύπωσης [3]

Θα εκτυπώσει τη συμβολοσειρά κειμένου "Όσλο" στην κονσόλα.

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

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

για i στο [0..4]
    layer = νέα κάρτα
        html: τίτλοι [i]

Με αυτόν τον τρόπο, ο βρόχος μετράει τα αντικείμενα στη συστοιχία και αντιστοιχίζει κάθε συμβολοσειρά κειμένου στον δικό του τίτλο, καθώς ο βρόχος μας κάνει κάρτες για εμάς.

Χρησιμοποιώντας όλες τις παραπάνω τεχνικές, συνδυάζοντας συστοιχίες με βρόχους, δημιουργώντας προσαρμοσμένα συστατικά από τις δικές σας τάξεις και όλα τα άλλα είδη δροσερών τεχνικών - θα πρέπει να είστε σε θέση να δημιουργήσετε κάποια εργασία υψηλής πιστότητας!

Ας ελπίσουμε ότι μετά την ανάγνωση αυτού του άρθρου, θα νιώσετε λίγο περισσότερο σαν αυτόν τον τύπο, όταν χτίζετε το επόμενο πρωτότυπο.

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

Και να θυμάστε ότι, όταν υπάρχει αμφιβολία - υπάρχει μια μεγάλη κοινότητα που χτίστηκε γύρω από τον Framer που συμβουλεύω ιδιαίτερα όλους όσους χρησιμοποιούν τον Framer για να συμμετάσχουν οτιδήποτε. Ελέγξτε την επίσημη ομάδα του Facebook, εκτός από την ομάδα Slack, όπου μπορείτε να ζητήσετε βοήθεια στο #realtime.

Αν βρήκατε αυτήν την ιστορία χρήσιμη, θα την ήθελα πολύ να πατήσετε το παρακάτω κουμπί συνιστώμενου. Και αν θέλετε, με ακολουθήστε για να λαμβάνετε ειδοποίηση όταν κυκλοφορώ νέο περιεχόμενο! Μεγάλη τύχη με τα πρωτότυπά σας.