Περιεχόμενο
- Εισαγωγή από το Sketch
- Δημιουργήστε στρώματα μάσκας και avatar
- Ορίστε καταστάσεις
- Ζώο μεταξύ κρατών
- Δοκιμάστε το σε μια πραγματική κινητή συσκευή
Ο συλλογισμός πίσω από το πρωτότυπο σχεδίασης δεν είναι καινούργιος - είναι ίδιος με όλα τα φήμη για τη σχεδίαση στο πρόγραμμα περιήγησης. Όταν βλέπετε ένα σχέδιο στο πραγματικό του πλαίσιο, είναι εντελώς διαφορετικό. Λαμβάνετε καλύτερες αποφάσεις όταν δεν χρειάζεται να κάνετε υποθέσεις για το πώς θα λειτουργεί και θα αισθάνεται μια διεπαφή. Αυτό μπορεί να ακούγεται σαν επιπλέον δουλειά, αλλά οι πληροφορίες που μπορείτε να αποκτήσετε βλέποντας το σχέδιό σας να λειτουργεί είναι πολύτιμες.
Το Framer είναι ένα νέο εργαλείο δημιουργίας πρωτοτύπων βάσει κώδικα. Μπορείτε να δημιουργήσετε mockups στο Sketch (ή στο Photoshop) όπως θα κάνατε συνήθως και να τα εισαγάγετε στο Framer. Στη συνέχεια, γράψτε λίγο CoffeeScript και μπορείτε να πετύχετε πολλά.
Θα σας διδάξω τα βασικά του πρωτότυπου στο Framer, χρησιμοποιώντας το παράδειγμα ενός πρωτοτύπου εφαρμογής iOS με δύο προβολές: μια προβολή προφίλ και μια μεγεθυμένη προβολή της εικόνας avatar του χρήστη. Θα δημιουργήσουμε πρωτότυπο πώς θα ανοίξει και θα κλείσει η εκτεταμένη προβολή φωτογραφιών και θα την κινούμε επίσης. Δείτε την online επίδειξη εδώ (για να δείτε τον πηγαίο κώδικα, απλώς κάντε κλικ στο εικονίδιο στην επάνω αριστερή γωνία). Θα χρειαστείτε επίσης τη δωρεάν δοκιμή του Framer, την οποία μπορείτε να λάβετε στο framerjs.com.
Εισαγωγή από το Sketch
Το πρώτο βήμα είναι να εισαγάγετε επίπεδα από το Sketch στο Framer. Απλώς κάντε κλικ στο κουμπί Εισαγωγή στο Framer ενώ το σχέδιο είναι ανοιχτό στο Sketch και επιλέξτε το σωστό αρχείο στο διάλογο που ακολουθεί. Το Framer θα εισαγάγει αυτόματα εικόνες από κάθε επίπεδο και θα τις κάνει προσβάσιμες μέσω κώδικα όπως αυτή:
sketch = Framer.Importer.load "εισαγόμενο / προφίλ"
Χρησιμοποιήστε αυτήν τη μεταβλητή για πρόσβαση στα εισαγόμενα επίπεδα. Για παράδειγμα, για να αναφέρετε το επίπεδο που ονομάζεται «περιεχόμενο» στο αρχείο Σκίτσο, θα πληκτρολογήσετε sketch.content στο Framer.
Δημιουργήστε στρώματα μάσκας και avatar
Η βασική λειτουργία αυτού του πρωτοτύπου είναι να επεκτείνει την εικόνα avatar όταν έχει πατηθεί και, στη συνέχεια, να την κλείσει όταν πατηθεί ξανά. Αρχικά, θα δημιουργήσουμε δύο στρώσεις μάσκας - μια ένθετη μάσκα ή μια μάσκα μέσα σε μια άλλη μάσκα. Θα δημιουργήσουμε ταυτόχρονα και τις δύο μάσκες για να δημιουργήσουμε ένα ωραίο, λεπτό εφέ ανοίγματος και κλεισίματος. Το επίπεδο headerMask θα περικόψει τη φωτογραφία avatar σε ορθογώνιο όταν επεκταθεί και το επίπεδο μάσκας θα το περικόψει σε έναν μικρό κύκλο στην προβολή προφίλ.
Δημιουργήστε το επίπεδο headerMask ως εξής:
headerMask = νέο Πλάτος επιπέδου: Screen.width, ύψος: 800 φόντο Χρώμα: "διαφανές"
Η πρώτη γραμμή κώδικα δημιουργεί και ονομάζει το νέο επίπεδο. Στη συνέχεια, χρησιμοποιώντας τη σύνταξη εσοχής του CoffeeScript, ορίζουμε τις ιδιότητες πλάτους, ύψους και φόντου. Θα χρησιμοποιήσουμε ένα διαφανές φόντο, ώστε τα επίπεδα κάτω να εμφανίζονται κατά την επέκταση της φωτογραφίας avatar.
Στη συνέχεια, δημιουργήστε το επίπεδο μάσκας:
μάσκα = νέο Πλάτος στρώματος: 1000, ύψος: 1000 φόντο Χρώμα: "διαφανές", περιθώριο Ακτίνα: 500 y: sketch.header.height - 100 superLayer: header Κλίμακας μάσκας: 0,2, προέλευσηY: 0
Δημιουργούμε ένα νέο επίπεδο και ορίζουμε ιδιότητες με τον ίδιο τρόπο. Το μεγάλο borderRadius κάνει αυτό το στρώμα κύκλο. Τοποθετούμε το στρώμα μάσκας έτσι ώστε να επικαλύπτει το επίπεδο κεφαλίδας, το οποίο εισήχθη από το Sketch. Θα μειώσουμε επίσης το 20% ή 0,2. Το OriginY του μηδέν θέτει το σημείο αγκύρωσης ή την καταχώριση της εικόνας στο πάνω άκρο.
Η υπόλοιπη ιδιότητα, superLayer, ορίζει το επίπεδο headerMask που δημιουργήσαμε ως γονικό αυτού του νέου επιπέδου. Έτσι λειτουργεί η μάσκα στο Framer. Απλώς ορίστε την ιδιότητα superLayer και το γονικό επίπεδο θα καλύψει το παιδί.
Στη συνέχεια, πρέπει να δημιουργήσουμε το γραφικό avatar και να το τοποθετήσουμε μέσα σε αυτές τις νέες μάσκες. Για μεγέθυνση και κίνηση των ορίων περικοπής, θα δημιουργήσουμε χειροκίνητα το επίπεδο avatar. Αντιγράψτε μια φωτογραφία στον υποφάκελο "εικόνες" του φακέλου έργου. Στη συνέχεια, δημιουργήστε ένα επίπεδο χρησιμοποιώντας αυτήν την εικόνα:
avatar = new Layer image: "images / avatar.png" πλάτος: mask.width, ύψος: mask.height superLayer: mask, force2d: true
Παρατηρήστε ότι ορίζουμε το superLayer του avatar να είναι το layer mask. Τώρα και οι δύο είναι τοποθετημένοι στο headerMask. Ρυθμίζουμε επίσης το πλάτος και το ύψος, ώστε η εικόνα να γεμίζει πλήρως τη μάσκα.
Τέλος, θα δημιουργήσουμε μια μεταβλητή για να αποθηκεύσουμε τη θέση Υ της μάσκας που θα χρησιμοποιήσουμε για την κινούμενη εικόνα. Θα το κεντράρουμε οριζόντια, καθώς είναι μεγαλύτερο από την οθόνη.
maskY = mask.y mask.centerX ()
Ορίστε καταστάσεις
Το πρώτο βήμα για τη δημιουργία μιας κινούμενης εικόνας είναι να ορίσετε τις καταστάσεις έναρξης και τέλους. Στο Framer, οι πολιτείες μοιάζουν με βασικά καρέ που γράφονται σε κώδικα. Ένα κράτος είναι απλώς μια συλλογή ιδιοτήτων. Κάθε επίπεδο έχει μια προεπιλεγμένη κατάσταση. Για αυτό το πρωτότυπο, αυτή η προεπιλογή θα χρησιμεύσει ως σημείο εκκίνησης για την κινούμενη εικόνα, επομένως πρέπει να ορίσουμε μόνο μια δεύτερη κατάσταση για κάθε επίπεδο.
Η σύνταξη για τις πολιτείες είναι πολύ απλή. Αναφέρετε το επίπεδο, χρησιμοποιήστε τη μέθοδο layer.states.add () και, στη συνέχεια, παραθέστε τις ιδιότητες που θα συμπεριληφθούν.
sketch.content.states.add (απόκρυψη: {opacity: 0}) headerMask.states.add (μετακίνηση: {y: 120}) mask.states.add (αναπτύξτε: {κλίμακα: 1.1, y: maskY - 420})
Η δεύτερη κατάσταση για το επίπεδο περιεχομένου, το οποίο εισήχθη από το Sketch και περιέχει όλα τα άλλα στοιχεία οθόνης προφίλ, θα πρέπει να είναι εντελώς διαφανές. Με αυτόν τον τρόπο, όταν το avatar επεκταθεί, θα έχουμε μαύρο φόντο και θα εμφανιστούν τα υπόλοιπα εισαγόμενα εικονίδια και στοιχεία.
Η δεύτερη γραμμή κώδικα δημιουργεί μια κατάσταση για το headerMask, το οποίο απλώς θα το μετακινήσει προς τα κάτω σε μια θέση Y του 120. Αυτό θα επιτρέψει στο τίτλο και το κουμπί κλεισίματος να εμφανίζονται στο πάνω μέρος της οθόνης κατά τη μεγέθυνση της φωτογραφίας avatar. Θα ζωντανέψει επίσης τα όρια περικοπής της φωτογραφίας avatar.
Τέλος, μια νέα κατάσταση για το στρώμα μάσκας θα την κλιμακώσει και θα την μετακινήσει, χρησιμοποιώντας τη μεταβλητή maskY που δημιουργήσαμε νωρίτερα. Επειδή το σημείο προέλευσηςY (ή το σημείο αγκύρωσης) του στρώματος μάσκας είναι το πάνω άκρο του, πρέπει να το μετακινήσουμε προς τα πάνω κατά 420 pixel, έτσι ώστε το κέντρο της εικόνας να είναι ορατό.
Ζώο μεταξύ κρατών
Για να κινούμαστε μεταξύ των προεπιλεγμένων καταστάσεων και των νέων που μόλις δημιουργήσαμε, χρειαζόμαστε μόνο τέσσερις ακόμη γραμμές κώδικα. Θα ορίσουμε ένα πρόγραμμα χειρισμού κλικ στο επίπεδο avatar. Όταν ένας χρήστης το αγγίξει στην οθόνη προφίλ, θα μεταβούμε στην εκτεταμένη προβολή με ποδηλατικές καταστάσεις. Όταν πατηθεί ξανά, θα επιστρέψουμε στις προεπιλεγμένες καταστάσεις ώστε να επιστρέψει σε έναν μικρό κύκλο. Οι ίδιες γραμμές κώδικα χειρίζονται και τις δύο αλληλεπιδράσεις:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
Η πρώτη γραμμή αυτού του μπλοκ ρυθμίζει το χειριστή κλικ στο επίπεδο avatar. Κάθε φορά που πατάτε, ανεξάρτητα από το πώς περικόπτεται ή σε ποιο μέγεθος είναι, θα εκτελούνται οι δηλώσεις που ακολουθούν.
Στη συνέχεια, απλώς αναφέρουμε κάθε επίπεδο και χρησιμοποιούμε τη μέθοδο layer.states.next () για εναλλαγή καταστάσεων. Όταν χρησιμοποιείτε το layer.states.next (), το Framer θα χρησιμοποιεί τις εσωτερικές προεπιλεγμένες ρυθμίσεις κινούμενης εικόνας. Αυτό είναι εξαιρετικά βολικό, αλλά μπορείτε να δημιουργήσετε ακόμα καλύτερα κινούμενα σχέδια ρυθμίζοντας τις καμπύλες κινούμενων σχεδίων.
Όταν χρησιμοποιείτε καταστάσεις όπως είμαστε εδώ, μπορείτε εύκολα να αλλάξετε ξεχωριστά κάθε καμπύλη κινούμενης εικόνας χρησιμοποιώντας την ιδιότητα layer.states.animationOptions. Με μόλις τρεις μικρές ρυθμίσεις, το κινούμενο σχέδιο αισθάνεται εντελώς διαφορετικό:
sketch.content.states.animationOptions = καμπύλη: "ευκολία", χρόνος: 0,3 κεφαλίδαMask.states.animationOptions = καμπύλη: "ελατήριο (150, 20, 0)" mask.states.animationOptions = καμπύλη: "ελατήριο (300, 30, 0) "
Για το επίπεδο περιεχομένου που ξεθωριάζει και θα διαλέξει, θα επιλέξουμε μια απλή προεπιλογή καμπύλης, ευκολία και θα ορίσουμε τη διάρκεια κινούμενης εικόνας σε 0,3, ώστε να είναι πολύ γρήγορη.
Για τα στρώματα κεφαλίδας Μάσκας και μάσκας, χρησιμοποιήστε μια καμπύλη ελατηρίου. Για τους σκοπούς μας, απλώς πρέπει να γνωρίζετε ότι οι τιμές της καμπύλης ελατηρίου αλλάζουν την ταχύτητα και την αναπήδηση της κινούμενης εικόνας. Οι τιμές για το επίπεδο μάσκας θα κάνουν την κινούμενη εικόνα πολύ πιο γρήγορη από το headerMask και το περιεχόμενο. Για περισσότερες λεπτομέρειες σχετικά με τις ρυθμίσεις της καμπύλης ελατηρίου, ανατρέξτε στην τεκμηρίωση του Framer στη διεύθυνση framerjs.com/docs.
Δοκιμάστε το σε μια πραγματική κινητή συσκευή
Η εμφάνιση του σχεδιασμού σε μια πραγματική συσκευή είναι πολύ πιο αποτελεσματική από τη χρήση εξομοιωτών και θα δείτε τα οφέλη στην εργασία σας. Το Framer περιλαμβάνει μια λειτουργία καθρέφτη, η οποία είναι ένας ενσωματωμένος διακομιστής που προσφέρει μια διεύθυνση URL στο πρωτότυπό σας μέσω του τοπικού σας δικτύου. Απλώς επισκεφτείτε τη διεύθυνση URL χρησιμοποιώντας τη συσκευή σας.
Έχετε μάθει όλα όσα πρέπει να γνωρίζετε για να δημιουργήσετε πρωτότυπα δικά σας σχέδια στο Framer. Τι περιμένεις?
Λόγια: Jarrod Drysdale
Ο Jarrod Drysdale είναι συγγραφέας, σύμβουλος σχεδιασμού, κατασκευαστής ψηφιακών προϊόντων. Αυτό το άρθρο δημοσιεύθηκε αρχικά στο τεύχος 270 του περιοδικού net.
Σας άρεσε αυτό; Διαβάστε αυτά!
- Δημιουργήστε ζωντανά, πρωτότυπα με δυνατότητα κλικ στο Sketch
- Πώς να ξεκινήσετε ένα blog
- Οι καλύτεροι συντάκτες φωτογραφιών
