CSS τεχνικές για το φαινόμενο κυματισμού υλικού

Ένας οδηγός σε διάφορες τεχνικές για το εφέ κυματισμού χρησιμοποιώντας CSS και JavaScript

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

Τι είναι αυτό το φαινόμενο κυματισμού;

Περιμένετε, δεν γνωρίζετε το φαινόμενο κυματισμού από το Σχεδιασμό Υλικών της Google; Ζείτε σε μια σπηλιά για πόσους χρόνους;

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

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

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

Οι κυματισμοί που θα βρείτε στο διαδίκτυο

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

Χρήση :: μετά από ψευδο-στοιχείο

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

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

Θα μπορούσε να βελτιωθεί με τη χρήση του JavaScript για να αποθηκεύσετε το σημείο επαφής και να το χρησιμοποιήσετε για να τοποθετήσετε το κυματισμό. Αυτό ακριβώς έκανε το material.io για την συνιστώσα του διαδικτύου. Χρησιμοποιεί μεταβλητές CSS για την αποθήκευση του σημείου επαφής και το :: μετά το ψευδο-στοιχείο χρησιμοποιεί αυτές τις μεταβλητές για την τοποθέτηση.

Χρήση παιδικών στοιχείων

Στην ουσία, αυτή η τεχνική χρησιμοποιεί την ίδια στρατηγική όπως πριν. Αλλά αντί ενός ψευδο-στοιχείου, προσθέτει ένα στοιχείο span μέσα στο κουμπί, το οποίο στη συνέχεια μπορεί να τοποθετηθεί μέσω JavaScript. Αυτή η τεχνική περιγράφεται σε αυτό το άρθρο από τον Jhey Tompkins.

Η απλούστερη εφαρμογή δημιουργεί ένα άνοιγμα για κάθε κλικ στο κουμπί και χρησιμοποιεί τη θέση του ποντικιού στο συμβάν κλικ για να αλλάξει τη θέση του εύρους. Ένα animation CSS κάνει το span να αναπτυχθεί και να εξασθενίσει μέχρι να γίνει πλήρως διαφανές. Μπορούμε να επιλέξουμε να αφαιρέσουμε το άνοιγμα από το DOM μόλις τελειώσει η κινούμενη εικόνα ή απλά αφήνουμε εκεί κάτω από το χαλί - κανείς δεν θα παρατηρήσει πραγματικά μια διαφανή έκταση που κρέμεται γύρω.

Έχω βρει μια άλλη παραλλαγή αυτού, επί του οποίου το στοιχείο παιδιού είναι ένα svg αντί για ένα span, και το svg κινείται μέσω JavaScript. Αυτή η παραλλαγή εξηγείται από τον Dennis Gaebel, αλλά στην ουσία φαίνεται να είναι το ίδιο και ίσως να επιτρέπει τη χρήση πολύπλοκων σχημάτων και αποτελεσμάτων SVG.

Ένα πρόβλημα με την υποβολή εισροών

Και οι δύο τεχνικές που περιγράφηκαν παραπάνω φαίνονται εξαιρετικές. Αλλά αυτό συμβαίνει όταν προσπάθησα να τα εφαρμόσω στα στοιχεία εισόδου με type = submit:

Γιατί δεν δουλεύουν;

Το στοιχείο εισόδου είναι ένα αντικατασταθέν στοιχείο. Εν ολίγοις, αυτό σημαίνει ότι πολύ λίγα μπορείτε να κάνετε με αυτά τα στοιχεία, σε σχέση με το DOM και το CSS. Συγκεκριμένα, δεν μπορούν να έχουν παιδικά στοιχεία, ούτε ψευδο-στοιχεία. Τώρα είναι σαφές γιατί οι τεχνικές αυτές αποτυγχάνουν.

Επομένως, αν χρησιμοποιείτε το σχεδιασμό υλικού, είναι καλύτερο να μείνετε μακριά από την είσοδο [type = submit] και να κολλήσετε σε στοιχεία κουμπιού. Ή απλώς συνεχίστε να διαβάζετε.

Προσθήκη κυματισμών για την υποβολή εισροών

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

Χρησιμοποιώντας ένα δοχείο περιτύλιξης

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

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

Ακτινικές κλίσεις

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

Δεν είναι τόσο γρήγορο ... υπάρχει ένα πράγμα που λείπει: η ιδιότητα φόντου-εικόνας δεν είναι animatable. Δεν θα μπορούσα να κάνω την κλίση να αναπτυχθεί και να εξασθενίσει σε διαφανή χρησιμοποιώντας animations CSS. Καταφέραμε να το αυξήσουμε με τη διέγερση της ιδιοκτησίας μεγέθους φόντου, αλλά αυτό ήταν μόνο που θα μπορούσα να κάνω.

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

Τέλος, μια λύση με JavaScript

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

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

συμπέρασμα

Επομένως, είναι πιθανό να έχουν αποτελέσματα κυματισμού στα κουμπιά υποβολής, απλά όχι μόνο με το CSS.

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

Πρώτον, υπάρχει απόδοση. Με την κίνηση της κλίσης με το JavaScript, χάνετε πολλές βελτιστοποιήσεις προγράμματος περιήγησης. Αλλά, επειδή η μόνη ιδιότητα που αλλάζει είναι η εικόνα φόντου, θα υποπτεύομαι ότι οι φυλλομετρητές δεν θα χρειαζόταν να ανανεώσουν ξανά, και απλά θα χρειαζόταν να ξαναβάλουν τα στυλ και να ζωγραφίζουν το στοιχείο. Στην πράξη, αυτό ακριβώς συμβαίνει και η απόδοση είναι πραγματικά καλή. Η εξαίρεση σε αυτή τη δήλωση είναι το Firefox Mobile, το οποίο για κάποιο λόγο δεν συμβαδίζει με το κινούμενο σχέδιο. (επεξεργασία: η κινούμενη εικόνα είναι ομαλή στις σύγχρονες εκδόσεις του Firefox Mobile)

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

Τρίτον, αυτό δεν φαίνεται να λειτουργεί στον Internet Explorer. Ωστόσο, δεν βλέπω κανένα λόγο για τον οποίο δεν θα έπρεπε να λειτουργεί με τον IE10 και παραπάνω. Ίσως είναι επειδή η IE χρησιμοποιεί διαφορετική σύνταξη για ακτινική κλίση. Αλλά, ποιος νοιάζεται για την IE σήμερα; (επεξεργασία: αυτή η μέθοδος λειτουργεί χωρίς προβλήματα στο Internet Explorer 11)