Ενεργοποιήστε τα μενού σας χρησιμοποιώντας κινούμενα σχέδια με CSS

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

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

Όταν μαθαίνουμε για τις δυνατότητες του CSS animation , Μπορεί να είναι εύκολο να αφήσετε τις φαντασιώσεις μας να πάνε σε υπερπληρωμή και να πασπαλίζετε κινούμενα σχέδια σε σχεδόν τα πάντα. Ενώ η κινούμενη εικόνα μπορεί να είναι μεγάλη, πρέπει να είμαστε προσεκτικοί και πάντα να ρωτάμε τους εαυτούς μας: Είναι αυτή η εικόνα ουσιαστική; Προσθέτει οποιαδήποτε αξία εκτός από την όμορφη; Κάνει το προϊόν μας ευκολότερο να το χρησιμοποιήσετε;

Σημαντική κινούμενη εικόνα

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

Μπορείς Προεπισκόπηση Το τελικό αποτέλεσμα εδώ . Όταν ο χρήστης κάνει κλικ στο εικονίδιο μενού, θα επεκτείνουμε την πλάκα φόντου του εικονιδίου (ένας κύκλος) για να καλύψει την οθόνη και να παρουσιάσει την επικάλυψη μενού.

Αντί να αναβοσβήνει απλά σε ένα κλείσιμο εικονίδιο, πρόκειται να ζωντεύουμε και να μεταμορφώσουμε τις τρεις κάθετες γραμμές (που συνθέτουν το εικονίδιο μενού) σε ένα «Χ», για να αντιπροσωπεύει ένα κλείσιμο εικονίδιο. Με άλλα λόγια, καθώς το μενού αποκαλύπτεται το εικονίδιο Morphs σε ένα κλείσιμο.

Σχετικά στοιχεία

Μπορεί να σκέφτεστε έτσι, είναι αυτή η ουσιαστική κινούμενη εικόνα; Λοιπόν, μεγάλη ερώτηση. Σύντομη απάντηση: Ναι! Μεγαλύτερη απάντηση: Τα κινούμενα σχέδια είναι εξαιρετικά σε στοιχεία σύνδεσης στην οθόνη και δείχνουν πώς σχετίζονται μεταξύ τους.

Καθώς αναβαθμίζουμε την πλάκα φόντου του μενού για να γίνει το μενού, δείχνουμε πώς συνδέονται τα δύο - παρόμοια με το πώς ένα εικονίδιο εφαρμογής, όταν πιέζεται στο iOS ή το Android, ζυγίζει και αναλαμβάνει ότι η εφαρμογή ξεκίνησε από την οθόνη αυτό το πολύ εικονίδιο. Το εικονίδιο μενού μας δεν αλλάζει μόνο το μενού: Είναι το μενού, μόνο κατέρρευσε.

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

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

Δείτε πώς να το κάνετε αυτό στο βιντεοπαιχνίδι παραπάνω και γραπτές βήματα παρακάτω.

01. Ξεκινήστε

Κατεβάστε τα αρχεία του έργου . Ανοίγω index.html Σε ένα πρόγραμμα περιήγησης και θα πρέπει να δείτε τρεις μεγάλους δεσμούς σε λευκό φόντο. Αυτή είναι η επικάλυψη μενού θα αποκαλύψουμε.

Πρώτα απ 'όλα πρέπει να το κρύψουμε. Σε Styles.css , προσθέστε αυτά τα στυλ .Menu-επικάλυψη :

 Αδιάβροχη: 0;
Ορατότητα: Κρυφό, 

