Πώς να δημιουργήσετε κινούμενα σχέδια και μεταβάσεις με UI κίνησης
Οι κινήσεις και οι μεταβάσεις επιτρέπουν στους σχεδιαστές να απεικονίζουν την αλλαγή και να διαφοροποιούν το περιεχόμενο. Οι κινούμενες εικόνες και οι μεταβάσεις είναι κινούμενα εφέ βοηθήστε τους χρήστες να αναγνωρίζουν πότε αλλάζει κάτι στον ιστότοπο, για παράδειγμα, κάνουν κλικ σε ένα κουμπί και εμφανίζεται μια νέα πληροφορία στην οθόνη. Η προσθήκη κίνησης σε εφαρμογές και ιστότοπους βελτιώνει την εμπειρία των χρηστών, καθώς επιτρέπει στους χρήστες να έχουν αίσθηση περιεχομένου με πιο διαισθητικό τρόπο.
Μπορούμε να δημιουργήσουμε κινούμενα σχέδια και μεταβάσεις είτε από την αρχή είτε με τη χρήση βιβλιοθηκών ή πλαισίων. Καλές ειδήσεις για εμάς, οι παρατάκτες, είναι ότι ο Zurb, ο δημιουργός του Ιδρύματος, τον περασμένο Οκτώβριο, το Motion UI με ανοικτή προέλευση, την κινούμενη και μεταβατική βιβλιοθήκη του με βάση το Sass.
Ήταν αρχικά συνδεδεμένο με το Foundation for Apps, και τώρα, για την αυτόνομη απελευθέρωση πήρε μια ανακατασκευή, συμπεριλαμβανομένου ενός σύστημα αναμονής κινήσεων και ευέλικτα μοτίβα CSS. Το Motion UI εξουσιοδοτεί επίσης ορισμένα στοιχεία του πλαισίου του Ιδρύματος, όπως το ρυθμιστικό Orbit, το Toggler switcher και το Reveal modal, οπότε είναι ένα αρκετά ισχυρό εργαλείο.
Ξεκινώντας
Παρόλο που το Motion UI είναι βιβλιοθήκη Sass, δεν χρειάζεται απαραίτητα να το χρησιμοποιείτε με το Sass, καθώς ο Zurb παρέχει στους προγραμματιστές ένα εύχρηστο πρόγραμμα εκκίνησης που περιέχει μόνο το CSS. Μπορείτε να το κατεβάσετε από την αρχική σελίδα του Motion UI και να ξεκινήσετε γρήγορα το πρωτότυπο χρησιμοποιώντας τα προκαθορισμένα CSS animation και transition classes.
Το κιτ εκκίνησης δεν περιλαμβάνει μόνο το Motion UI, αλλά και το πλαίσιο του Foundation, το οποίο σημαίνει ότι μπορείτε να χρησιμοποιήσετε το πλέγμα Foundation και όλες τις άλλες λειτουργίες του Foundation for Sites, εάν θέλετε.
Το κιτ εκκίνησης αποστέλλεται επίσης μαζί με ένα index.html αρχείο που σας επιτρέπει να δοκιμάσετε γρήγορα το πλαίσιο.
Αν χρειάζεστε πιο εξελιγμένες ρυθμίσεις και θέλετε να εκμεταλλευτείτε τις δυνατές αναμνήσεις Sass της Motion UI, μπορείτε να εγκαταστήσετε την πλήρη έκδοση που περιέχει την πηγή .scss αρχεία με npm ή Bower.
Η τεκμηρίωση του Motion UI είναι επί του παρόντος μισοψημένη. Μπορείτε να το βρείτε εδώ στο Github, ή να το συμβάλλετε αν θέλετε.
Γρήγορο πρωτότυπο
Για να ξεκινήσετε το πρωτότυπο, μπορείτε να επεξεργαστείτε το index.html αρχείο του κιτ εκκίνησης ή δημιουργήστε το δικό σας αρχείο HTML. Μπορείτε να δημιουργήσετε τη διάταξη χρησιμοποιώντας το πλέγμα Foundation, αλλά το Motion UI μπορεί επίσης να χρησιμοποιηθεί ως ανεξάρτητη βιβλιοθήκη χωρίς το πλαίσιο του Foundation.
Υπάρχουν 3 κύριοι τύποι προκαθορισμένων κατηγοριών CSS στο Motion UI:
- Μεταβατικές κλάσεις - καθιστούν δυνατή την προσθήκη μεταβάσεων, όπως ολισθαίνοντας, εξασθένισης και αρθρώσεων σε ένα στοιχείο HTML.
- Κλάσεις κινούμενων εικόνων - σας δίνουν τη δυνατότητα να χρησιμοποιήσετε διαφορετικά εφέ κούνημα, περιστροφή και περιστροφή
- Modifier Classes - συνεργάζονται με τις δύο τάξεις μετάβασης και κινούμενων εικόνων και σας επιτρέπουν να ρυθμίσετε την ταχύτητα, τον χρόνο και την καθυστέρηση μιας κίνησης.
Δημιουργία HTML
Το μεγάλο πράγμα για τις προκαθορισμένες τάξεις CSS είναι ότι δεν μπορούν να χρησιμοποιηθούν μόνο ως κλάσεις, αλλά και ως άλλα χαρακτηριστικά HTML. Για παράδειγμα μπορείτε προσθέστε τα στο αξία χαρακτηριστικό του ετικέτα, ή μπορείτε να τα χρησιμοποιήσετε στο δικό σας έθιμο δεδομένα-* Χαρακτηριστικό επισης.
Στο παρακάτω απόσπασμα κώδικα επέλεξα αυτή την τελευταία επιλογή ξεχωριστές κατηγορίες συμπεριφοράς και τροποποιητή. Χρησιμοποίησα το αργός και ευκολία τροποποιητή χαρακτηριστικά ως κλάσεις, και δημιούργησε ένα προσαρμοσμένο δεδομένα-κινούμενα σχέδια χαρακτηριστικό για το κλίμακα-in-up μετάβαση. ο Κάντε κλικ μου Το κουμπί προορίζεται να ενεργοποιήσει το εφέ.
Παίζοντας κινούμενα σχέδια και μεταβάσεις με το jQuery
Το Motion UI περιλαμβάνει επίσης μια μικρή βιβλιοθήκη JavaScript που μπορεί να αναπαράγει μεταβάσεις και κινούμενα σχέδια όταν συμβεί κάποιο συμβάν.
Η ίδια η βιβλιοθήκη μπορεί να βρεθεί στο κιτ εκκίνησης στο κίνηση-ui-εκκινητής> js> πωλητής> motion-ui.js μονοπάτι.
Δημιουργεί ένα MotionUI αντικείμενο που έχει δύο μεθόδους: animateIn () και animateOut (). Η μετάβαση ή η κινούμενη εικόνα που συνδέονται με το συγκεκριμένο στοιχείο HTML (το
$ ("# boom"), ($) ($) (")" ($). , $ κινούμενα σχέδια),)))? Στο απόσπασμα κώδικα παραπάνω, χρησιμοποιήσαμε το δεδομένα-κινούμενα σχέδια χρησιμοποιώντας το ενσωματωμένο jQuery δεδομένα() τότε ονομάζεται μέθοδος animateIn () μέθοδος του MotionUI αντικείμενο.
Εδώ είναι ο πλήρης κώδικας και το αποτέλεσμα. Χρησιμοποίησα τις ενσωματωμένες κατηγορίες κουμπιών του Foundation Foundation για το Κάντε κλικ μου και πρόσθεσε κάποιες βασικές CSS.
Καθώς το Motion UI είναι αρκετά ευέλικτο, μπορείτε επίσης να προσθέσετε και να ενεργοποιήσετε τις μεταβάσεις και τα κινούμενα σχέδια με πολλούς άλλους τρόπους.
Για παράδειγμα, στο παραπάνω παράδειγμα δεν χρειάζεται να χρησιμοποιήσουμε απαραιτήτως το δεδομένα-κινούμενα σχέδια προσαρμοσμένο χαρακτηριστικό, αλλά μπορεί απλά να προσθέσει την τάξη συμπεριφοράς με το addClass () Μέθοδος jQuery στο
$ ('# boom'). addClass ('scale-in-up'). Προσαρμογή με Sass
Οι προκατασκευασμένες κλάσεις CSS της Motion UI χρησιμοποιούν προεπιλεγμένες τιμές που μπορούν εύκολα να προσαρμοστούν με τη βοήθεια του Sass. Υπάρχει ένα Sass mixin πίσω από κάθε μετάβαση και κινούμενα σχέδια, που καθιστά δυνατή την αλλαγή των ρυθμίσεων του αποτελέσματος. Με αυτό τον τρόπο μπορείτε εύκολα να δημιουργήσετε μια πλήρως προσαρμοσμένη κινούμενη εικόνα ή μετάβαση.
Η προσαρμογή δεν θα λειτουργήσει με το κιτ εκκίνησης όμως, θα πρέπει να εγκαταστήσετε την έκδοση Sass αν θέλετε να διαμορφώσετε τα εφέ σύμφωνα με τις δικές σας ανάγκες.
Για να προσαρμόσετε μια μετάβαση ή μια κινούμενη εικόνα, πρέπει πρώτα να το κάνετε βρείτε το σχετικό mixin. ο _classes.scss Το αρχείο περιέχει τα ονόματα των καταρτισμένων κλάσεων CSS με τις αντίστοιχες mixins.
Στο παράδειγμά μας χρησιμοποιήσαμε το .κλίμακα-in-up χαρακτηριστικό, και ρίχνοντας μια ματιά _classes.scss, μπορούμε γρήγορα να διαπιστώσουμε ότι κάνει χρήση του mui-ζουμ mixin:
// Μεταβάσεις @ mixin κίνηση-ui-μεταβάσεις ... // Κλίμακα κλίμακας-in-up @ περιλαμβάνει mui-zoom (σε, 0.5, 1)? ...
Το UI κίνησης χρησιμοποιεί το mui- πρόθεμα σε mixins, και κάθε mixin έχει το δικό του αρχείο. Το Motion UI έχει αρκετά αυτονόητες συμβάσεις ονομασίας, έτσι ώστε να βρούμε γρήγορα το mui-ζουμ mixin στο _zoom.scss αρχείο:
@ mixin mui-zoom ($ κατάσταση: in, $ από: 1,5, $ έως: 1, $ fade: map-get ($ motion-ui-settings, null, $ καθυστέρηση: null) ...
Χρησιμοποιώντας την ίδια τεχνική, μπορείτε εύκολα να ελέγξετε κάθε χαρακτηριστικό μιας κινούμενης εικόνας ή μιας μετάβασης μεταβάλλοντας τις τιμές των αντίστοιχων μεταβλητών Sass.
Ρύθμιση κατηγοριών τροποποιητών
Οι κλάσεις τροποποιητών που ελέγχουν τη συμπεριφορά (ταχύτητα, χρονισμό και καθυστέρηση) κινούμενων εικόνων και μεταβάσεων μπορούν επίσης να διαμορφωθούν με το Sass τροποποιώντας τις τιμές των αντίστοιχων μεταβλητών στο _settings.scss αρχείο.
Αφού κάνετε τις αλλαγές σας, το Motion UI θα το κάνει χρησιμοποιήστε τις νέες τιμές ως προεπιλογή σε κάθε κινούμενη εικόνα και μετάβαση, οπότε δεν θα χρειαστεί να ρυθμίσετε τις σχετικές μίξεις μία προς μία.
