Πώς να χρησιμοποιήσετε τις μεταβάσεις και κινούμενες εικόνες CSS3 για να επισημάνετε τις αλλαγές UI

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

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

Στην ανάπτυξη front-end, τα στοιχεία DOM συνήθως προωθούντο από το JavaScript πριν κυκλοφορήσει το CSS3 και είναι μια μέθοδος που εξακολουθεί να λειτουργεί, αλλά οι νέες ιδιότητες που εισάγονται από το CSS3 μας επιτρέπουν να βελτιώσουμε τα σχέδιά μας με διαφορετικά αποτελέσματα και κίνηση με πιο διαισθητικό τρόπο.

Οι δύο κύριες τεχνικές που προσφέρει η CSS3 είναι οι μεταβάσεις και οι κινούμενες εικόνες. Σε αυτή τη δημοσίευση θα δούμε τι είναι, ποια είναι η διαφορά μεταξύ τους και πώς μπορείτε να τα χρησιμοποιήσετε.

Μεταβάσεις

Οι μεταβάσεις και οι κινούμενες εικόνες χρησιμοποιούνται και οι δύο απεικονίζουν αλλαγές στην κατάσταση ενός στοιχείου HTML από τροποποιώντας μία ή περισσότερες ιδιότητες του CSS.

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

Η αλλαγή ιδιοτήτων CSS ενός συνδέσμου σχετικά με την τοποθέτηση του ποντικιού (ή εστίαση ή κλικ) είναι η παλαιότερη και απλούστερη μορφή μεταβάσεων και υπήρχε πολύ πριν από την εποχή του CSS3.

 α χρώμα: πορτοκαλί;  α: αιωρείται χρώμα: κόκκινο;  α: εστίαση χρώμα: μπλε;  α: επισκέφθηκαν χρώμα: πράσινο; 

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

Θα ρίξουμε μια ματιά στις νέες ιδιότητες CSS στην επόμενη ενότητα, αφού κατανοήσουμε πώς διαφέρουν οι κινούμενες εικόνες. Προς το παρόν, ας δούμε τα πιο σημαντικά πράγματα που πρέπει να γνωρίζετε σχετικά με τις μεταβάσεις.

1. Έχουν πάντα μια αρχή και μια τελική κατάσταση.
2. Οι καταστάσεις μεταξύ των αρχικών και των τελικών σημείων καθορίζονται σιωπηρά από το πρόγραμμα περιήγησης, δεν μπορούμε να το αλλάξουμε με το CSS.
3. Απαιτούν ρητή ενεργοποίηση, όπως η προσθήκη ενός νέου ψευδοκλάστου από το CSS ή μια νέα κλάση από το jQuery.

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

Κινούμενα σχέδια

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

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

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

Τα πιο σημαντικά πράγματα που πρέπει να ξέρετε για τα κινούμενα σχέδια CSS3 περιλαμβάνουν:

1. δεν απαιτούν ρητή ενεργοποίηση, μπορούν να ξεκινήσουν από τη φόρτωση της σελίδας ή όταν πραγματοποιηθεί άλλο συμβάν DOM στο πρόγραμμα περιήγησης
2. μπορούν να χρησιμοποιηθούν σε περιπτώσεις όπου χρησιμοποιούνται μεταβάσεις, για παράδειγμα όταν προστίθεται ή αφαιρείται μια νέα τάξη ή ψευδοκλάση (αν και είναι μια λιγότερο συχνή περίπτωση χρήσης)
3. απαιτούν από εμάς να ορίσουμε ορισμένα βασικά πλαίσια (ενδιάμεσες καταστάσεις)
4. μπορούμε να καθορίσουμε τον αριθμό, τη συχνότητα και το στυλ αυτών των βασικών καρέ

Στο παρακάτω παράδειγμα μπορείτε να δείτε ένα δροσερό αναπτυσσόμενο μενού με κινούμενα σχέδια. Η κινούμενη εικόνα ξεκινά όταν πατάμε το κουμπί. Αυτό επιτυγχάνεται προσθέτοντας επιπλέον κλάσεις στα στοιχεία λίστας με το jQuery όταν συμβαίνει το συμβάν κλικ.

Αυτές οι νέες τάξεις κινούνται με καθορισμένες @keyframes κανόνες στο αρχείο CSS. Οι επιπλέον κλάσεις αφαιρούνται από το jQuery όταν ο χρήστης κάνει κλικ στο κουμπί την επόμενη φορά και το μενού ξανακρύπτεται.

CSS Properties και The @keyframes Κανόνας

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

Για κινούμενα σχέδια υπάρχει το κινουμένων σχεδίων στενογραφική ιδιοκτησία στα χέρια μας που σημαίνει όχι λιγότερες από 8 μοναδικές ιδιότητες animation, δηλαδή animation-name, διάρκεια κινούμενης εικόνας, λειτουργία κινούμενου χρόνου-χρονισμού, κίνηση-καθυστέρηση, animation-iteration-count, κίνηση κατεύθυνσης, λειτουργία γεμίσματος-γεμίσματος, και κατάσταση παιχνιδιού-κινούμενης εικόνας.

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

 .στοιχείο φόντο: πορτοκαλί; transition-property: background; διάρκεια μετάβασης: 3 δευτερόλεπτα. μετάβαση-χρονοδιάγραμμα-λειτουργία: ευκολία-μέσα? . στοιχείο: αιωρείται φόντο: κόκκινο; 

Καθορίσαμε το Ιστορικό ιδιοκτησία, γιατί αυτό θα αλλάξει κατά τη διάρκεια της μετάβασης.

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

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

 .στοιχείο φόντο: πορτοκαλί; μετάβαση: 3s ευκολία στο παρασκήνιο; . στοιχείο: αιωρείται φόντο: κόκκινο; 

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

 .στοιχείο θέση: σχετική; animation-name: slide; διάρκεια ζωής: 3 δευτερόλεπτα. λειτουργία κινούμενου χρόνου: ευκολία στην εισαγωγή.  @keyframes διαφάνεια 0% αριστερά: 0;  50% αριστερά: 200px;  100% αριστερά: 400px; 

Στο παραπάνω παράδειγμα δημιουργήσαμε ένα πολύ απλό αποτέλεσμα ολίσθησης. Ορίσαμε το animation-name, στη συνέχεια δεσμεύονται 3 βασικά πλαίσια σε αυτό που καθορίσαμε στο @ slideframes slide ... σε-κανόνες. Τα ποσοστά αναφέρονται στη διάρκεια της κινούμενης εικόνας, έτσι το 50% συμβαίνει σε 1,5 δευτερόλεπτα στο παράδειγμα.

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

 .στοιχείο θέση: σχετική; κινούμενα σχέδια: ευκολία στην ολίσθηση 3s;  @keyframes διαφάνεια από αριστερά: 0;  στο αριστερά: 400px; 

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

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

Οι κινούμενες εικόνες και οι μεταβάσεις CSS3 συνεργάστηκαν με τα προθέματα των πωλητών για μεγάλο χρονικό διάστημα, τα οποία δεν χρειάζεται πλέον να χρησιμοποιήσουμε, ωστόσο το Mozilla Developer Network εξακολουθεί να συνιστά να προσθέσετε -webkit πρόθεμα για λίγο, καθώς η υποστήριξη για προγράμματα περιήγησης που βασίζονται σε Webkit απέκτησε πρόσφατα μόνο σταθερότητα.