Με την επικάλυψη, ένα κουμπί θα πρέπει να εμφανίζεται ένα κουμπί στην επάνω αριστερή γωνία. Ας σχεδιάσουμε το εικονίδιο μενού εδώ, οπότε υπάρχει κάτι για να κάνετε κλικ για να δείξετε την επικάλυψη. Για να το κάνετε εύκολο να ζωντανέψετε, θα το καταλάβουμε χρησιμοποιώντας μόνο HTML και CSS. χωρίς bitmaps ή φορείς. Έχουμε ήδη κάποια HTML index.html Για το μενού: ένα δοχείο ( .μενού ), ένα φόντο ( .Menu-κύκλος ), ένας σύνδεσμος ( .Menu-Link ) και το εικονίδιο ( .Menu-εικονίδιο ) με ένα άνοιγμα για κάθε γραμμή.

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

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

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

 .Menu-Line {
 Ιστορικό-χρώμα: # 333;
 Ύψος: 2px;
 Πλάτος: 100%.
 Ακτίνα συνοριακής ακτίνας: 2px;
 Θέση: Απόλυτη.
 Αριστερά: 0;
} 

Στη συνέχεια, μπορούμε να χρησιμοποιήσουμε τις μοναδικές τάξεις των γραμμών για να ορίσετε την κάθετη θέση:

 .menu-line-1 {κορυφή: 0; }

.menu-line-2 {
 Κορυφή: 0;
 Κάτω: 0;
 Περιθώριο: Αυτόματη;
}

.menu-line-3 {κάτω: 0; } 

02. Προσθέστε ένα αποτέλεσμα του αιώρου

Ας κάνουμε το εικονίδιο σαφώς κλικ προσθέτοντας ένα αποτέλεσμα του αιωρούμενου. Σε Styles.css , δημιουργήστε έναν νέο επιλογέα για μενού-κύκλο Για να το κλιμακώσετε όταν τοποθετείτε το μενού:

 .Menu: hover .menu-circle {μετασχηματισμός: κλίμακα (1.4); } 

Τώρα μπορούμε να προσθέσουμε το πρώτο μας κινούμενο σχέδιο. Προσθήκη "Μετάβαση: όλα τα 0,2s ευκολία-in-out" προς την .Menu-Circle {} (όχι στο κράτος του αιωρούμενου). Λέμε στο πρόγραμμα περιήγησης να ζωντανεύει όλες τις ιδιότητες που μπορεί να αλλάξουν .Menu-κύκλος . Έτσι, όταν το κλιμάσαμε στο αιωρούμενο, ζωντανεύει κατά τη διάρκεια των 0,2 δευτερολέπτων στη νέα του κατάσταση, με μια λειτουργία χρονισμού του ευκολία-in-out .

Πώς γνωρίζετε ποια λειτουργία χρονισμού για να επιλέξετε; Πρώτα απ 'όλα, αποφύγετε τη χρήση μιας γραμμικής λειτουργίας χρονισμού. Λίγα πράγματα στον πραγματικό κόσμο κινούνται με απόλυτα σταθερή ταχύτητα, έτσι τα αντικείμενα κινούμενα με μια γραμμική λειτουργία χρονισμού τείνουν να φαίνονται αφύσικες και δύσκαμπτες (όπως θα είπε ο Αϊνστάιν », ο Θεός δεν παίζει ζάρια με γραμμική λειτουργία χρονισμού").

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

03. Εμφάνιση και απόκρυψη του μενού

Ας χρησιμοποιήσουμε το JQuery για να δείξετε και να κρύψετε τη νεοσύστατη επικάλυψη μας. Σε script.js , εναλλαγή της κατηγορίας του Άνοιξε επί .Menu-επικάλυψη Μέσα στον υπάρχοντα χειριστή κλικ:

  $ (". Επικάλυψη μενού"). toggleclass ("open"); 

Στη συνέχεια, δείξτε την επικάλυψη όταν έχει μια τάξη ανοιχτού:

 .Menu-Overlay.Open {
 αδιαφάνεια: 1;
 Ορατότητα: ορατό.
} 

04. Συνδέστε το εικονίδιο μενού

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

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

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

  $ (". μενού"). toggleclass ("open"); 

Τώρα μπορούμε να στοχεύσουμε αυτή την τάξη με CSS και να επεκτείνουμε τον κύκλο καθώς ανοίγει το μενού. Στο κάτω μέρος του style.css , επεκτείνετε το .Menu-κύκλος πότε .μενού έχει επίσης μια τάξη .Άνοιξε :

 .Menu.Open .menu-circle {μετασχηματισμός: κλίμακα (60);
} 

05. Μετατρέψτε το εικονίδιο

Έχουμε ένα όμορφο αποκαλυπτικό αποτέλεσμα για το μενού μας, αλλά πώς θα γυρίσουμε το εικονίδιο μενού σε ένα κοντινό εικονίδιο; Είναι εκπληκτικά εύκολο μόλις ξέρετε πώς - θα χρειαστεί να θέσουμε μόνο τρεις ιδιότητες CSS. Πρώτα απενεργοποιήσουμε, πρέπει να κρύψουμε τη μέση γραμμή ενώ εμφανίζεται το μενού:

 .Menu.Open .menu-line-2 {αδιαφάνεια: 0; } 

Στη συνέχεια, το μόνο που πρέπει να κάνουμε είναι να αναστρέψουμε τις άλλες δύο γραμμές 45 μοίρες σε αντίθετες κατευθύνσεις (οι γραμμές πρέπει να δείχνουν διαφορετικές κατευθύνσεις για να σχηματίσουν ένα «Χ», οπότε σημειώστε πώς μία από τις γραμμές έχει αρνητική περιστροφή 45 μοίρες):

 .Menu.Open .menu-line-1 {
 Μετασχηματισμός: Περιστροφή (-45deg);
}

.Menu.Open .menu-line-3 {
 Μετασχηματισμός: Περιστροφή (45deg);
} 

Λοιπόν, είδος. Πρέπει επίσης να κεντράσουμε αυτές τις δύο γραμμές κάθετα. Σε αυτό το σημείο θα μπορούσατε να σκεφτείτε εύκολα! Απλά πρέπει να αλλάξουμε το μπλουζα και κάτω μέρος θέση για να τα κεντράσει ». Και θα είχατε δίκιο - αν δεν είχαμε κινήσει αυτό το εικονίδιο.

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

 .Menu.Open .menu-line-1 {
 Μετασχηματισμός: μεταχειρισμένο (7px) μεταχειρισμένο (-50%) περιστρέφεται (-45deg);
}

.Menu.Open .menu-line-3 {
 Μετασχηματισμός: μεταχειρισμένο (-7px) μεταχειρισμένο (50%) περιστρέφεται (45deg).
} 

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

Ας το σπάσουμε. Έχουμε δύο μεταφράσεις που χρησιμοποιούνται ταυτόχρονα: translatey (7px) και Μεταφράσεις (-50%) . Το πρώτο μετασχηματισμό, translatey (7px) , χρησιμοποιείται για να μετακινήσει την επάνω άκρη της γραμμής στο κατακόρυφο κέντρο του καμβά. Τα μαθηματικά εδώ είναι απλά: 14 είναι το ύψος του εικονιδίου μας, διαιρώντας το από δύο παίρνουμε το μεσαίο σημείο: 7.

Το δεύτερο μετασχηματισμό, Μεταφράσεις (-50%) , χρησιμοποιείται για να μετακινήσετε τη γραμμή έτσι ώστε το κατακόρυφο κέντρο της γραμμής, όχι την επάνω άκρη του, να βρίσκεται στο κατακόρυφο σημείο του καμβά.

Συνήθως όταν χρησιμοποιείτε το % Συνδεθείτε CSS Ανατρέξτε στον γονέα ενός στοιχείου (Ρύθμιση Πλάτος: 100% Αντιστοιχίζεται το πλάτος του στοιχείου σε αυτό του γονέα), αλλά εάν χρησιμοποιείτε ποσοστά με το ακίνητο μετασχηματισμού που αναφέρετε στο ίδιο το στοιχείο, όχι ο γονέας. Έτσι για να βρούμε το ύψος μιας γραμμής και να το μετακινήσουμε προς τα πάνω κατά το ήμισυ του, το μόνο που χρειαζόμαστε είναι Μεταφράσεις (-50%) .

06. Morph μεταξύ εικονιδίων

Αντί να αντικαταστήσετε μόνο το εικονίδιο μενού με το κλείσιμο του εικονιδίου, ας μετακινηθείτε μεταξύ των δύο καταστάσεων.

Ξεκινήστε προσθέτοντας μια μετάβαση στο .menu-line σε style.css :

 Μετάβαση: όλα τα 0,25 ευαίσθητα in-in-out. 

Ta-da! Ένα μορφοποιημένο εικονίδιο μενού. Το κινούμενο σχέδιο είναι λίγο θαμπό, όμως. Ας το διορθώσουμε. Για να καταστούν οι γραμμές πιο ζωντανές, μπορούμε να τα περιστρέψουμε και τους δύο επιπλέον 90 μοίρες. Το εικονίδιο θα φαίνεται το ίδιο στο τέλος, αλλά οι γραμμές θα ταξιδέψουν περαιτέρω κατά την ίδια χρονική περίοδο. Αλλάξτε τις περιστροφές στο Περιστροφή (-135deg) και Περιστροφή (135deg) .

Κατά κανόνα, μπορείτε πάντα να βελτιώσετε ένα animation χρησιμοποιώντας μια προσαρμοσμένη καμπύλη Bézier που είναι καλύτερα προσαρμοσμένη στο animation σας. Αυτή τη στιγμή χρησιμοποιούμε ευκολία-in-out - Αυτό σημαίνει ότι η κινούμενη εικόνα θα έχει μια αργή εκκίνηση και τελειώσει, με ταχύτερο ρυθμό στη μέση.

Νομίζω ότι ένα πιο ανοιξιάτικο αποτέλεσμα είναι κατάλληλο για το εικονίδιο μας. Ας το κάνουμε γρήγορα να γυρίσετε γρήγορα, με ένα μικρό αποτέλεσμα αναπήδησης, καθώς τελειώνει. Για .menu-line , αντικαταστήστε " ευκολία-in-out " Με μια προσαρμοσμένη καμπύλη Bézier:

 Μετάβαση: όλα τα 0,25 Cubic-Bezier (0,175, 0,885, 0,32, 1,275). 

Ποιοι είναι όλοι αυτοί οι αριθμοί; Μην ανησυχείτε: Οι καμπύλες Bézier σπάνια γράφονται με το χέρι. Εσυ χρησιμοποιεις Cubic-Bezier () Για να ορίσετε τον ρυθμό ενός κινουμένων σχεδίων με την πάροδο του χρόνου και αντί να τις γράφετε μόνοι σας, συνιστώ να χρησιμοποιήσετε έναν ιστότοπο αναφοράς. Αυτό προέρχεται από το eastings.net. Υποστηρίζει στο τέλος της κινούμενης εικόνας και δημιουργεί ένα λεπτό αποτέλεσμα αναπήδησης.

Ενώ είμαστε σε αυτό, πηγαίνετε eastings.net και αρπάξτε τον κώδικα για reallexpo . Θα το χρησιμοποιήσουμε για να δημιουργήσουμε ένα πιο εκλεπτυσμένο αποτέλεσμα για το κινούμενο υπόβαθρο μενού. Ενημερώστε τη μετάβαση του .Menu-κύκλος Για να χρησιμοποιήσετε αυτήν την προσαρμοσμένη καμπύλη Bézier και να κάνετε το κινούμενο σχέδιο λίγο περισσότερο (0,5s):

 Μετάβαση: Όλα τα 0,5s Cubic-Bezier (0,19, 1, 0,22, 1). 

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

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

Αυτό το άρθρο εμφανίστηκε αρχικά στο καθαρό περιοδικό Τεύχος 281. Εγγραφείτε στο καθαρό εδώ .

Σχετικά Άρθρα:

• 10 εντυπωσιακά παραδείγματα κινούμενων εικόνων CSS3
• 28 Εκκρεμή παραδείγματα CSS
• Ξεκινήστε με την προσβασιμότητα στο Web